Dart | 在 Flutter 中使用 ValueNotifiers 和 InheritedWidgets 进行简单的状态管理

原创

已于 2022-06-13 22:01:07 修改 · 958 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ios

于 2022-06-13 21:54:13 首次发布

1 概述

Flutter 这几年得到迅速的发展，自支持桌面系统开发以来，已不再是纯粹的移动开发框架。然而，当我们使用 Flutter 构建应用时，有大量的状态管理库或包可供选择，这势必会成为初学者的噩梦。

本文就从简单讲起，着重介绍 ValueNotifiers 和 InheritedWidgets 是如何进行状态管理的。

2 从一个例子开始

我们将实现一个水果列表的收藏夹，效果如下：
在这里插入图片描述

2.1 创建 Flutter 项目

默认情况下 main.dart 代码如下：

import 'package:flutter/material.dart';


void main() {
   
   
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyWidget()
    );
  }
}

class MyWidget extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: Text('Wish List'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

ValueNotifier 是 ChangeNotifier 的子类，它管理单个值的状态，并在值更改时通知侦听器。它与 ValueListableBuilder 小部件一起工作，自动监听 ValueListenableBuilder 上的更改。下面是 ValueNotifier 的简单应用。

class MyWidget extends StatelessWidget {
   
   

  // 创建监听器
  final ValueNotifier<int> counter = ValueNotifier<int>(0);
  
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: Text('Wish List'),
      ),
      body: Center(
        // 必须配合 ValueListenableBuilder 使用
        child: ValueListenableBuilder