Flutter 学习（七）StatelessWidget

什么是 StatelessWidget

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

StatelessWidget 的实现

下面一段代码是一段 StatelessWidget 的 demo 代码，将下面代码复制到 main.dart 里并运行：

import 'package:flutter/material.dart';
void main() => runApp(MyApp("Hello World"));
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final String content;
  MyApp(this.content);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Text(content),
        ),
      )
    );
  }
}

MyApp 就是一个 StatelessWidget，它继承自 StatelessWidget，Text 也是 StatelessWidget,因为 Text 也是继承自 StatelessWidget。

运行的效果为：

要实现自定的 StatelessWidget，必须要继承 StatelessWidget。

看下面实现的代码：

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

1. 首先继承 StatelessWidget。
   
2. 必须要实现 build 函数，返回一个 Widget。

StatelessWidget：immutable（状态不可变）

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

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

StatelessWidget 的生命周期

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

• build （build 函数）

在代码中加入如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final String content;
  MyApp(this.content);
  @override
  Widget build(BuildContext context) {
    print("build"); //StatelessWidget -- build
    ....
  }
}

运行后可以看到如下的 log：

Launching lib/main.dart on iPhone XR in debug mode...
Xcode build done.                                            3.9s
flutter: build

StatelessWidget 使用注意事项

如果你想要为 StatelessWidget 赋值，只能在 StatelessWidget 初始化的时候，通过构造函数传递一些额外的参数。但是请记住，这些参数不会在以后阶段发生变化，即使发生变化，也只能按原值使用。因为 StatelessWidget 只会渲染一次。

参考

【1】Flutter 实战
【2】Flutter 中文文档
【3】Flutter 完全手册