1 . 根组件注册Provider
安装Provider库:pubspec.yaml
文件
dependencies:
flutter:
sdk: flutter
...
provider: ^4.1.3
注册Provider: main.dart
文件:
void main() {
runApp(
//注册Provider
MultiProvider(
providers: [
ChangeNotifierProvider<TabBarData>(create: (_) => TabBarData())
],
child: MyApp()
)
);
}
2. Provider 获取数据封装
//Provider 数据封装
import 'dart:convert';
import 'package:app_ftr/common/MyBase.dart';
import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';
//定义TabBarData获取数据事件 混入ChangeNotifier通知更新数据
class TabBarData with ChangeNotifier {
List _tabBarList = [];
//获取数据
List get tabBarList => _tabBarList;
getTabBar() async{
Response response = await httpClient.post('请求数据接口');
List res = json.decode(snapshot.data.toString());
_tabBarList = res;
notifyListeners(); //通知更新数据
}
}
使用:
A页面请求数据
@override
Widget build(BuildContext context) {
//广告页时获取导航栏数据,跳转后数据就直接页面显示 (优化)
Provider.of<TabBarData>(context).getTabBar();
}
B页面监听数据变化并渲染页面
@override
Widget build(BuildContext context) {
//通知更新数据后这里就接受到最新数据
List _tabBarList = Provider.of<TabBarData>(context).tabBarList;
//下面就是渲染页面啦
return Scaffold(
body: Row(
children: _tabBarList.map((item) {
return Text(text: item['tag_name']);
}).toList())
)
)
}