美文网首页Flutter
8、Flutter状态管理provider用法

8、Flutter状态管理provider用法

作者: LogMan | 来源:发表于2019-10-11 13:41 被阅读0次

    之前学习Flutter,跟网上大神教程写了一个购物的APP,里面提供的状态管理工具是provide,几个月过后,Flutter官方发布provider代替provide,成为最新的状态管理工具,例外,新的provider支持Flutter_web的开发,亲测好用。

    用法:

    1、在项目的 pubspec.yml 添加 provider

    dependencies:
      provider: ^3.1.0
    

    2、构建混合ChangeNotifier的类,操作全局数据,使用notifyListeners方法来通知 UI 更新:
    如:底部导航切换,定义当前切换卡索引--currentIndex,更改currentIndex的值,通知主页刷新底部导航UI,切换当前页面。

    import 'package:flutter/foundation.dart';
    
    class CurrentIndexProvide with ChangeNotifier{
      int currentIndex = 0;
      changeIndex(int newIndex){
        currentIndex = newIndex;
        notifyListeners();
      }
    }
    

    要使用这个ChangeNotifier状态管理类,需要用 provider 提供的 ChangeNotifierProvider 方法将数据注册到整个应用。如果有多个这样的ChangeNotifier状态管理类,就需要使用MultiProvider,用法介绍:

    import 'package:flutter/material.dart';
    import 'pages/index_page.dart';
    import 'package:provider/provider.dart';
    ......
    import 'provide/currentIndex.dart';
    
    void main(){
      List<SingleChildCloneableWidget> provides = [];
      provides..add(ChangeNotifierProvider.value(value:ChildCategory()))
        ..add(ChangeNotifierProvider.value(value:CategoryGoodsListProvider()))
        ..add(ChangeNotifierProvider.value(value:DetailInfoProvide()))
        ..add(ChangeNotifierProvider.value(value:CartProvide()))
        ..add(ChangeNotifierProvider.value(value:CurrentIndexProvide()));//本文中重点介绍
      runApp(MultiProvider(providers: provides,child:MyApp()));
    }
    
    class MyApp extends StatelessWidget{
      ......
    }
    

    3、ChangeNotifierProvider 方法将数据注册到整个应用

    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    
    import 'pages/index_page.dart';
    import 'provide/currentIndex.dart';
    class MyApp extends StatelessWidget{
    
      @override
      Widget build(BuildContext context) {
        final router = Router();
        Routers.configureRouters(router);
        Application.router = router;
        return Container(
          child: MaterialApp(
            title: '商城',
            onGenerateRoute: Application.router.generator,
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primarySwatch: Colors.pink,
            ),
            home: ChangeNotifierProvider(
            builder: (context) =>CurrentIndexProvide(),
            child: IndexPage(),
          ),
        );
      }
    }
    

    然后IndexPage中,使用CurrentIndexProvide中的currentIndex。
    4、使用 provider 的数据首先要导入 provider 以及对应的currentIndex CurrentIndexProvide,然后用 Consumer 加类型 CurrentIndexProvide 来使用这个currentIndex

    import 'package:flutter/material.dart';
    import 'package:flutter/cupertino.dart';
    import 'home_page.dart';
    import 'category_page.dart';
    import 'cart_page.dart';
    import 'member_page.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    import 'package:provider/provider.dart';
    import '../provide/currentIndex.dart';
    
    class IndexPage extends StatelessWidget {
      final List<BottomNavigationBarItem> bottomTabs=[
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.home),
          title: Text('首页'),
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.search),
          title: Text('分类'),
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.shopping_cart),
          title: Text('购物车'),
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.profile_circled),
          title: Text('会员中心'),
        ),
      ];
    
      final List<Widget> tabBodies = [
        HomePage(),
        CategoryPage(),
        CartPage(),
        MemberPage()
      ];
      @override
      Widget build(BuildContext context) {
        ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
        return Consumer<CurrentIndexProvide>(
          builder: (context, currentIndexProvide, child){
            int currentIndex = currentIndexProvide.currentIndex;
            return Scaffold(
                backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
                bottomNavigationBar: BottomNavigationBar(
                  type: BottomNavigationBarType.fixed,
                  currentIndex: currentIndex,
                  items: bottomTabs,
                  onTap: (index){ //切换导航卡
                    currentIndexProvide.changeIndex(index);
                  },
                ),
                body: IndexedStack(
                  index: currentIndex,
                  children: tabBodies,
                )
            );
          },
        );
      }
    }
    

    最后,当切换导航卡,通过调用CurrentIndexProvide中的changeIndex(index)方法,changeIndex(int newIndex){
    currentIndex = newIndex; //修改状态管理中的currentIndex
    notifyListeners(); // 刷新UI
    }
    notifyListeners() : 通知代码中使用到此provider的控件Consumer进行刷新

    相关文章

      网友评论

        本文标题:8、Flutter状态管理provider用法

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