Day05 - Flutter开发初体验

一、创建Flutter项目
创建Flutter项目有两种方式：通过命令行创建 和 通过开发工具创建

• 1.1、在终端通过命令行创建

  flutter create 项目的名字
  

  提示：

  • Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识(不要使用大写)
  • 创建完之后使用自己喜欢的开发工具打开即可，比如：Android Sdudio、VSCode

• 1.2、目录结构概述

  
  flutter 目录结构概述
  • dart_tool：记录一些东西所在的位置以及它的一些版本信息，不需要我们去配置，不要手动去修改
  • idea: 记录当前项目的一些配置的
  • iml：也是对记录对当前项目的配置
  • Android：安卓的代码
  • iOS：iOS的代码
  • lib：flutter 源码的文件夹
  • test：主要是用来做一些测试的
  • gitignore：记录当前的一些忽略的
  • metadate：对flutter版本的一些记录，不需要手动去改
  • packages、pubspec.lock 都是导入到三方后生成的

• 1.3、Flutter Hot Reload 热重载 和 Flutter Hot Restart 热重启 的区别
  

  Flutter Hot Reload 热重载 和 Flutter Hot Restart 热重启
  • Flutter Hot Reload 热重载：主要是执行 build 方法
  • Flutter Hot Restart 热重启：重新运行整个app(热启动)

  提示：冷启动是从未启动过app

二、Flutter代码展示，看不懂没关系，这篇博客仅仅是展示，下篇才开始学习

• 2.1、Hello World的实现
  我们在 main.dart 里面进行从 0 到 1 编写代码

  import 'package:flutter/material.dart';
  
  main(List<String> args) {
       runApp(Text("Hello World", textDirection: TextDirection.ltr));
  }
  

  当然，上面的代码我们已经实现了在界面上显示Hello World：
  但是没有居中，字体也有点小；
  这些问题，我们放到后面再来解决，先搞懂目前的几行代码；
  上面的代码我们有一些比较熟悉，有一些并不清楚是什么：
  比如我们知道Dart程序的入口都是main函数，而Flutter是Dart编写的，所以入口也是main函数；
  但是我们导入的Material是什么呢？
  另外，我们在main函数中调用了一个runApp()函数又是什么呢？
  下面，我们对不认识的代码进行一些分析。

• 2.2、代码分析

  • 1>、runApp 和 Widget
    runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

    • 我们可以点到runApp的源码，查看到该函数

    • 我们暂时不分析具体的源码（因为我发现过多的理论，对于初学者来说并不友好）

      void runApp(Widget app) {
          ...省略代码
      }
      

      该函数让我们传入一个东西：Widget？
      我们先说Widget的翻译：

      • Widget在国内有很多的翻译；
        • 做过Android、iOS等开发的人群，喜欢将它翻译成控件；
        • 做过Vue、React等开发的人群，喜欢将它翻译成组件；
        • 如果我们使用Google，Widget翻译过来应该是小部件；
        • 没有说哪种翻译一定是对的，或者一定是错的，但是我个人更倾向于小部件或者组件；
      • Widget到底什么东西呢？
        • 我们学习Flutter，从一开始就可以有一个基本的认识：Flutter中万物皆Widget（万物皆可盘）；
        • 在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；
        • 但是在Flutter中，这些东西都是不同的Widget而已；
        • 也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；
      • runApp函数让我们传入的就是一个Widget：
        • 但是我们现在没有Widget，怎么办呢？
        • 我们可以导入Flutter默认已经给我们提供的Material库，来使用其中的很多内置Widget；

  • 2>、Material 设计风格

    • material是什么呢？

      • material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
      • 里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
      • 在Flutter中高度集成了Material风格的Widget；
      • 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；

    • Text小部件分析：

      • 我们可以使用Text小部件来完成文字的显示；

      • 我们发现Text小部件继承自StatelessWidget，StatelessWidget继承自Widget；

      • 所以我们可以将Text小部件传入到runApp函数中

      • 属性非常多，但是我们已经学习了Dart语法，所以你会发现只有this.data属性是必须传入的。

        class Text extends StatelessWidget {
            const Text(
            this.data, {
            Key key,
            this.style,
            this.strutStyle,
            this.textAlign,
            this.textDirection,
            this.locale,
            this.softWrap,
            this.overflow,
            this.textScaleFactor,
            this.maxLines,
            this.semanticsLabel,
            this.textWidthBasis,
            });
        }
        

    • StatelessWidget简单介绍：

      • StatelessWidget继承自Widget；

      • 后面我会更加详细的介绍它的用法；

        abstract class StatelessWidget extends Widget {
           // ...省略代码
        }
        

