美文网首页
flutter 之Provider 非常简单。

flutter 之Provider 非常简单。

作者: 代瑶 | 来源:发表于2020-07-23 11:08 被阅读0次

    几种常见情况,

    1. 点击一个按钮,改变另外一个控件的值
      思路: 首先给要改变值得控件绑定一个监听,${context.watch<Counter>().count},如果点击按钮改变了数据,监听文字自动发生改变。

    2. 点击一个按钮,获取另外一个控件的值
      思路:首先这个控件上显示的数据肯定不是死数据, 否则也没有获取的意义了,如果你说默认是死数据但是有可能会发生改变, 那么发生改变的时候应该用一个变量来控制。也就是先用${context.watch<Counter>().count}监听, 死数据也通过改变数据的方式来改变控件文字。这样获取的时候就用${context.read<Counter>().count}即可。

    3. 初始化数据后, 通过数据改变更改控件数据
      思路:和第二种情况类似, 通过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";
    

    相关文章

      网友评论

          本文标题:flutter 之Provider 非常简单。

          本文链接:https://www.haomeiwen.com/subject/aupclktx.html