AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Flutter 状态管理概述【Flutter 专题 7】

2022-01-10 180
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flutter 状态管理：概述状态管理是 UI 框架必须实现的关键特性之一并且实现得很好。正是出于这个原因，许多开发人员已经开始构建专用的状态管理库；内置的解决方案对他们来说还不够，或者他们想根据自己的口味进行调整。

Flutter 状态管理：概述

状态管理是 UI 框架必须实现的关键特性之一并且实现得很好。正是出于这个原因，许多开发人员已经开始构建专用的状态管理库；内置的解决方案对他们来说还不够，或者他们想根据自己的口味进行调整。


UI 框架已经加强了他们的游戏以平衡竞争环境。他们的内置状态管理解决方案现在可以与现有外部解决方案的性能相匹配。例如，React 引入了 Hooks 和 Context 来与 React-Redux 竞争。


Flutter 也发生了同样的情况：它提供了许多内置的方法来管理应用程序状态。在本文中，我们将介绍一些基本但功能强大的方法来管理 Flutter 应用程序中的状态。

setState在 Flutter 中使用

如果你来自 React，你会发现 Flutter 中这种管理状态的方法类似于使用useStateHook。


setState 只管理声明它的小部件中的状态——就像在 React 中一样，其中 useState 钩子只在创建它的组件中管理本地状态。这种类型的状态管理被称为 ephemeral 状态。在这里，这种状态是使用 StatefulWidget 和 setState()方法控制的。

使用小部件本身来管理状态

让我们setState通过创建一个简单的计数器应用程序来查看一些有关如何工作的示例。该应用程序将有一个计数器编号，我们可以通过单击按钮来增加和减少。


首先，通过运行以下命令来搭建 Flutter 项目：


flutter create myapp



这将创建一个名为 的 Flutter 项目文件夹myapp。现在让我们在服务器上运行项目：


flutter run myapp



在我们的项目文件夹中，我们应该看到一个main.dart文件。这是主要的 Flutter 应用程序文件。清除文件内容并添加以下代码：


import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text("State Mgmt Demo"),
            ),
            body: CounterPage(title: 'Flutter Demo')),
        );
  }
}



Flutter 中的一切都是一个小部件。MyApp是我们应用程序的入口/根小部件。在body道具中，请注意我们正在渲染一个CounterPage小部件。这是一个扩展StatefulWidget类的有状态小部件。


StatefulWidgets用于管理小部件中的本地状态。它们创建一个关联的State对象，并且它们还持有不可变的变量。


下面是一个例子：


class NotificationCounter extends StatefulWidget {
    final String name;
    NotificationCounter({this.name});
    @override
    _NotificationCounterState createState() => _NotificationCounterState();
}



name上面的变量是一个不可变的变量。StatefulWidget只保存不可变的变量和State对象。


让我们看看我们的CounterPage代码：


class CounterPage extends StatefulWidget {
  CounterPage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  CounterPageState createState() => CounterPageState();
}


该createState方法从中创建一个对象CounterPageState并返回它。该createState方法在构建小部件时被调用。


让我们看看代码CounterPageState：


class CounterPageState extends State<CounterPage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Counter:',
                  style: Theme.of(context).textTheme.headline4,
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
            FlatButton(
              color: Colors.orange,
              child: Text('Increment Counter', style: TextStyle(color: Colors.white)),
              onPressed: _incrementCounter,
            )
          ],
        ),
      )
    );
  }
}



CounterPageState有一个可变变量_counter，它存储计数器的编号并且可以在小部件的生命周期内更改。


build当必须构建小部件时调用该方法。它返回小部件的 UI，并且appBar->title设置将在页面的应用栏中显示的内容。该body设置窗口小部件的身体的 UI。


通常，此小部件将显示文本 Counter:、_counter一行中的变量和下一行中的按钮。该按钮onPressed设置了一个事件，类似于onclickHTML 中的事件。


该_incrementCounter函数setState在按下按钮时调用。此方法调用告诉 Flutter 小部件内部的状态已更改，必须重新绘制小部件。setState增加_counter变量的函数参数。


void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }



