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 { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: MyHomePage() ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('这是Flutter Title'), ), body: MyCenterBody()); } } // flag:状态 // Stateful不能定义状态 -> 创建一个单独的类，这个类负责维护状态 // Widget 不加下划线_ ，因为需要暴漏给别人使用 class MyCenterBody extends StatefulWidget { @override State<StatefulWidget> createState() { return _MyContentBodyState(); } } // State加下划线_ ，因为状态只给 Widget 使用 class _MyContentBodyState extends State<MyCenterBody>{ var flag = true; @override Widget build(BuildContext context) { return Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Checkbox( value: flag, onChanged: (value){ setState(() { flag = value!; }); } ), Text( '同意条款', style: TextStyle(fontSize: 20), ) ], ) ); } }