Flutter 初始化工程解析

Posted 2022-03-10 追到梦的魔术师

工程目录介绍

代码介绍

示例代码在 mian.dart 这个文件中，将代码折叠可以发现，除了main函数，还有三个class

main函数：

void main() 
  runApp(const MyApp());

只调用了一个函数runApp，runApp是一个flutter App的入口函数

void runApp(Widget app) 
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
	

示例中runApp中传入了一个MyApp示例

---

MyApp Class：

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  

Flutter 应用为 MyApp 类的一个实例，而 MyApp 类继承自 StatelessWidget 类，这也就意味着应用本身也是一个 Widget。事实上，在 Flutter 中，Widget 是整个视图描述的基础，在 Flutter 的世界里，包括应用、视图、视图控制器、布局等在内的概念，都建立在 Widget 之上，Flutter 的核心设计思想便是一切皆 Widget。

查看MyApp类的代码

 const MyApp(Key? key) : super(key: key);

这是一个构造函数！！！

构造函数下面是一个build方法

@override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  

Widget 是组件视觉效果的封装，是 UI 界面的载体，因此我们还需要为它提供一个方法，来告诉 Flutter 框架如何构建 UI 界面，这个方法就是 build。

在 build 方法中，我们通常通过对基础 Widget 进行相应的 UI 配置，或是组合各类基础 Widget 的方式进行 UI 的定制化。比如在 MyApp 中，我通过 MaterialApp 这个 Flutter App 框架设置了应用首页，即 MyHomePage。当然，MaterialApp 也是一个 Widget。

class MaterialApp extends StatefulWidget ***

MaterialApp 类是对构建 material 设计风格应用的组件封装框架，里面还有很多可配置的属性，比如应用主题、应用名称、语言标识符、组件路由等，这里我们主要关注home属性，表示因应用的home页。

---

MyHomePage Class

MyHomePage 是应用的首页，继承自 StatefulWidget 类。

class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key, required this.title) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
	

MyHomePage 类也是 Widget，但与 MyApp 类不同的是，它并没有一个 build 方法去返回 Widget，而是多了一个 createState 方法返回 _MyHomePageState 对象，而 build 方法则包含在这个 _MyHomePageState 类当中，原因就是MyHomePage继承自StatefulWidget而MyApp继承自StatelessWidget。

---

StatelessWidget 与 StatefulWidget

StatelessWidget ：无状态Widget

实现： 在需要实现一个StatelessWidget组件的时候，声明一个class类需要通过extends继承StatelessWidget，然后实现build方法，就可以创建一个无状态的Widget。这个Widget创建完成后，Widget的状态就固定了，当前Widget就是一个无状态的，当前Widget
的内容固定，不可更改。

注意： 如果无状态Widget里面有子Widget，并且子Widget是有状态的，则子Widget的内容是可以通过setState来更改的。无状态Widget影响的仅仅是自己是无状态的，不回影响他的父Widget和子Widget。

StatefulWidget 有状态Widget

实现： StatefulWidget组件的实现相对于StatelessWidget来说，复杂那么一点点。首先也是要通过extends继承StatefulWidget，然后实现State createState()函数，实现createState的过程中，可以通过State来集成一个有状态的Widget。状态的更改一定要配合使用 setState。通过这个方法的调用，Flutter 会在底层标记 Widget 的状态，随后触发重建。

---

_MyHomePageState 类

class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;

  void _incrementCounter() 
    setState(() 
      _counter++;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  

由于源代码内部有很多布局相关代码，为了便于学习理解，这里将它缩减后代码如下：

class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;
  void _incrementCounter() => setState(() _counter++;);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text(Widget.title)),
      body: Text('You have pushed the button this many times:$_counter')),
      floatingActionButton: FloatingActionButton(onPressed: _incrementCounter) 
    );
  

_MyHomePageState 中创建的 Widget Scaffold，是 Material 库中提供的页面布局结构，它包含 AppBar、Body，以及 FloatingActionButton。

• AppBar 是页面的导航栏，我们直接将 MyHomePage 中的 title 属性作为标题使用。
• body 则是一个 Text 组件，显示了一个根据 _counter 属性可变的文本：‘You have pushed the button this many times:$_counter’。
• floatingActionButton，则是页面右下角的带“+”的悬浮按钮。我们将 _incrementCounter 作为其点击处理函数。

_incrementCounter 的实现很简单，使用 setState 方法去自增状态属性 _counter。setState 方法是 Flutter 以数据驱动视图更新的关键函数，它会通知 Flutter 框架：我这儿有状态发生了改变，赶紧给我刷新界面吧。而 Flutter 框架收到通知后，会执行 Widget 的 build 方法，根据新的状态重新构建界面。

 void _incrementCounter() 
    setState(() 
      _counter++;
    );
  

整个流而成如下：