Flutter Provider使用

Provider之状态管理

下载地址: https://pub-web.flutter-io.cn/packages/provider

导入依赖：

dependencies:
  provider: ^6.0.5

导入头文件：

import 'package:provider/provider.dart';

使用方式

创建 Model 混入 ChangeNotifier。 Counter 中的私有属性 _count 变化时，添加监听 notifyListeners()

class Counter with ChangeNotifier {
    
    
  int _count = 0;
  int get count => _count;

  void increment() {
    
    
    _count++;
    print(_count);

    /// 监听数据变化
    notifyListeners();
  }
}

设置组件监听使用 MultiProvider ，其中 providers 属性设置需要绑定的数据，即上面的 Counter 类，这里绑定的数据可以是多个。

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: Container(
        child: MultiProvider(
          /// 设置监听器
          providers: [
            ChangeNotifierProvider(create: (context) => Counter()),
            //ChangeNotifierProvider(create: (context) => Student()),
          ],
          child: Column(
            children: [
                /// 自己添加组件 ...
            ],
          ),
        ),
      ),
    );
  }

也可以设置监听一个 model ，使用 ListenableProvider.value() ：

        child: ListenableProvider.value(
          value: Counter(),
          child: Column(
            children: [
               /// 自己添加组件 ...
            ],
          ),
        ),

或者使用 ListenableProvider<Counter> ：

        child: ListenableProvider<Counter>(
          create: (_) => Counter(),
          child: Column(
            children: [
                /// 自己添加组件 ...
            ],
          ),
        ),

在子组件中监听发送，点击按钮修改数据：

      TextButton(
          /// Provider 执行修改数据
          onPressed: () => context.read<Counter>().increment(),
          child: Text("send provider"),
       ),

在子组件中监听改变数据，其他组件修改了该 Counter 中数据，这个Text组件的值会实时更改：

/// 数据赋值
Text("${
      
      context.watch<Counter>().count}"),

或者

/// 数据赋值
Counter counter = Provider.of<Counter>(context);
Text("${
      
      counter.count}"),

Provider使用起来很简单，数据的动态绑定和其他跨平台语言（Vue）类似。

使用方式

猜你喜欢