• 2.3、代码改进

  • 1>、改进界面样式
    我们可能希望文字居中显示，并且可以大一些；
    居中显示： 需要使用另外一个Widget，Center；
    文字大一些： 需要给Text文本设置一些样式；
    我们修改代码如下：
    我们在Text小部件外层包装了一个Center部件，让Text作为其child；
    并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；

    import 'package:flutter/material.dart';
    
    main(List<String> args) {
        runApp(Center(
            child: Text(
               "Hello World",
               textDirection: TextDirection.ltr,
               style: TextStyle(fontSize: 20),
            ),
         )
       );
    }
    

  • 2>、改进界面结构
    目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。
    正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等
    在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。
    我们通过下面的代码来实现：

    import 'package:flutter/material.dart';
    
    main(List<String> args) {
        runApp(
           MaterialApp(
              home: Scaffold(
                 appBar: AppBar(
                     title: Text("CODERWHY"),
                 ),
                 body: Center(
                     child: Text(
                     "Hello World",
                     textDirection: TextDirection.ltr,
                     style: TextStyle(fontSize: 36),
                 ),
              ),
           ),
        )
      );
    }
    

    • 在最外层包裹一个MaterialApp
      • 这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；
      • title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；（暂时可以不写）
      • home：是该应用启动时显示的页面，我们传入了一个Scaffold；
    • Scaffold是什么呢？
      • 翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
      • 所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
      • Scaffold也有一些属性，比如appBar和body；
      • appBar是用于设计导航栏的，我们传入了一个title属性；
      • body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

• 2.4、代码重构

  • 1>、创建自己的Widget
    很多学习Flutter的人，都会被Flutter的嵌套劝退，当代码嵌套过多时，结构很容易看不清晰。

    • 这里有两点我先说明一下：
      • 1、Flutter整个开发过程中就是形成一个Widget树，所以形成嵌套是很正常的。
      • 2、关于Flutter的代码缩进，更多开发中我们使用的是2个空格（前端开发2个空格居多，你喜欢4个也没问题）
    • 但是，我们开发一个这么简单的程序就出现如此多的嵌套，如果应用程序更复杂呢？
      • 我们可以对我们的代码进行封装，将它们封装到自己的Widget中，创建自己的Widget；
    • 如何创建自己的Widget呢？
      • 在Flutter开发中，我们可以继承自StatelessWidget或者StatefulWidget来创建自己的Widget类；
      • StatelessWidget： 没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；
      • StatefulWidget： 需要保存状态，并且可能出现状态改变的Widget；

    在上面的案例中对代码的重构，我们使用StatelessWidget即可，所以我们接下来学习一下如果利用StatelessWidget来对我们的代码进行重构；
    StatefulWidget我们放到后面的一个案例中来学习；

  • 2>、StatelessWidget

    • StatelessWidget通常是一些没有状态（State，也可以理解成data）需要维护的Widget：
      • 它们的数据通常是直接写死（放在Widget中的数据，必须被定义为final，为什么呢？我在下一个章节讲解StatefulWidget会讲到）；
      • 从parent widget中传入的而且一旦传入就不可以修改；
      • 从InheritedWidget获取来使用的数据（这个放到后面会讲解）；
    • 我们来看一下创建一个StatelessWidget的格式：

      • 让自己创建的Widget继承自StatelessWidget；

      • StatelessWidget包含一个必须重写的方法：build方法；

        class MyStatelessWidget extends StatelessWidget {
           @override
           Widget build(BuildContext context) {
               return <返回我们的Widget要渲染的Widget，比如一个Text Widget>;
           }
        }
        

    • build方法的解析：
      • Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；
      • 我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；
      • StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；
    • build方法什么情况下被执行呢 ？
      • 当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；
      • 当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；
      • 如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

  • 3>、重构案例代码

    
    
    

    现在我们就可以通过StatelessWidget来对我们的代码进行重构了

    • 因为我们的整个代码都是一些数据展示，没有数据的改变，使用StatelessWidget即可；
    • 另外，为了体现更好的封装性，我对代码进行了两层的拆分，让代码结构看起来更加清晰；（具体的拆分方式，我会在后面的案例中不断的体现出来，目前我们先拆分两层）

    重构后的代码如下：

    import 'package:flutter/material.dart';
    
    main(List<String> args) {
        runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
          return MaterialApp(
              home: Scaffold(
                appBar: AppBar(
                title: Text("CODERWHY"),
              ),
              body: HomeContent(),
          ),
        )
      }
    }
    
    class HomeContent extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
          return Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Checkbox(
                       value: true,
                       onChanged: (value) => print("Hello World")
                 ),
                 Text(
                    "同意协议",
                    textDirection: TextDirection.ltr,
                    style: TextStyle(fontSize: 20),
                 )
               ],
             ),
          );
       }
    }
    

