美文网首页
Flutter Provider

Flutter Provider

作者: _悟_空 | 来源:发表于2021-09-23 15:36 被阅读0次

    一、引入

    provider: 6.0.0
    

    二、创建

    import 'package:flutter/cupertino.dart';
    
    class MyProvider with ChangeNotifier {
      int _count = 0;
    
      void add() {
        _count++;
        notifyListeners();
      }
    
      get count => _count;
    
      void reduce() {
        _count--;
        notifyListeners();
      }
    }
    
    import 'package:provider/provider.dart';
    void main() {
      runApp(ChangeNotifierProvider(
        create: (context) => MyProvider(),
        child: MyApp(),
      ));
    }
    

    三、读取

    // 方式1
    Provider.of<MyProvider>(context).count}
    // 方式2
    context.watch<MyProvider>().count
    //方式3
    context.read<MyProvider>().count
    实际上都是调用的Provider.of方法;
    

    四、改变

    // 方式一、 如果遇到需要传值使用方式一。
    ElevatedButton(
        onPressed: () {
              _reduceCount();
            },
        child: Text("减少")),
    
    void _reduceCount() {
      // 改变
      context.read<MyProvider>().reduce();
    }
    // 方式二、
    ElevatedButton(
        onPressed: Provider.of<MyProvider>(context).add,
        child: Text("增加")),
    

    五、MultiProvider

    void main() {
      runApp(MultiProvider(
        providers: [
          ChangeNotifierProvider<MyProvider>(create: (_) => MyProvider()),
          ChangeNotifierProvider<MoreProvider>(create: (_) => MoreProvider()),
        ],
        child: MyApp(),
      ));
    }
    

    六、注意事项

      一、在数据放生改变之后一定要调用**notifyListeners();**
    
    二、不要在initState方法中监听,因为initState只调用一次。
      @override
      void initState() {
        super.initState();
        // Provider.of<MyProvider>(context).count;  不能这么使用
        print(Provider.of<MyProvider>(context, listen: false).count); // 只初始化打印一次
      }
    
    三、在你使用的页面中一定要在某处监听,否则页面更新不及时
      // 最好在 didChangeDependencies中加入监听,因为didChangeDependencies可以调用多次;
      @override
      void didChangeDependencies() {
        super.didChangeDependencies();
        Provider.of<MyProvider>(context);
      }
    

    相关文章

      网友评论

          本文标题:Flutter Provider

          本文链接:https://www.haomeiwen.com/subject/zocogltx.html