Flutter Widget

Flutter Widget

1. 6 大类常用 widget

2. StatelessWidget与StatefulWidget开发指南

2.1 StatelessWidget

Flutter中的StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。

当用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时，无状态widget非常有用。

 void main() => runApp(const MyStatelessWidget(text: "StatelessWidget Example"));

class MyStatelessWidget extends StatelessWidget {
  final String text;
  const MyStatelessWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        text,
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

无状态widget的build方法通常只会在以下三种情况调用:

• 将widget插入树中时

• 当widget的父级更改其配置时

• 当它依赖的 InheritedWidget 发生变化时

在Flutter中，InheritedWidget是一种特殊的Widget，它主要用于传递共享数据给树状结构下的后代Widget。当一个InheritedWidget的值发生改变时，Flutter会自动检测并重新构建所有依赖于该InheritedWidget的子Widget

2.2 StatefulWidget

StatefulWidget 是可变状态的widget。 使用setState方法管理 StatefulWidget 的状态的改变。调用setState告诉Flutter框架，某个状态发生了变化，Flutter 会重新运行 build 方法，以便应用程序可以应用最新状态。

# 创建一个 StatefulWidget
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  MyStatefulWidgetState createState() => MyStatefulWidgetState();
}

class MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true, //使用Material3样式
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Text("开关状态：${isOpen ? '开启' : '关闭'}"),
            Switch(
                value: isOpen,
                onChanged: (change) {
                  setState(() {
                    isOpen = change;
                  });
                })
          ],
        ),
      ),
    );
  }
}

3. 最佳实践

在Flutter中，widget是有状态的还是无状态的 - 取决于是否 他们依赖于状态的变化

• 如果用户交互或数据改变导致widget改变，那么它就是有状态的。

• 如果一个widget是最终的或不可变的，那么它就是无状态。

在Flutter中，管理状态有三种主要方式：

• 每个widget管理自己的状态

• 父widget管理widget的状态

• 混合搭配管理的方法

如何决定使用哪种方式时，可以参考以下原则：

• 如果所讨论的状态是用户数据，例如复选框的已选中或未选中状态，或滑块的位置，则状态最好由父widget管理；

• 如果widget的状态取决于动作，例如动画，那么最好是由widget自身来管理状态；

• 如有还是不确定谁管理状态，请让父widget管理子widget的状态；