• 2.5、StateFulWidget (有状态的)
  在开发中，某些Widget情况下我们展示的数据并不是一层不变的：
  比如Flutter默认程序中的计数器案例，点击了+号按钮后，显示的数字需要+1；
  比如在开发中，我们会进行下拉刷新、上拉加载更多，这时数据也会发生变化；
  而StatelessWidget通常用来展示哪些数据固定不变的，如果数据会发生改变，我们使用StatefulWidget；

  • 1>、StatefulWidget介绍
    为什么选择StatefulWidget呢？
    在示例代码中，当我们点击按钮时，界面上显示的数据会发生改变；
    这时，我们需要一个变量来记录当前的状态，再把这个变量显示到某个Text Widget上；
    并且每次变量发生改变时，我们对应的Text上显示的内容也要发生改变；
    但是有一个问题，我之前说过定义到Widget中的数据都是不可变的，必须定义为final，为什么呢？
    这次因为Flutter在设计的时候就决定了一旦Widget中展示的数据发生变化，就重新构建整个Widget；Flutter通过一些机制来限定定义到Widget中的成员变量必须是final的；

    • Flutter如何做到我们在开发中定义到Widget中的数据一定是final的呢？,我们来看一下Widget的源码

      @immutable
      abstract class Widget extends DiagnosticableTree {
           // ...省略代码
      }
      

      被 @immutable 注解标明的类或者子类都必须是不可变的

    提示：定义到Widget中的数据一定是不可变的，需要使用final来修饰

  • 2>、如何存储Widget状态？

    • 既然Widget是不可变，那么StatefulWidget如何来存储可变的状态呢？
      • StatelessWidget无所谓，因为它里面的数据通常是直接定义完后就不修改的。
      • 但StatefulWidget需要有状态（可以理解成变量）的改变，这如何做到呢？
    • Flutter将StatefulWidget设计成了两个类：
      • 也就是你创建StatefulWidget时必须创建两个类：
      • 一个类继承自StatefulWidget，作为Widget树的一部分；
      • 一个类继承自State，用于记录StatefulWidget会变化的状态，并且根据状态的变化，构建出新的Widget；
    • 创建一个StatefulWidget，我们通常会按照如下格式来做：

      • 当Flutter在构建Widget Tree时，会获取State的实例，并且它调用build方法去获取StatefulWidget希望构建的Widget；

      • 那么，我们就可以将需要保存的状态保存在MyState中，因为它是可变的；

        class MyStatefulWidget extends StatefulWidget {
             @override
             State<StatefulWidget> createState() {
                 // 将创建的State返回
                 return MyState();
             }
        }
        
        class MyState extends State<MyStatefulWidget> {
             @override
             Widget build(BuildContext context) {
                 return <构建自己的Widget>;
             }
        }
        

      提示：Flutter这样设计的目的是：在Flutter中，只要数据改变了Widget就需要重新构建（rebuild）

