Flutter基础摘要

Widget

定义：

在 Flutter 中要用 Widget 构件 UI。Flutter 的 Widget 渲染采用的是类似 React 的框架：当 Widget 状态发生变化，需要更新界面时，框架会先计算从上一个状态转换到下一个状态所需的最小更改，然后再去刷新界面。

分类：statefulWidget 和 statelessWidget

原理：因为渲染是很耗性能的，为了提高 Flutter 的帧率，就要尽量减少不必要的 UI 渲染

statefulWidget：StatefulWidget 是 UI 可以变化的 Widget，创建完后 UI 还可以在更改。

statelessWidget：StatelessWidget 是 UI 不可以变化的 Widget，创建完后 UI 就不可以在更改。

statefulWidget及state

1、statefulWidget：

class MyApp extends StatefulWidget {
  String content;
  
  MyApp(this.content);
  
  @override;
  State<StatefulWidget> createState() {
    return MyAppState()
  }
}

2、StatefulWidget 实现步骤：

0. 首先继承 StatefulWidget
1. 实现 createState() 的方法，返回一个 State

StatefulWidget 的主要功能就是创建 State。

3、state：

class MyAppState extends State<MyApp> {
​
  void increment(){
    setState(() {
      widget.content += "d";
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return ...
  }
}

5、State 的实现步骤：

0. 首先继承 State，State 的泛型类型是上面定义的 Widget 的类型
1. 实现 build() 的方法，返回一个 Widget
2. 需要更改数据，刷新 UI 的话，调用 setState()

定义state

State<T extends StatefulWidget>

6、state的功能

0. build() —— 创建 Widget
1. setState() —— 刷新 UI

7、setState（）在state中的作用

调用 setState() 方法，在 setState() 里更改数据的值，然后 setState() 会触发 State 的 build() 方法，引起强制重建 Widget，重建 Widget 的时候会重新绑定数据， 而这时数据已经发生变化，从而达到刷新 UI 的目的

setState的三个成员变量：widget、context、mounted

0. widget 是 State 的成员变量，它的类型是 Widget，widget 可以访问 StatefulWidget 中的成员变量。
1. context 也是 State 的成员变量,它的类型是 BuildContext，BuildContext 是 Flutter 里的重要概念。
2. mounted 是 bool 类型，表示当前 State 是否加载到树里。State 对象创建之后，initState() 创建之前，framework 通过与 BuildContext 相关联，来将 State 对象加载到树中，此时 mounted 会变为 true，当 State dispose 之后,mounted 就变为 false。

mounted 属性很有用，因为 setState() 只有在 mounted 为 true 的时候才能用，当 moundted 为 false 时调用会抛异常。

StatelessWidget

StatelessWidget是没有state（状态）的Widget，当 Widget 在运行时不需要改变时，就用 StatelessWidget。

代码实现：

1. 首先继承StatelessWidget
2. 必须实现build函数，并且返回

class MyApp extends StatelessWidget {
 
 @override
 Widget build(BuildContext context) {
   return ...
   );
 }
}

要点：StatelessWidget：immutable（状态不可变）

StatelessWidget 是没有 State（状态）的，而且 StatelessWidget 只能在加载/构建 Widget 时才绘制一次，这意味着无法基于任何事件或用户操作重绘 StatelessWidget，所以 StatelessWidget 是 immutable 的。

假设在 APP 运行过程中，将 Text的文本改为 Hello Flutter World，那么 Text 的内容不会更改，APP 的 UI 也不会改变。

Statelesswidget的生命周期

StatelessWidget 的生命周期就只有一个，即 build 函数

MaterialApp 与 Scaffold

MaterialApp

MaterialApp 表示当前应用的风格是 Material Design。为了使用其他已经封装好的 Material Design 风格的 Widget，就必须使用 MaterialApp。因此 MaterialApp 经常是 Flutter Widget 树里的第一个元素，就是 Root Widget。

Scaffold

Scaffold 实现了 Material Design 的基本布局结构，例如 AppBar、Drawer、SnackBar 等，所以为了使用这些布局，也必须要使用 Scaffold，所以一个 Flutter App 的 基本结构就是：Root Widget 是 MaterialApp ，然后 MaterialApp 的 子Widget 就是 Scaffold，然后我们在 Scaffolfd 的 子Widget 里写UI。

\