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

一. 启动文件说明-runApp和WidgetrunApp函数是Flutter内部提供的一个函数启动一个Flutter应用就是从调用这个函数开始的Widget表示控件、组件、部件的含义Flutter中万物皆Widget二.Flutter的默认Material库●Material是Google公司推行的一套设计风格有很多的设计规范如颜色、文字排版、动画等。●目的Material为Android、Web、iOS、HarmonyOS多个平台提供统一的交互和视觉体验。三.基础组件-MaterialApp特性整个应用被MaterialApp包裹方便我们对整个应用的属性进行整体设计void main(ListString args) { runApp( MaterialApp( title: Flutter组件初体验, theme: ThemeData(scaffoldBackgroundColor: Colors.blue), home: Scaffold(), ), ); }常见属性title/theme/homettle:用来展示窗口的标题内容可以不设置theme:用来设置整个应用的主题home:用来展示窗口的主体内容四.基础组件-Scaffold组件●Scaffold:用于构建Material Design风格页面的核心布局组件提供标准、灵话配置的页面骨架void main(ListString 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 必备的能力然后重写buildStatelessWidget父类里规定所有子类必须实现build方法框架渲染页面时会自动调用这个方法获取你要绘制的组件。最后在MainPage类中return了一个MaterialApp。void main(ListString 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(ListString args) { runApp(MainPage()); } class MainPage extends StatefulWidget { override StateStatefulWidget createState() { // TODO: implement createState return _MainPageState(); } } class _MainPageState extends StateMainPage { 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(底部区域)), ), ), ); } }