之前学习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进行刷新
网友评论