flutter 之Provider 非常简单。

几种常见情况，

点击一个按钮,改变另外一个控件的值
思路: 首先给要改变值得控件绑定一个监听,${context.watch<Counter>().count}，如果点击按钮改变了数据,监听文字自动发生改变。
点击一个按钮,获取另外一个控件的值
思路:首先这个控件上显示的数据肯定不是死数据, 否则也没有获取的意义了,如果你说默认是死数据但是有可能会发生改变, 那么发生改变的时候应该用一个变量来控制。也就是先用${context.watch<Counter>().count}监听, 死数据也通过改变数据的方式来改变控件文字。这样获取的时候就用${context.read<Counter>().count}即可。
初始化数据后, 通过数据改变更改控件数据
思路:和第二种情况类似, 通过model来驱动视图。

看下 ChangeNotifierProvider 用法，一个单一的观察者模式

class Counter with ChangeNotifier {
  int _count = 0; 
  int get count => _count; 
  void increment() {
    _count++;
    notifyListeners();
  } 
}
 
runApp(
    /// Providers are above [MyApp] instead of inside it, so that tests
    /// can use [MyApp] while mocking the providers
//    MultiProvider(
//      providers: [
//        ChangeNotifierProvider(create: (_) => Counter()),
//      ],
//      child: MyApp(),
//    ),
    ChangeNotifierProvider(  //页面只需要一个provider情况
      create: (_) => Counter(),
      child: MyApp(),
    ),
  );

需要监听修改的Text
${context.watch<Counter>().count}

读取最新值
${context.read<Counter>().count}
 
点击触发count
context.read<Counter>().increment(),

看下 StreamProvider 用法,和RxJava一样可以多次触发并回调

StreamController<String> _streamController = StreamController<String>();

@override
  Widget build(BuildContext context) {
    return StreamProvider<String>(
        initialData: "ni hao ",
        create: (BuildContext context) {
          return _streamController.stream;
        },
        child: MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Provider Demo')),
            body: CounterLabel(),
          ),
        ));
  }

//监听的写法
Consumer<String>(builder: (BuildContext context, String obj, Widget child) {
            return Text('Observer1=$obj');
          }),

//触发通知
onPressed: () {
  _streamController.sink.add("测试1"); //第一次通知
  testThread() async{
    await Future.delayed(Duration(milliseconds: 3000));
    _streamController.sink.add("测试2");//第二次通知
  };
  testThread();
},

//注意要释放
_streamController.close()

看下 FutureProvider 用法，用于一次性请求比较好, 例如用户界面, 一个界面就几个地方需要变一下.


Future<UserPageData> _requestUserData() async {
  await Future<UserPageData>.delayed(Duration(milliseconds: 2000));
  UserPageData response = UserPageData();
  response.userName = "张三";
  response.userLevel = "企业用户";
  response.userAvatar = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1437473548,3272300633&fm=26&gp=0.jpg";
  print('测试');
  return response;
}

@override
  Widget build(BuildContext context) {
    return FutureProvider(
      create: (BuildContext context) {
        return _requestUserData();
      },
      initialData: UserPageData(),
      child: TestWidget(),  //这个地方不能直接用widget,应该用StatelessWidget来写
    ); 
  }

如果TestWidget 里面是这样写的，用Future+ Consumer则是单控件刷新. 如果是UserPageData currentUserData = Provider.of<UserPageData>(context, listen: true);则是整个布局刷新

Positioned(
                          height: 60.h,
                          width: 60.h,
                          child: Consumer<UserPageData>( // 如果是用 Consumer 来实现,则单个组件刷新。
                            builder: (BuildContext context, UserPageData value, Widget child) {
                              print('');
                              return CircleAvatar(
                                backgroundImage: NetworkImage("${value.userAvatar}"),
                                backgroundColor: Colors.transparent,
                              );
                            },
                          ),
                          left: 20,
                        ),

看一下ValueListenableProvider, 它的数据改变一般针对单一的数据.不需要调动notify

ValueNotifier<String> valueNotifier = ValueNotifier<String>("testValue");

 @override
  Widget build(BuildContext context) {
    return ValueListenableProvider<String>(
        create: (BuildContext context) {
          return valueNotifier;
        },
        child: MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Provider Demo')),
            body: CounterLabel(),
          ),
        ));
  }

//用到的地方直接写
${valueNotifer.value}

//通知改变
valueNotifer.value = "xxx";

最后编辑于：2020.07.23 15:31:17