原来Flutter代码是这样运行在原生系统的！快来了解Flutter标准模板，感受原生系统中Flutter的魅力！

梦里梦外; 2024-03-16 22:04 17阅读 0赞

通过Android Studio创建的Flutter应用模板，了解Flutter项目结构，分析Flutter工程与原生Android和iOS工程有哪些联系，体验一个有着基本功能的Flutter应用是如何运转的，从而加深你对构建Flutter应用的关键概念和技术的理解。

Dart只要理解基本编程概念（比如，类型、变量、函数和面向对象），并具备一定前端基础（了解View是什么、页面基本布局等基础），就可以和我一起完成计数器示例工程分析

Android Studio创建Flutter工程应用flutter\_app。Flutter会根据自带的应用模板，自动生成简单计数器示例应用Demo。我们先运行此示例，效果如下：

![图1：计数器示例运行效果][1]

每点击一次右下角带“+”号的悬浮按钮，就可以看到屏幕中央的数字随之+1。

### 1 工程结构 ###

了解Flutter工程与原生Android和iOS工程关系及这些关系是如何确保Flutter程序最终运行在Android和iOS。

![图2：Flutter工程目录结构][2_Flutter]

除Flutter本身的代码、资源、依赖和配置，Flutter工程包含Android和iOS工程目录。因为Flutter虽然是跨平台开发方案，但却需要一个容器最终运行到Android和iOS平台，所以 **Flutter工程实际是同时内嵌Android和iOS原生子工程的父工程**：在lib目录进行Flutter代码开发，某些特殊场景原生功能，则在对应Android和iOS工程提供相应代码实现，供对应Flutter代码引用。

Flutter会将相关依赖和构建产物注入这两个子工程，集成到各自项目。而我们开发Flutter代码，最终以原生工程形式运行。

### 2 工程代码 ###

Flutter自带的应用模板，即计数器示例，对初学者是极好入门范例。从基础的组件、布局到手势的监听，再到状态的改变，Flutter最核心思想在这60余行代码。

为便学习理解，删掉核心流程无关组件配置代码及布局逻辑，不影响示例功能的情况下对代码进行改写，并分两部分：

*  应用入口、应用结构以及页面结构，理解构建Flutter程序的基本结构和套路
 *  页面布局、交互逻辑及状态管理，理解Flutter页面是如何构建、如何响应交互，以及如何更新

### 3 第一部分代码，应用的整体结构 ###

import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
        
      @override
      Widget build(BuildContext context) => MaterialApp(home: MyHomePage(title: 'Flutter Demo Home Page'));
    }
    
    class MyHomePage extends StatefulWidget {
        
      MyHomePage({
        Key key, this.title}) : super(key: key);
      final String title;
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
        
      Widget build(BuildContext context) => {
        ...};
    }

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

#### 3.1 Widget ####

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

##### 3.1.1 build方法 #####

通过对基础Widget进行相应UI配置或组合各类基础Widget进行UI定制化。如MyApp通过MaterialApp这个Flutter App框架设置应用首页，即MyHomePage。

#### 3.2 MaterialApp类 ####

是对构建material设计风格应用的组件封装框架，有很多可配置属性，如应用主题、应用名称、语言标识符、组件路由等，可参考Flutter官方的 [API文档][API]，了解MaterialApp框架的其他配置能力。

#### 3.3 MyHomePage ####

应用首页，继承自StatefulWidget类，有状态Widget（Stateful Widget）， \_MyHomePageState就是其状态。

虽然MyHomePage类也是Widget，但与MyApp类不同，它没有build方法返回Widget，而是多个createState方法返回\_MyHomePageState对象，而build方法包含在这 \_MyHomePageState 类中。

#### 3.4 StatefulWidget V.S StatelessWidget的接口设计 ####

因为Widget要依据数据才能完成构建，对StatefulWidget来说，其依赖的数据在Widget生命周期中可能频繁变化。由State创建Widget，以数据驱动视图更新，而非直接操作UI更新视觉属性，代码表达更精炼，逻辑更清晰。

### 4 第二部分-页面布局及交互逻辑 ###

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，页面导航栏，直接将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，根据新状态重建界面。

