news 2026/7/18 16:12:25

Flutter第六节-----Flutter部分基础组件解析到自定义组件

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Flutter第六节-----Flutter部分基础组件解析到自定义组件

一. 启动文件说明-runApp和Widget

runApp函数是Flutter内部提供的一个函数,启动一个Flutter应用就是从调用这个函数开始的
Widget表示控件、组件、部件的含义,Flutter中万物皆Widget

二.Flutter的默认Material库

●Material是Google公司推行的一套设计风格,有很多的设计规范,如颜色、文字排版、动画等。
●目的:Material为Android、Web、iOS、HarmonyOS多个平台提供统一的交互和视觉体验。

三.基础组件-MaterialApp

特性:整个应用被MaterialApp包裹,方便我们对整个应用的属性进行整体设计

void main(List<String> args) { runApp( MaterialApp( title: "Flutter组件初体验", theme: ThemeData(scaffoldBackgroundColor: Colors.blue), home: Scaffold(), ), ); }


常见属性:title/theme/home
ttle:用来展示窗口的标题内容(可以不设置)
theme:用来设置整个应用的主题
home:用来展示窗口的主体内容

四.基础组件-Scaffold组件

●Scaffold:用于构建Material Design风格页面的核心布局组件,提供标准、灵话配置的页面骨架

void main(List<String> args) { runApp( MaterialApp( title: "Flutter组件初体验", //theme: ThemeData(scaffoldBackgroundColor: Colors.blue), home: Scaffold( appBar: AppBar( //appbar用于给Scaffold声明顶部导航栏,Appbar用来构造顶部导航栏的具体样式内容 title: Text("头部区域"), //title:设置标题 centerTitle: true //居中标题 ), body: Container( //给body放置一个容器 child: Center( //给这个容器放置一个布局容器center child: Text("中部区域") //给这个center容器里再放一个child组件 ) ), bottomNavigationBar: Container( //声明底部导航栏,方便切换页面 height: 80, child: Center(child: Text('底部区域')), ), ), ), ); }

注意:一个容器里面可以放一个child,不能放两个,但可以在child里面再放容器,容器中再放child。

五.Flutter自定义组件-无状态组件和有状态组件

1.无状态组件-statelessWidget

●定义:根据自己特定的需求创建自己的Widget

●分类:Flutter分为无状态组件和有状态组件

示例无状态组件:

首先创建类利用构造函数runApp初始化我们的MainPage类,继承statelessWidge把官方StatelessWidget里面已经写好的底层代码全部拿过来复用。继承之后,MainPage自动获得 Widget 必备的能力,然后重写build,StatelessWidget父类里规定:所有子类必须实现build方法,框架渲染页面时,会自动调用这个方法,获取你要绘制的组件。最后在MainPage类中return了一个MaterialApp。

void main(List<String> args) { runApp(MainPage()); } class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( title: "Flutter组件的初体验", home: Scaffold( appBar: AppBar(title: Text("头部区域"), centerTitle: true), body: Container(child: Center(child: Text("中部区域"))), bottomNavigationBar: Container( height: 80, child: Center(child: Text("底部区域")), ), ), ); } }

2.有状态组件-statefulWidget

●定义:有状态组件是构建动态交互界面的核心,能够管理变化的内部状态,当状态改变时,组件会更新显示内容

●实现1:创建两个类,第一个类继承Statefulwidget类,主要接收和定义最终参数,核心作用是创建State对象

●实现2:第二个类继承State<第一个类名>,负责管理所有可变的数据和业务逻辑,并实现ouild构建方法

●要点:build方法需要返回一个Widget
●需求:将之前骨架组件换成有状态组件

示例:

void main(List<String> args) { runApp(MainPage()); } class MainPage extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return _MainPageState(); } } class _MainPageState extends State<MainPage> { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( title: "Flutter组件的初体验", home: Scaffold( appBar: AppBar(title: Text("头部区域"), centerTitle: true), body: Container(child: Center(child: Text("中部区域"))), bottomNavigationBar: Container( height: 80, child: Center(child: Text("底部区域")), ), ), ); } }

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/18 16:06:22

深入解析TI MibSPI控制寄存器:ECC诊断与中断配置实战指南

1. 项目概述在嵌入式系统开发&#xff0c;尤其是基于德州仪器&#xff08;TI&#xff09;微控制器的项目中&#xff0c;MibSPI&#xff08;Multi-Buffered Serial Peripheral Interface&#xff09;模块是一个功能强大的串行通信外设。它不仅仅是传统SPI的简单升级&#xff0c;…

作者头像 李华
网站建设 2026/7/18 16:05:36

怎样快速搞定Windows苹果驱动:3步精简安装终极指南

怎样快速搞定Windows苹果驱动&#xff1a;3步精简安装终极指南 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.com/gh_mirror…

作者头像 李华
网站建设 2026/7/18 16:04:16

coding-ethos 实战:把 AI 编码规则变成可回读的 policy 与 remediation

AI 编码治理最容易漏掉的不是规则&#xff0c;而是规则执行后的证据。coding-ethos 把项目约束拆成 policy、agent、hooks 和 code-intel 四个可追踪部分&#xff1a;coding_ethos.yml 管机制&#xff0c;CODING_ETHOS.md 与 ETHOS.md 管规范&#xff0c;AGENTS.md 与 CLAUDE.m…

作者头像 李华
网站建设 2026/7/18 16:00:31

成年人的顶级能力:允许自己搞砸

《心学攻略:王阳明给现代人的“人生重构”系统》 16/24 第16讲 | 容错机制:如何优雅地面对“搞砸”? 写这篇文章之前,我脑子里反复浮现出一个极其普通的画面。 那还是几年前,我在某银行做系统迁移项目。一位三十出头的技术骨干,因为一个配置疏忽,导致测试环境瘫痪了四…

作者头像 李华
网站建设 2026/7/18 15:50:54

Python TDD实战:红绿重构循环驱动高质量代码开发

1. 项目概述&#xff1a;为什么我们需要“先测后行”&#xff1f; 如果你写过一段时间代码&#xff0c;大概率遇到过这种场景&#xff1a;你信心满满地写完一个功能模块&#xff0c;然后开始手动测试。你输入几个值&#xff0c;看起来都正常&#xff0c;于是你提交代码&#xf…

作者头像 李华