Flutter状态是什么?

h4cxqtbf  于 2023-02-09  发布在  Flutter
关注(0)|答案(3)|浏览(188)

我刚开始学习Flutter,作为一个初学者,我面临着一些关于理解状态的问题。我在YouTube上看了一些视频,我在网上看过一些文章。他们解释了为什么应该使用有状态的小部件而不是无状态的。但是我真的不明白应用程序的哪一部分需要是有状态的小部件,setState方法的用途是什么。还有什么“小部件的状态和应用程序的状态有什么区别?

s8vozzvw

s8vozzvw1#

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

状态可以描述为"为了在任何时刻重建UI所需的任何数据"。
当应用的状态发生变化时(例如,用户在设置界面中拨动开关),你就改变了状态,并触发了用户界面的重绘。用户界面本身并没有强制性的变化(如widget. setText)--你改变了状态,用户界面就从头开始重建。
您自己管理的状态可以分为两种概念类型:短暂(问题上的小部件状态)状态和应用程序状态。

    • 短暂的状态**

短暂状态(有时称为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重置为零。

    • 应用程序状态**

您希望在应用的多个部分之间共享并且希望在用户会话之间保留的非短暂状态,即我们所称的应用状态(有时也称为共享状态)。
应用程序状态示例:

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

对于管理应用状态,您需要研究您的选项。您的选择取决于应用的复杂性和性质、团队以前的经验以及许多其他方面。
这里有一个链接,指向使用provider(许多状态管理库之一)Example进行应用范围内状态管理的示例。
下面是用于应用范围状态管理的库列表Options
总之,在任何Flutter应用程序中,状态都有两种概念类型。短暂状态可以使用State和setState()实现,并且通常是单个小部件的本地状态。其余的是应用程序状态。这两种类型在任何Flutter应用程序中都有自己的位置,两者之间的划分取决于您自己的偏好和应用程序的复杂性。

qnyhuwrf

qnyhuwrf2#

Stateless widget中,build函数只被调用一次,这会生成屏幕的UI。这意味着通过该widget您不能再次更改UI。它会立即渲染(构建)UI。因此对于这些widget,您需要在构建widget之前发送信息。
Stateful Widgets:构建后状态可以改变的小部件称为有状态小部件。这意味着应用程序的状态可以通过不同的变量、输入和数据集多次改变。下面是有状态小部件的基本结构。这意味着您可以在setState method的帮助下更改此小部件的UI,而无需重新构建它。
有关详细信息,请参阅-https://medium.com/flutter-community/flutter-stateful-vs-stateless-db325309deae

gt0wga4j

gt0wga4j3#

如果我们希望在UI中进行更改,以便使用statefulWidget,否则使用statelessWidget。在大多数情况下,我们将使用statefulWidget。

相关问题