Flutter - 状态(State)

Flutter - 状态(State) 首页 / Flutter入门教程 / Flutter - 状态(State)

在本节中,无涯教程将讨论状态管理以及如何在Flutter中处理状态管理。无涯教程知道在Flutter中,一切都是小部件。小部件可以分为两类,一类是无状态小部件,另一类是有状态小部件。无状态窗口小部件没有任何内部状态。这意味着,一旦构建完成,无涯教程将无法对其进行更改或修改,除非它们再次被初始化。另一方面,有状态窗口小部件是动态的并且具有状态。这意味着无涯教程可以在其整个生命周期中轻松修改它,而无需再次对其进行初始化。

什么是状态?

状态(state)是在构建窗口小部件时可以读取的信息,并且可能会在应用程序的整个生命周期内进行更改。如果要更改窗口小部件,则需要更新状态对象,这可以通过使用有状态窗口小部件(Stateful widgets)可用的 setState()函数来完成。 setState()函数允许无涯教程设置触发UI重绘的状态对象的属性。

状态管理(state management)是应用程序生命周期中最流行和必需的过程之一。根据官方文档,Flutter是声明性的。这意味着Flutter通过反映您应用的当前状态来构建其UI。下图更清楚地说明了可以从应用程序状态构建UI的位置。

Flutter State Management

让无涯教程以一个简单的例子来了解状态管理的概念。假设您已经在应用程序中创建了客户(customers)或产品(products)列表。现在,假设您已在该列表中动态添加了新客户或产品。然后,需要刷新列表以查看新添加到记录中的项目。因此,无论何时添加新项目,都需要刷新列表。这种类型的编程需要状态管理来处理这种情况以提高性能。这是因为每次您进行更改或更新时,状态都会刷新。

flutter 中,状态管理分为两个概念类型,如下所示:

  1. 短暂状态(Ephemeral State)
  2. 应用状态(App State)

Ephemeral State

此状态也称为UI状态或本地状态。这是一种与特定窗口小部件相关的状态,或者可以说它是包含在单个窗口小部件中的状态。在这种状态下,您无需使用状态管理技术。此状态的常见示例是“Text Field”。

示例

class MyHomepage extends StatefulWidget {
  @override
  MyHomepageState createState() => MyHomepageState();
}

class MyHomepageState extends State<MyHomepage> {
  String _name = "Peter";

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Text(_name),
        onPressed: () {
           setState(() {
              _name = _name == "Peter" ? "Learnfk" : "Peter";
           });
         },
      );
  }
}。

在上面的示例中, _name 是短暂状态。在这里,只有StatefulWidget的类中的setState()函数可以访问 _name 。构建方法调用setState()函数,该函数对状态变量进行修改。执行此方法时,小部件对象将替换为新的小部件对象,该对象将提供修改后的变量值。

App State

它与短暂状态不同。这是一种状态,无涯教程希望在应用程序的各个部分之间共享,并且希望保持用户会话之间的状态。因此,这种类型的状态可以全局使用。有时也称为应用程序状态或共享状态。

下图更恰当地说明了短暂状态和应用程序状态之间的区别。

Flutter State Management

可以使用提供程序包学习最简单的应用程序状态管理示例。提供者的状态管理很容易理解,并且需要更少的编码。提供者是第三方库。在这里,无涯教程需要了解使用此库的三个主要概念。

  1. ChangeNotifier
  2. ChangeNotifierProvider
  3. Consumer

ChangeNotifier

ChangeNotifier是一个简单的类,它向其侦听器提供更改通知。对于少量的听众来说,它很容易理解,实现和优化。它用于侦听器观察变化的模型。在这种情况下,无涯教程仅使用notifyListener()方法来通知侦听器。

例如,让无涯教程基于ChangeNotifier定义一个模型。在此模型中,使用ChangeNotifier扩展了Counter,该计数器用于在无涯教程调用notifyListeners()时通知其侦听器。这是唯一需要在ChangeNotifier模型中实现的方法。在此示例中,无涯教程声明了两个函数:incrementdecrement,分别用于增大和减小该值。每当模型更改时,无涯教程都可以以可能更改应用程序UI的方式调用notifyListeners()方法。

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _counter;

  Counter(this._counter);

  getCounter() => _counter;
  setCounter(int counter) => _counter = counter;

  void increment() {
    _counter++;
    notifyListeners();
  }

  void decrement() {
    _counter--;
    notifyListeners();
  }
}

ChangeNotifierProvider

ChangeNotifierProvider是向其子部件提供ChangeNotifier实例的窗口小部件。以下代码段有助于理解ChangeNotifierProvider的概念。

在这里,无涯教程定义了一个构建器,该构建器将创建Counter模型的新实例。除非有必要,否则ChangeNotifierProvider不会重建Counter。当不再需要该实例时,它还将自动在Counter模型上调用dispose() 方法。

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: ThemeData(  
        primarySwatch: Colors.indigo,  
      ),  
      home: ChangeNotifierProvider<CounterModel>(  
        builder: (_) => CounterModel(),  
        child: CounterView(),  
      ),  
    );  
  }  
}  

如果需要提供多个类,则可以使用MultiProvider。 MultiProvider是在其范围内使用不同提供程序的列表。如果不使用它,无涯教程将必须嵌套无涯教程的提供者,而其中一个是另一个的子部件。无涯教程可以从下面的代码中了解这一点。

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(builder: (context) => Counter()),
        Provider(builder: (context) => SomeOtherClass()),
      ],
      child: MyApp(),
    ),
  );
}

Consumer

这是一种提供者,不做任何其它的工作。它只是在新的小部件中调用提供程序,并将其构建实现委派给构建器。以下代码对其进行了更清晰的解释

return Consumer<Counter>(
  builder: (context, count, child) {
    return Text("Total price: ${count.total}");
  },
);

在上面的示例中,您可以看到consumer widget仅需要一个构建器函数,只要ChangeNotifier发生更改,就会调用该函数。 builder函数包含三个参数,分别是contextcountchild。第一个参数,context,包含在每个build()方法中。第二个参数是ChangeNotifier的实例,第三个参数是用于优化的子部件。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

推荐系统三十六式 -〔刑无刀〕

Nginx核心知识150讲 -〔陶辉〕

Android开发高手课 -〔张绍文〕

Vim 实用技巧必知必会 -〔吴咏炜〕

物联网开发实战 -〔郭朝斌〕

etcd实战课 -〔唐聪〕

技术领导力实战笔记 2022 -〔TGO 鲲鹏会〕

AI绘画核心技术与实战 -〔南柯〕

好记忆不如烂笔头。留下您的足迹吧 :)