状态的更改一定要配合使用setState。通过该方法调用，Flutter会在底层标记Widget的状态，随后触发重建。示例即使修改\_counter，若不调用setState，Flutter框架也不会感知到状态变化，因此界面也不会有任何改变。

图计数器示例的代码流程示意图，把这实例的整个代码流程串起：

![图3：代码流程示意图][3]

MyApp为Flutter应用的运行实例，在main函数中调用runApp函数实现程序的入口。

应用首页则为MyHomePage，一个拥有\_MyHomePageState状态的StatefulWidget。\_MyHomePageState通过调用build方法以相应数据配置完成包括导航栏、文本及按钮的页面视图的创建。

而当按钮被点击之后，其关联的控件函数\_incrementCounter会触发调用。在这个函数中，通过调用setState更新\_counter属性同时，也通知Flutter框架其状态发生变化。随后，Flutter重新调用build方法以新数据配置重建\_MyHomePageState的UI，最终完成页面重新渲染。

Widget只是视图的“配置信息”，是数据的映射，“只读”。对StatefulWidget，当数据改变时，需重建Widget去更新界面，即Widget创建销毁会很频繁。

为此，Flutter对此机制

### 5 优化 ###

其框架内部会通过一个中间层收敛上层UI配置对底层真实渲染的改动，从而最大程度降低对真实渲染视图的修改，提高渲染效率，而不是上层UI配置变就要销毁整个渲染视图树重建。

这样Widget仅是一个轻量级的数据配置存储结构，它的重新创建速度非常快，所以我们可放心重建任何需更新的视图，无需分别修改各子Widget特定样式。

### 6 总结 ###

先通过Flutter标准模板创建了计数器示例，并分析了Flutter的项目结构，以及Flutter工程与原生Android、iOS工程的联系，知道了Flutter代码是怎么运行在原生系统上的。

然后，学习示例项目代码，了解了Flutter应用结构及页面结构，并认识了构建Flutter的基础，也就是Widget，以及状态管理机制，知道了Flutter页面是如何构建的，StatelessWidget与StatefulWidget的区别，以及如何通过State的成员函数setState以数据驱动的方式更新状态，从而更新页面。

有原生Android和iOS框架开发经验的同学，可能更习惯命令式UI编程风格：手动创建UI组件，在需要更改UI时调用其方法修改视觉属性。而Flutter采用声明式UI设计，只需描述当前UI状态（即State），不同UI状态的视觉变更由Flutter在底层完成。

虽然命令式的UI编程风格更直观，但声明式UI编程方式好处是，可以让我们把复杂的视图操作细节交给框架去完成，这样一来不仅可以提高我们的效率，也可专注整个应用和页面的结构和功能。

### 7 FAQ ###

示例项目代码在\_MyHomePageState类中，直接在build函数里以内联的方式完成了Scaffold页面元素的构建，这样做的好处是什么呢？在实现同样功能的情况下，如果将Scaffold页面元素的构建封装成一个新Widget类，我们该如何处理？

将Scaffold页面元素的构建封装成一个新Widget类的好处是可以提高代码的可复用性和可维护性。这样可以将Scaffold的构建逻辑封装到一个独立的组件中，方便在其他地方重复使用，也方便后续进行修改和维护。

如果要将Scaffold页面元素的构建封装成一个新Widget类，可以创建一个新的StatelessWidget或StatefulWidget类，然后在该类的build方法中返回Scaffold组件的代码。这样就可以在其他地方使用该组件来构建Scaffold页面元素。例如：

class MyScaffold extends StatelessWidget {
        
      final Widget body;
    
      const MyScaffold({
        Key? key, required this.body}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text('My App'),
          ),
          body: body,
        );
      }
    }

然后在其他地方可以通过`MyScaffold`来构建页面元素，例如：

class MyApp extends StatelessWidget {
        
      @override
      Widget build(BuildContext context) {
        
        return MyScaffold(
          body: Center(
            child: Text('Hello, World!'),
          ),
        );
      }
    }

[1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/577b04dcd1de4698b982e73125a6bdf3.png
[2_Flutter]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/139e05828fc44d098bb44ba3b8bc0c48.png
[API]: https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html
[3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/272693555b9543a7a54b81b8fae2c25b.png