Flutter - 初体验

项目文件目录结构介绍

注：创建 Flutter 项目名称不要包含特殊字符，不要使用驼峰标识

// TODO

开发中运行一个 Flutter 三种启动方式

Run 冷启动	从零开始启动
Hot Reload 热重载	执行 build 方法
Hot Restart 热重启	重新运行整个 APP

 代码分析

// Dart 程序入口是 main 函数，Flutter 是 Dart 编写的，所以入口也是 main 函数
main(){/*** 1. runApp 函数 (Flutter 内部提供的一个函数)* 当启动一个 Flutter 应用程序时调用 runApp*/runApp(/*** runApp入参：Widget** 2 Widget(Flutter 中万物皆 Widget)* 整个应用程序中所看到的内容几乎都是 Widget，甚至是内边距的设置，* 需要使用一个叫 Padding 的 Widget 来做*/);
}

改进页面样式

main() {runApp(/*** 需求：* 1 居中显示： 需要使用另外一个Widget，Center* 2 文字大一些： 需要给Text文本设置一些样式* 在 Text 小部件外层包装了一个 Center 部件，让 Text 作为其 child*/Center(child: Text('Hello Flutter',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 28,color: Colors.red))));
}

改进页面结构

main() {runApp(/*** 需求：添加导航栏* 最外层包裹一个 MaterialApp【Material 是 Google 推行的一套设计风格、设计规范】* title：Android 系统中打开多任务切换窗口时显示的标题；（可以不写）* home：应用启动时显示的页面，传入了一个 Scaffold** Scaffold:* 直译:[脚手架]，作用:搭建页面的基本结构* 所以给 MaterialApp 的 home 属性传入了一个 Scaffold 对象，作为启动显示的 Widget* Scaffold 也有一些属性，如 appBar 和 body* appBar:用于设计导航栏，传入了一个 title 属性* body:页面的内容，传入了之前已经创建好的 Center 中包裹的一个 Text 的 Widget*/MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Title'),),body: Center(child: Text('Hello Flutter',textDirection: TextDirection.ltr,style: TextStyle(fontSize: 28, color: Colors.red)))),));
}

功能进阶

main() {runApp(/*** 需求：改为一个复选框,复选框右边有说明文案* Row: 一个水平布局的小部件，将子控件水平排列*/MaterialApp(home: Scaffold(appBar: AppBar(title: Text('这是Flutter Title'),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Checkbox(value: true,onChanged: (value) => print('Checkbox 被点击了')),Text('同意条款',style: TextStyle(fontSize: 22),)],))),));
}

代码到此层级嵌套已很多，且Checkbox点击有问题，此处会引出 StatefulWidget / StatelessWidget

代码重构

main() {runApp(/*** Flutter 开发过程中会形成一个 Widget树，层级嵌套属正常* Flutter 代码缩进，开发中使用 2个空格** 问题：开发这么简单的程序出现这么多层级嵌套，如果应用程序更复杂层级嵌套会非常恐怖* 解决：可以对代码进行封装，将它们封装到自己的 Widget 中，创建自己的 Widget** 在 Flutter开发中，我们可以继承 StatelessWidget/StatefulWidget 创建自己的 Widget 类* 有状态的Widget: StatefulWidget 在运行过程中有一些状态需要改变程序* 无状态的Widget: StatelessWidget 内容是确定没有抓过你太的改变，通常这种 Widget 仅仅做一些展示** 先使用 StatelessWidget 重构：* StatelessWidget 通常是一些没有状态（State，也可以理解成data）需要维护的 Widget* 它们的数据通常是直接写死（放在Widget中的数据，必须被定义为 final）* 从 parent widget中传入的且一旦传入就不可修改*/MyApp());
}/*** StatelessWidget 包含一个必须重写的方法：build()* Flutter 在拿到我们创建的 StatelessWidget 时，会执行它的 build 方法* StatelessWidget 没办法主动去执行 build方法，当使用的数据发生改变时，build方法会被重新执行** build 方法执行：* 1 当 StatelessWidget 第一次被插入到Widget树中时（第一次被创建时）* 2 当父 Widget（parent widget）发生改变时，子 Widget会被重新构建* 3 如果我们的 Widget 依赖 InheritedWidget 的一些数据，InheritedWidget数据发生改变时*/
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,home: MyHomePage());}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('这是Flutter Title'),),body: MyCenterBody());}
}// flag:状态
// Stateful不能定义状态 -> 创建一个单独的类，这个类负责维护状态
class MyCenterBody extends StatefulWidget {@overrideState<StatefulWidget> createState() {return MyContentBodyState();}
}class MyContentBodyState extends State<MyCenterBody>{var flag = true;@overrideWidget build(BuildContext context) {return Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Checkbox(value: flag,onChanged: (value){setState(() {flag = value!;});}),Text('同意条款',style: TextStyle(fontSize: 20),)],));}
}