因此，每当我们单击 Increment Counter 按钮时，_counter都会增加并setState调用它，这会告诉 Flutter 重建小部件树。的build方法CounterPageState被调用，然后 widget 中的 widget 树被重建并在 UI 上重新渲染（注意，只有发生变化的部分才会被重新渲染）。


如果我们在模拟器中启动我们的应用程序，它应该是这样的：


image.png


按下按钮时，数字会增加：

1.gif



现在让我们添加一个递减按钮。此按钮将减少计数器并将更新反映到屏幕上。我们如何做到这一点？


简单：我们将添加一个新FlatButton的文本Decrement Counter并onPressed在其上设置一个事件。我们将创建一个方法_decrementCounter并将其设置为onPressed事件的处理程序。


此_decrementCounter方法将_counter在调用时减少 1 并调用setState更新 UI：


class CounterPageState extends State<CounterPage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Counter:',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
              FlatButton(
                color: Colors.orange,
                child: Text('Increment Counter',
                    style: TextStyle(color: Colors.white)),
                onPressed: _incrementCounter,
              ),
              FlatButton(
                color: Colors.red,
                child: Text('Decrement Counter',
                    style: TextStyle(color: Colors.white)),
                onPressed: _decrementCounter,
              )
            ],
          ),
        ));
  }
}



我们给 Decrement Button 一个红色背景，将它放在 Increment Button 下方。该_decrementCounter方法设置为其onPressed事件。该_decrementCounter方法在_counter每次调用时递减，并调用setState来触发 UI 更新。


请观看下面的演示：


1.gif


现在我们已经看到了如何使用小部件本身来管理状态，让我们看看另外两个选项：使用父小部件来管理状态，以及使用混合匹配方法。

使用父小部件管理状态

在这种方法中，小部件的父级保存状态变量并管理状态。父级通过将状态变量向下传递给子级小部件来告诉小部件何时更新。用于更改状态的方法也传递给子小部件，小部件可以调用它来更改状态并更新自身。


我们可以重写使用上面这种方法来重写counter例子。我们将有一个无状态小部件，其工作是呈现 UI。创建一个类Counter并按如下方式填充它：


class Counter extends StatelessWidget {
  final counter;
  final decrementCounter;
  final incrementCounter;
  Counter(
      {Key key,
      this.counter: 0,
      @required this.decrementCounter,
      @required this.incrementCounter})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        FlatButton(
          color: Colors.orange,
          child:
              Text('Increment Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            incrementCounter();
          },
        ),
        FlatButton(
          color: Colors.red,
          child:
              Text('Decrement Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            decrementCounter();
          },
        )
      ],
    ));
  }
}



同样，这是一个无状态小部件，因此它没有状态；它只是呈现传递给它的内容。


请注意，我们将渲染计数器的工作移到了这个小部件上。计数器通过 传递给它，递减和递增函数分别通过和传递给它。所有这些都是从父小部件传递的。this.counter``this.decrementCounter``this.incrementCounter``CounterPageState


现在，CounterPageState小部件将如下所示：


class CounterPageState extends State<CounterPage> {
  // ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // ...
        body: Center(
            child: Counter(
                counter: _counter,
                decrementCounter: _decrementCounter,
                incrementCounter: _incrementCounter
            )
        )
    );
  }
}

复制代码


该Counter现在由CounterPageState渲染，它以前呈现的 UI 现在正由新的方式处理Counter部件。


在这里，_counter状态被传递给 prop 中的Counter小部件counter。该Counter控件将通过访问计数器counter在它的身上。


此外，_decrementCounter和_incrementCounter方法被传递给Counter小部件。这些是从所谓的Counter小部件更新状态_counter的CounterPageState小工具，这将导致CounterPageState重建和重新渲染Counter，以显示新更改的状态。

混搭状态管理

在这种方法中，父小部件管理一些状态，而子小部件管理状态的另一方面。为了演示这一点，我们将让我们的Counter小部件保持一个状态，使其成为StatefulWidget.


我们将跟踪 Increment Button 和 Decrement Button 被点击的次数，并在两种状态下保持数字。


现在，让我们使Counter小部件成为有状态的小部件：


