目 录CONTENT

文章目录

Flutter Widget

Sakura
2024-03-20 / 0 评论 / 1 点赞 / 63 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于126天前,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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的状态;

1

评论区