Flutter 开发初体验（一）

一、创建Flutter项目

1.1. 通过命令行创建

通过命令行创建非常简单，在终端输入以下命令即可：
注意：Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识
创建完之后使用自己喜欢的开发工具打开即可

flutter create learn_flutter

1.2 通过开发工具创建

直接通过Android Studio来进行创建：
选择Start a new Flutter project，之后填写相关的信息即可

二、开始Flutter代码

2.1 Hello World

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}

2.2 代码分析

2.2.1 runApp和Widget

runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的,该函数让我们传入一个参数 Widget，Widget翻译过来是小部件，类似Android、iOS中的控价，Flutter中万物皆Widget

2.2.2Material设计风格

material是什么呢？
material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
在Flutter中高度集成了Material风格的Widget；
在我们的应用中，我们可以直接使用这些Widget来创建我们的应用
textDirection
指定文本方向，在上述例子中，如果不指定文本方向会报错。No Directionality widget found。这是由于Flutter是面向全球的，有些国家文本排列顺序是从右到左的，如果不指定文本方向，Flutter无法绘制。
但如果部件是包裹在MaterialApp中的话，可以不指定，这是由于MaterialApp默认文本方向从左到右

2.3 代码改进

2.3.1 改进界面样式

我们可能希望文字居中显示，并且可以大一些；
居中显示：需要使用另外一个Widget，Center；
文字大一些：需要给Text文本设置一些样式；

我们在Text小部件外层包装了一个Center部件，让Text作为其child；并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；

void main(List<String> args) {
  runApp(Center(
    child: Text(
      "Hello World",
      textDirection: TextDirection.rtl,
      style: TextStyle(fontSize: 30),
    ),
  ));
}

2.3.2改进界面结构

正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等
在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建

void main(List<String> args) {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("Hello World")),
      body: Center(
        child: Text(
          "Hello Fultter!",
          style: TextStyle(fontSize: 30),
        ),
      ),
    ),
  ));
}

在最外层包裹一个MaterialApp,这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计

Scaffold是什么呢？
翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
Scaffold也有一些属性，比如appBar和body；
appBar是用于设计导航栏的，我们传入了一个title属性；
body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

2.4. 代码重构

我们可以使用StatelessWidget 和 StatefulWidget 来自定义widget

有状态的Widget: StatefulWidget 在运行过程中有一些状态(data)需要改变
无状态的Widget: StatelessWidget 在运行过程中没有状态(data)的改变

在上面的案例中对代码的重构，我们使用StatelessWidget即可

void main(List<String> args) {
  runApp(MaterialApp(
    home: MSHomePage(),
  ));
}

class MSHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello World"),
      ),
      body: MSHomeBody(),
    );
  }
}

class MSHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "Hello Fultter!",
        style: TextStyle(fontSize: 20, color: Colors.red),
      ),
    );
  }
}

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

build方法的解析：
Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；
我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；
StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；

build方法什么情况下被执行呢
1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；
2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；
3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

3.进阶案例

我们现在想要实现一个同意协议案例

截屏2022-04-10 下午8.54.03.png

void main(List<String> args) {
  runApp(MaterialApp(
    home: MSHomePage(),
  ));
}

class MSHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello World"),
      ),
      body: MSHomeBody(),
    );
  }
}


class MSHomeBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MSHomeBodyState();
  }
}

class _MSHomeBodyState extends State<MSHomeBody> {
  var flag = true;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Checkbox(
              value: flag,
              onChanged: (value) {
                setState(() {
                  flag = value!;
                });
                print(value);
              }),
          Text("同意协议")
        ],
      ),
    );
  }
}

为什么不可以用StatelessWidget？
因为StatelessWidget 是继承Widget

@immutable // A class is immutable if all of the instance fields of the class, whether defined directly or inherited, are final.
abstract class Widget extends DiagnosticableTree

Widget 标记为immutable，是不可变的，类不可变，意味着类一旦创建了，里面所有东西都是不可变的。当然StatefulWidget 也是继承Widget，也是不可变的，但是它和State绑定，所有widget也是在State中绘制的。

状态改变需要在setState中处理
setState源码

  void setState(VoidCallback fn) {
    ...
    final Object? result = fn() as dynamic; // 执行setState传入的函数
    ...
    _element!.markNeedsBuild(); //  重新绘制
  }

状态改变放到setState函数中，setState 会先执行状态改变，再重新绘制

其他知识点

运行一个Flutter项目3种方式:
1.冷启动（从零启动）
2.热重载(最主要执行build方法)
3.热重启（重新运行整个app