class Counter extends StatefulWidget {
  final counter;
  final decrementCounter;
  final incrementCounter;
  Counter(
      {Key key,
      this.counter: 0,
      @required this.decrementCounter,
      @required this.incrementCounter})
      : super(key: key);
  @override
  CounterState createState() => CounterState();
}


我们可以看到该createState方法返回一个CounterState对象。我们来看一下这个CounterState类：


class CounterState extends State<Counter> {
  var incrButtonClicked = 0;
  var decreButtonClicked = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              widget.counter.toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("'Increment Button' clicked $incrButtonClicked times"),
            Text("'Decrement Button' clicked $decreButtonClicked times")
          ],
        ),
        FlatButton(
          color: Colors.orange,
          child:
              Text('Increment Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            widget.incrementCounter();
            setState(() {
              incrButtonClicked++;
            });
          },
        ),
        FlatButton(
          color: Colors.red,
          child:
              Text('Decrement Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            widget.decrementCounter();
            setState(() {
              decreButtonClicked++;
            });
          },
        )
      ],
    ));
  }
}


请注意，Counter小部件先前的 UI 在这里。我们添加了incrButtonClicked和decreButtonClicked状态来保存按钮被按下的次数。我们还添加了一个Column小Text部件，以在以主轴为中心的列中显示小部件。这些Text小部件将显示每个按钮被点击的次数。


现在，在onPressed每个按钮的事件处理程序中，我们通过对象调用incrementCounterordecrementCounter方法widget。我们使用widget对象来访问有状态小部件中的父变量。然后，我们调用了setState增加或减少状态变量incrButtonClicked和 的方法decreButtonClicked。


所以我们在这里可以看到我们有一个混合匹配的状态管理方法：父小部件处理counter状态，而子小部件处理点击状态。


请参阅下面的演示：


1.gif

InheritedModel 和 InheritedWidget

该技术使用父小部件和子小部件之间的通信方法。数据设置在父小部件上，子小部件可以从父小部件访问数据，这样小部件状态就可以无缝传递。


这种状态管理类似于Service在 Angular 中使用 s 类，也与 React 的 Context API 有相似之处。

InheritedWidget

InheritedWidget 是 Flutter 中的一个基类，用于在小部件树中传播信息。


这是它的工作原理：一个InheritedWidget包含一个小部件树。现在，树中的小部件可以引用 up 来InheritedWidget访问其中的公共变量，从而在树中传递数据。由 持有的数据InheritedWidget通过其构造函数传递给它。


InheritedWidget当我们必须通过一长串小部件传递数据只是为了在小部件中使用它时，这是非常有用的。例如，我们有这样的小部件树：


 MyApp
    |
    v
CounterPage
    |
    v
虚拟容器1
    |
    v
虚拟容器2
    |
    v
  Counter



该CounterPage有一个counter与国家incrementCounter和incrementCounter方法。我们想counter在 UI 中显示Counter小部件。为此，我们必须将counter状态和两个方法传递给Counter小部件。


首先，从小CounterPage部件中，我们将呈现DummyContainer小部件，将counter和 两个方法作为参数传递给其构造函数。接下来，DummyContainer1将呈现DummyContainer2并将counter状态和两个方法DummyContainer2作为参数传递给构造函数。最后，DummyContainer2将呈现Counter并将计数器和方法传递给它。


有了InheritedWidget，我们就可以随便驾驶了。使用InheritedWidget，我们将在其中设置counter和两个方法。在InheritedWidget将呈现DummyContainer1和CounterPage将呈现InheritedWidget。CounterPage将counter和 方法设置为InheritedWidget.


  MyApp
    |
    v
CounterPage
    |
    v
我的继承小部件
    |
    v
虚拟容器1
    |
    v
虚拟容器2
    |
    v
  Counter


这就是包含InheritedWidget.


让我们编码吧！我们将从CounterPage：


class CounterPage extends StatefulWidget {
  CounterPage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  CounterPageState createState() => CounterPageState();
  static CounterPageState of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>().data;
  }
}



