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获取数据事件
class TabBarData with ChangeNotifier, MyBase {
  List _tabBarList = [];
  //获取数据
  List get tabBarList => _tabBarList;

  getTabBar() async {
    Response response = await httpClient.post('请求数据接口');
    List res = jsonDecode(response.data)['data'];
    _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())
     )  
   )
}

你可能感兴趣的:(Flutter,flutter,provider,dart)