• 2.6、StatefulWidget案例
  我们通过一个案例来练习一下StatefulWidget，还是之前的计数器案例，但是我们按照自己的方式进行一些改进。
  案例效果以及布局如下：

  • 在这个案例中，有很多布局对于我们来说有些复杂，我们后面会详细学习，建议大家根据我的代码一步步写出来来熟悉Flutter开发模式；

  • Column小部件：之前我们已经用过，当有垂直方向布局时，我们就使用它；

  • Row小部件：之前也用过，当时水平方向布局时，我们就使用它；

  • RaiseButton小部件：可以创建一个按钮，并且其中有一个onPress属性是传入一个回调函数，当按钮点击时被回调；

    
    

  • 1>、 创建StatefulWidget，下面我们来看看代码实现：

    • 为当点击按钮时，数字会发生变化，所以我们需要使用一个StatefulWidget，所以我们需要创建两个类；

    • MyCounterWidget继承自StatefulWidget，里面需要实现createState方法；

    • MyCounterState继承自State，里面实现build方法，并且可以定义一些成员变量

      class MyCounterWidget extends StatefulWidget {
        @override
        State<StatefulWidget> createState() {
             // 将创建的State返回
             return MyCounterState();
        }
      }
      
      class MyCounterState extends State<MyCounterWidget> {
          int counter = 0;
      
         @override
         Widget build(BuildContext context) {
             return Center(
                 child: Text("当前计数：$counter", style: TextStyle(fontSize: 30),),
             );
         }
      }
      

  • 2>、实现按钮的布局

    class MyCounterState extends State<MyCounterWidget> {
        int counter = 0;
    
        @override
        Widget build(BuildContext context) {
           return Center(
               child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            RaisedButton(
                               color: Colors.redAccent,
                               child: Text("+1", style: TextStyle(fontSize: 18, color: Colors.white),),
                               onPressed: () {
    
                               },
                            ),
                            RaisedButton(
                               color: Colors.orangeAccent,
                               child: Text("-1", style: TextStyle(fontSize: 18, color: Colors.white),),
                               onPressed: () {
    
                               },
                            )
                        ],
                      ),
                     Text("当前计数：$counter", style: TextStyle(fontSize: 30),)
                    ],
               ),
           );
       }
    }
    

  • 3>、按钮点击状态改变

    • 我们现在要监听状态的改变，当状态改变时要修改counter变量：
      • 但是，直接修改变量可以改变界面吗？不可以。
      • 这是因为Flutter并不知道我们的数据发生了改变，需要来重新构建我们界面中的Widget；
    • 如何可以让Flutter知道我们的状态发生改变了，重新构建我们的Widget呢？

      • 我们需要调用一个State中默认给我们提供的setState方法；

      • 可以在其中的回调函数中修改我们的变量；

        onPressed: () {
           setState(() {  
              counter++;  
           });   
        },   
        