我们添加了一个static方法of。此方法使用context来返回InheritedWidget使用方法调用。此方法返回精确类型的小部件树中最近的；在这种情况下，我们需要一个类型。dependOnInheritedWidgetOfExactType<MyInheritedWidget>()``Inherited``W``idget``MyInheritedWidget


现在，在我们的 CounterPageState中，我们将渲染MyInheritedWidget，在其中，我们将渲染DummyContainer1小部件。


class CounterPageState extends State&amp;lt;CounterPage&amp;gt; {
    // ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: MyInheritedWidget(
                child: DummyContainer1(),
                data: this
            )
        )
    );
  }
}



的data参数保存this，这意味着的公共属性CounterPageState是可访问MyInheritedWidget经由data支柱。我们这样做是因为我们想要的_counter，而这两种方法_incrementCounter和_decrementCounter，由一个被引用InheritedWidget。有了这个，我们可以使用InheritedWidget来访问counter小部件树中任何位置的状态和方法。


让我们创建的MyInheritedWidget，DummyContainer1和DummyContainer2小部件。


class MyInheritedWidget extends InheritedWidget {
  final CounterPageState data;
  MyInheritedWidget({
    Key key,
    @required Widget child,
    @required this.data,
  }) : super(key: key, child: child);
  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }
}



我们有一个data属性和一个对象CounterPageState。这是我们在CounterPageState. 该updateShouldNotify方法确定是否InheritedWidget将重建其下方的小部件树。如果返回 true，将重建 widget 树；如果返回 false，则状态更改时将不会重新构建小部件树。


class DummyContainer1 extends StatelessWidget {
  const DummyContainer1({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return DummyContainer2();
  }
}


此DummyContainer1小部件呈现DummyContainer2小部件。


class DummyContainer2 extends StatelessWidget {
  const DummyContainer2({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Counter();
  }
}


该DummyContainer2窗口小部件，反过来，呈现Counter小部件。


现在，让我们看看我们的Counter小部件：


class Counter extends StatefulWidget {
  @override
  CounterState createState() =&amp;gt; CounterState();
}


它只实现了以下createState方法：


class CounterState extends State&amp;lt;Counter&amp;gt; {
  var incrButtonClicked = 0;
  var decreButtonClicked = 0;
  var counter;
  CounterPageState data;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    data = CounterPage.of(context);
    counter = data._counter;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: &amp;lt;Widget&amp;gt;[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              counter.toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("'Increment Button' clicked $incrButtonClicked times"),
            Text("'Decrement Button' clicked $decreButtonClicked times")
          ],
        ),
        FlatButton(
          color: Colors.orange,
          child:
              Text('Increment Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            data._incrementCounter();
            setState(() {
              incrButtonClicked++;
            });
          },
        ),
        FlatButton(
          color: Colors.red,
          child:
              Text('Decrement Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            data._decrementCounter();
            setState(() {
              decreButtonClicked++;
            });
          },
        )
      ],
    ));
  }
}


请注意，我们从构造函数中删除了 props 。我们用得到CounterPageState data = CounterPage.of(context);变量。从MyInheritedWidget那里，我们可以访问data. 注意我们是如何访问，_counter


_incrementCounter,_decrementCounter数据变量的属性。


这些是存储在MyInheritedWidgetfrom 中的属性CounterPageState，因此一旦我们引用了MyInheritedWidget，我们就可以从小部件树的任何位置获取这些属性。这就是通过InheritedWidget小部件树中的任何位置传递和访问数据的方式。


这是演示：


1.gif

InheritedModel

InheritedModel工作方式与 相同InheritedWidget：它管理状态并在其小部件树中传播状态。但InheritedModel略有不同，它允许更好地控制更改检测触发器和更新通知，可以设置为在特定数据更改时做出响应。


InheritedModel易于实施。让我们重写上面的Counter示例以使用InheritedModel. 令人惊讶的是，代码几乎相同。


首先，更改MyInheritedWidget为MyInheritedModel：


