flutter Provider组件间获取数据正确用法 (数据订阅发布)

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())
     )  
   )
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值