• 2.7、StatefulWidget 生命周期

  • 1>、生命周期的理解

    • 什么是生命周期呢？
      • 客户端开发：iOS开发中我们需要知道UIViewController从创建到销毁的整个过程，Android开发中我们需要知道Activity从创建到销毁的整个过程。以便在不同的生命周期方法中完成不同的操作；
      • 前端开发中：Vue、React开发中组件也都有自己的生命周期，在不同的生命周期中我们可以做不同的操作；
    • Flutter小部件的生命周期：
      • StatelessWidget可以由父Widget直接传入值，调用build方法来构建，整个过程非常简单；
      • 而StatefulWidget需要通过State来管理其数据，并且还要监控状态的改变决定是否重新build整个Widget；
      • 所以，我们主要讨论StatefulWidget的生命周期，也就是它从创建到销毁的整个过程；

  • 2>、生命周期
    那么StatefulWidget有哪些生命周期的回调呢？它们分别在什么情况下执行呢？
    atefulWidget本身由两个类组成的：StatefulWidget和State，我们分开进行分析
    首先，执行StatefulWidget中相关的方法：

    • 1、执行StatefulWidget的构造函数（Constructor）来创建出StatefulWidget；
    • 2、执行StatefulWidget的createState方法，来创建一个维护StatefulWidget的State对象；

    其次，调用createState创建State对象时，执行State类的相关方法：

    • 1、执行State类的构造方法（Constructor）来创建State对象；
    • 2、执行initState，我们通常会在这个方法中执行一些数据初始化的操作，或者也可能会发送网络请求；
    • 3、执行didChangeDependencies方法，这个方法在两种情况下会调用
      • 情况一：调用initState会调用；
      • 情况二：从其他对象中依赖一些数据发生改变时，比如前面我们提到的InheritedWidget；
    • 4、Flutter执行build方法，来看一下我们当前的Widget需要渲染哪些Widget；
    • 5、当前的Widget不再使用时，会调用dispose进行销毁；
    • 6、手动调用setState方法，会根据最新的状态（数据）来重新调用build方法，构建对应的Widgets；
    • 7、执行didUpdateWidget方法是在当父Widget触发重建（rebuild）时，系统会调用didUpdateWidget方法；

    过代码进行演示：

    import 'package:flutter/material.dart';
    
    main(List<String> args) {
        runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
             return MaterialApp(
                 home: Scaffold(
                   appBar: AppBar(
                       title: Text("HelloWorld"),
                   ),
                 body: HomeBody(),
              ),
         );
      }
    }
    
    class HomeBody extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
          print("HomeBody build");
          return MyCounterWidget();
       }
    }
    
    class MyCounterWidget extends StatefulWidget {
    
       MyCounterWidget() {
           print("执行了MyCounterWidget的构造方法");
       }
    
       @override
       State<StatefulWidget> createState() {
            print("执行了MyCounterWidget的createState方法");
            // 将创建的State返回
            return MyCounterState();
        }
    }
    
    class MyCounterState extends State<MyCounterWidget> {
         int counter = 0;
    
         MyCounterState() {
            print("执行MyCounterState的构造方法");
         }
    
         @override
         void initState() {
             super.initState();
             print("执行MyCounterState的init方法");
         }
    
         @override
         void didChangeDependencies() {
            // TODO: implement didChangeDependencies
            super.didChangeDependencies();
            print("执行MyCounterState的didChangeDependencies方法");
         }
    
         @override
         Widget build(BuildContext context) {
             print("执行执行MyCounterState的build方法");
             return Center(
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              RaisedButton(
                                 color: Colors.redAccent,
                                 child: Text("+1", style: TextStyle(fontSize: 18, color: Colors.white),),
                                onPressed: () {
                                   setState(() {
                                       counter++;
                                   });
                                },
                              ),
                             RaisedButton(
                                 color: Colors.orangeAccent,
                                 child: Text("-1", style: TextStyle(fontSize: 18, color: Colors.white),),
                                 onPressed: () {
                                     setState(() {
                                        counter--;
                                     });
                                 },
                             )
                          ],
                       ),
                      Text("当前计数：$counter", style: TextStyle(fontSize: 30),)
                  ],
              ),
          );
        }
    
       @override
       void didUpdateWidget(MyCounterWidget oldWidget) {
              super.didUpdateWidget(oldWidget);
               print("执行MyCounterState的didUpdateWidget方法");
       }
    
       @override
       void dispose() {
          super.dispose();
          print("执行MyCounterState的dispose方法");
       }
    }
    

    打印结果如下：

    flutter: HomeBody build
    flutter: 执行了MyCounterWidget的构造方法
    flutter: 执行了MyCounterWidget的createState方法
    flutter: 执行MyCounterState的构造方法
    flutter: 执行MyCounterState的init方法
    flutter: 执行MyCounterState的didChangeDependencies方法
    flutter: 执行执行MyCounterState的build方法
    
    // 注意：Flutter会build所有的组件两次（查了GitHub、Stack Overflow，目前没查到原因）
    flutter: HomeBody build
    flutter: 执行了MyCounterWidget的构造方法
    flutter: 执行MyCounterState的didUpdateWidget方法
    flutter: 执行执行MyCounterState的build方法
    

    当我们改变状态，手动执行setState方法后会打印如下结果：

    flutter: 执行执行MyCounterState的build方法