class MyInheritedModel extends InheritedModel&amp;lt;String&amp;gt; {
  final CounterPageState data;
  MyInheritedModel({
    Key key,
    @required Widget child,
    @required this.data,
  }) : super(key: key, child: child);
  @override
  bool updateShouldNotify(MyInheritedModel old) {
    return true;
  }
  @override
  bool updateShouldNotifyDependent(MyInheritedModel old, Set&amp;lt;String&amp;gt; aspects) {
    return true;
  }
  static MyInheritedModel of(BuildContext context, String aspect) {
    return InheritedModel.inheritFrom&amp;lt;MyInheritedModel&amp;gt;(context,
        aspect: aspect);
  }
}


还是一样; 这里的关键是static方法of。它返回自身的一个实例，因此我们可以使用它来访问其公共属性。是我们想要公开的属性——它是将通过它的小部件树向下传播的状态。请注意，它的值由构造函数中的参数设置。final CounterPageState data;``InheritedModel``this.data


接下来，我们相应地更新我们的CounterState：


class CounterState extends State&amp;lt;Counter&amp;gt; {
  var incrButtonClicked = 0;
  var decreButtonClicked = 0;
  var counter;
  MyInheritedModel inheritedModel;
  @override
  Widget build(BuildContext context) {
    inheritedModel = MyInheritedModel.of(context, "");
    counter = inheritedModel.data._counter;
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: &amp;lt;Widget&amp;gt;[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              counter.toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("'Increment Button' clicked $incrButtonClicked times"),
            Text("'Decrement Button' clicked $decreButtonClicked times")
          ],
        ),
        FlatButton(
          color: Colors.orange,
          child:
              Text('Increment Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            inheritedModel.data._incrementCounter();
            setState(() {
              incrButtonClicked++;
            });
          },
        ),
        FlatButton(
          color: Colors.red,
          child:
              Text('Decrement Counter', style: TextStyle(color: Colors.white)),
          onPressed: () {
            inheritedModel.data._decrementCounter();
            setState(() {
              decreButtonClicked++;
            });
          },
        )
      ],
    ));
  }
}


在这里，我们有MyInheritedModel inheritedModel;，我们称之为inheritedModel = MyInheritedModel.of(context, "");``build()的方法得到的实例。MyInheritedModel


现在，从inheritedModel我们可以访问属性来获取，以及在属性窗口小部件。final CounterPageState data;``counter``_incrementCounter``_decrementCounter``CounterPageState


从计数器状态接收，然后在显示之前转换为字符串。counter = inheritedModel.data._counter;


_incrementCounter，_decrementCounter方法是通过所谓的inheritedModel.data._incrementCounter();和增加inheritedModel.data._decrementCounter();，分别减少按钮点击次数。``


这将是Counter代码：


class Counter extends StatefulWidget {
  @override
  CounterState createState() =&amp;gt; CounterState();
}

复制代码


这里没有什么需要注意的；只需实现该createState方法并返回CounterState小部件的实例。


现在，这是我们的CounterPageState：


class CounterPageState extends State&amp;lt;CounterPage&amp;gt; {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: MyInheritedModel(
                child: DummyContainer1(),
                data: this
            )
        )
    );
  }
}



CounterPageState坐骑MyInheritedModel。的实例CounterPageState通过data参数传递给它的构造函数。这就是我们能够访问CounterPageStatefrom 的公共属性的方式MyInheritedModel。


这是演示：


image.png

结论

我们已经使用 Flutter 的内置机制介绍了状态管理的基础知识。我们首先分析了什么是状态管理，以及它对任何 UI 框架来说是多么重要。接下来，我们查看setState与 React 的useStateHook 的比较。我们通过示例说明了如何setState工作以及如何使用它来构建现实世界的应用程序。


然后我们讨论InheritedWidget并看到了我们如何声明一个状态并将它向下传播到小部件树。树下的小部件可以订阅状态以在状态更改时获取更新。


与 类似InheritedWidget，我们查看了InheritedModel，它沿小部件树向下传播状态。这里的区别在于我们可以选择我们希望在更改时收到通知的状态。

进一步阅读


好的，状态管理的相关基础我也介绍完了，我们继续加油


