flutter 之Provider 非常简单。
2020-07-23 本文已影响0人
代瑶
几种常见情况,
-
点击一个按钮,改变另外一个控件的值
思路: 首先给要改变值得控件绑定一个监听,${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";