一. 启动文件说明-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("底部区域")), ), ), ); } }