flutter插件 - provider（状态管理）

简介

官方文档

当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以用 Flutter 中的状态管理来管理统一的状态（数据），实现不同组件直接的传值和数据共享

使用

• 修改pubspec.yaml文件，添加依赖provider

# ...
dev_dependencies:
  # ...
  provider: ^4.3.2+2
# ...

• 在lib/目录下新建provider/目录

• 在lib/provider/目录下新建Counter.dart文件

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  // 状态
  int _count = 1;
  // 获取状态
  int get count => _count;

  // 更新状态
  incCount() {
    this._count++;
    // 表示更新状态
    notifyListeners();
  }
}

• 修改lib/main.dart文件

// ...
// 引入provider
import 'package:provider/provider.dart';
import 'provider/Counter.dart';
// ...
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter())
      ],
      child: MaterialApp(
        // ...
      ),
    );
  }
}

• 在组件或者widget中使用

// ...
import 'package:provider/provider.dart';
import '../../provider/Counter.dart';
// ...
class _CartPageState extends State<CartPage> {
  // ...
  @override
  Widget build(BuildContext context) {
    var counterProvider = Provider.of<Counter>(context);
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterProvider.incCount();
        },
        child: Icon(Icons.add),
      ),
      body: Text('统计数量：${counterProvider.count}'),
    );
  }
}