【问题标题】:What's a state in flutter?Flutter 中的状态是什么?
【发布时间】:2021-10-23 23:26:30
【问题描述】:

我刚开始学习 Flutter,作为初学者,我在理解状态方面遇到了一些问题。我在 YouTube 上观看了一些视频,在线阅读文章。他们解释了为什么应该使用 Stateful Widget 而不是 Stateless 的原因。但我无法真正理解应用程序的哪些部分需要成为 Stateful Widget,以及 setState 方法的用途是什么。另外,小部件的状态和应用程序的状态有什么区别?

【问题讨论】:

标签: flutter state


【解决方案1】:

Flutter 是声明式的。这意味着 Flutter 构建其用户界面以反映应用的当前状态:

状态可以描述为“在任何时候重建 UI 所需的任何数据”。

当您的应用状态发生变化时(例如,用户在设置屏幕中按下开关),您会更改状态,这会触发用户界面的重绘。 UI 本身没有必要的更改(如 widget.setText)——您更改状态,UI 从头开始​​重建。

您自己管理的状态可以分为两种概念类型:短暂(您的问题上的小部件状态)状态和应用状态。

临时状态

临时状态(有时称为 UI 状态或本地状态)是您可以巧妙地包含在单个小部件中的状态。

不需要对这种状态使用状态管理技术(ScopedModel、Redux、Provider、bloc 等)。你所需要的只是一个 StatefulWidget。 你只需要使用 setState 来改变你当前的状态。

例如,在下面,您会看到底部导航栏中当前选定的项目是如何保存在 _MyHomepageState 类的 _index 字段中的。 在本例中,_index 是临时状态。

    class MyHomepage extends StatefulWidget {
    const MyHomepage({Key? key}) : super(key: key);

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

    class _MyHomepageState extends State<MyHomepage> {
    int _index = 0;

    @override
    Widget build(BuildContext context) {
        return BottomNavigationBar(
        currentIndex: _index,
        onTap: (newIndex) {
            setState(() {
            _index = newIndex;
            });
        },
        // ... items ...
        );
    }
    }

在这里,使用 setState() 和 StatefulWidget 的 State 类中的字段是完全自然的。应用程序的任何其他部分都不需要访问 _index。 该变量仅在 MyHomepage 小部件内更改。而且,如果用户关闭并重新启动应用程序,您不会介意 _index 重置为零。

应用状态

您希望在应用的许多部分之间共享以及您希望在用户会话之间保持的非临时状态,就是我们所说的应用状态(有时也称为共享状态)。

应用状态示例:

  • 用户偏好
  • 登录信息
  • 社交网络应用中的通知
  • 电子商务应用中的购物车
  • 新闻应用中文章的已读/未读状态

为了管理应用状态,您需要研究您的选择。您的选择取决于您的应用的复杂性和性质、您的团队以前的经验以及许多其他方面。

这是一个使用提供程序(许多状态管理库之一)的应用范围状态管理示例的链接,Example

这是用于应用范围状态管理的库列表,Options

总之,任何 Flutter 应用程序中都有两种概念上的状态类型。临时状态可以使用 State 和 setState() 来实现,并且通常是单个小部件的本地状态。剩下的就是你的应用状态。 这两种类型在任何 Flutter 应用程序中都有自己的位置,两者之间的区别取决于您自己的偏好和应用程序的复杂性。

【讨论】:

    【解决方案2】:

    Stateless widget 中,build 函数只被调用一次,这使得屏幕的 UI。这意味着通过该小部件,您无法再次更改 UI。它将立即渲染(构建)UI。因此,对于那些小部件,您需要在构建小部件之前发送信息。

    Stateful Widgets:一旦构建后状态可以更改的小部件称为有状态小部件。这仅仅意味着应用程序的状态可以随着不同的变量、输入和数据集而多次更改。下面是有状态小部件的基本结构。这意味着您可以在 setState method 的帮助下更改此小部件的 UI,而无需再次构建它。

    欲了解更多信息,请参阅 - https://medium.com/flutter-community/flutter-stateful-vs-stateless-db325309deae

    【讨论】:

      猜你喜欢
      • 2021-07-16
      • 2018-05-10
      • 2019-06-20
      • 2022-12-19
      • 1970-01-01
      • 2011-05-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多