文章标签：
前端开发
API
存储
关键词：
Flutter状态管理
Flutter管理
Flutter状态
我是坚果
目录
相关文章
东方睿赢
|
1月前
|
存储 JavaScript 前端开发
在Flutter开发中，状态管理至关重要。随着应用复杂度的提升，有效管理状态成为挑战
在Flutter开发中，状态管理至关重要。随着应用复杂度的提升，有效管理状态成为挑战。本文介绍了几种常用的状态管理框架，如Provider和Redux，分析了它们的基本原理、优缺点及适用场景，并提供了选择框架的建议和使用实例，旨在帮助开发者提高开发效率和应用性能。
东方睿赢
37 4
lqj_本人
|
1月前
|
存储 Shell 开发工具
Flutter&鸿蒙next 中使用 MobX 进行状态管理
本文介绍了如何在 Flutter 中使用 MobX 进行状态管理。MobX 是一个基于观察者模式的响应式编程库，通过 `@observable` 和 `@action` 注解管理状态，并使用 `Observer` 小部件自动更新 UI。文章详细讲解了 MobX 的核心概念、如何集成到 Flutter 项目中以及具体的代码示例。适合希望在 Flutter 应用中实现高效状态管理的开发者阅读。
lqj_本人
108 9
lqj_本人
|
1月前
|
存储 开发者
Flutter&鸿蒙next 使用 BLoC 模式进行状态管理详解
本文详细介绍了如何在 Flutter 中使用 BLoC 模式进行状态管理。BLoC 模式通过将业务逻辑与 UI 层分离，利用 Streams 和 Sinks 实现状态管理和 UI 更新，提高代码的可维护性和可测试性。文章涵盖了 BLoC 的基本概念、实现步骤及代码示例，包括定义 Event 和 State 类、创建 Bloc 类、提供 Bloc 实例以及通过 BlocBuilder 更新 UI。通过一个简单的计数器应用示例，展示了 BLoC 模式的具体应用和代码实现。
lqj_本人
96 1
lqj_本人
|
1月前
|
开发工具 开发者
Flutter&鸿蒙next 状态管理高级使用：深入探讨 Provider
本文深入探讨了 Flutter 中 Provider 的高级用法，涵盖多 Provider 组合、Selector 优化性能、ChangeNotifierProxyProvider 管理依赖关系以及自定义 Provider。通过这些技巧，开发者可以构建高效、可维护的响应式应用。
lqj_本人
87 2
游客zi3qmblbcdexu
|
2月前
|
开发工具 开发者
Flutter&鸿蒙next 状态管理高级使用：深入探讨 Provider
Flutter&鸿蒙next 状态管理高级使用：深入探讨 Provider
游客zi3qmblbcdexu
26 2
lqj_本人
|
1月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架，用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI，每个 UI 元素都是 Widget，包括文本、按钮、图片等。Widget 不仅描述外观，还描述行为，是不可变的。常见的 Widget 包括结构型（Container、Column、Row）、呈现型（Text、Image）、交互型（ElevatedButton）和状态管理型（StatefulWidget）。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
lqj_本人
82 0
lqj_本人
|
1月前
|
缓存 JavaScript API
Flutter&鸿蒙next 状态管理框架对比分析
在 Flutter 开发中，状态管理至关重要，直接影响应用的性能和可维护性。本文对比分析了常见的状态管理框架，包括 setState()、InheritedWidget、Provider、Riverpod、Bloc 和 GetX，详细介绍了它们的优缺点及适用场景，并提供了 Provider 的示例代码。选择合适的状态管理框架需考虑应用复杂度、团队熟悉程度和性能要求。
lqj_本人
124 0
你都不懂
|
2月前
【Flutter】状态管理：Provider状态管理
【Flutter】状态管理：Provider状态管理
你都不懂
26 0
明弟有理想
|
2月前
|
UED
flutter:动画&状态管理 (十三)
本文档介绍了Flutter中`animatedList`的使用方法和状态管理的示例。`animatedList`用于创建带有动画效果的列表，示例代码展示了如何添加、删除列表项，并执行相应的动画效果。状态管理部分通过一个简单的点击切换颜色的示例，演示了如何在Flutter中管理组件的状态。
明弟有理想
42 0
朝阳39
|
5月前
|
容器
flutter 布局管理【详解】
flutter 布局管理【详解】
朝阳39
47 3