使用Consumer可以达到和Selector
类似的效果,代码如下,运行结果后可以发现仅仅只有Consumer
包裹的内容进行了重新构建:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class User with ChangeNotifier {
int _age = 1;
String _name = 'name';
int get age => _age;
String get name => _name;
void increment() {
_age++;
notifyListeners();
}
void changeName(newName) {
_name = newName;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Container(
child: Home(),
),
),
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('YM-------build');
return Container(
child: ChangeNotifierProvider<User>(
create: (_) => User(),
//可以使用child进行渲染UI,用法可以查看第一篇文章https://blog.csdn.net/Mr_Tony/article/details/111414413
builder: (context, child) {
print('YM-------build00000');
return Column(
//注意此例代码中没有使用builder参数
children: [
Consumer<User>(
builder: (_, user, child) {
print('YM-------build111111');
//最后一个参数取决于父组件的child值,该值可以决定外部不用修改
return Text('数值:${user.age}');
},
),
RaisedButton(
onPressed: () {
context.read<User>().increment();
},
child: Text('计数'),
)
],
);
},
),
);
}
}