Flutter之局部刷新(2021)
2021-01-07 本文已影响0人
yytester
Flutter 框架内部提供了一个非常小巧精致的组件，专门用于局部组件的刷新，它就是 ValueListenableBuilder。
ValueListenableBuilder需要的元素:
- 类型为 ValueWidgetBuilder<T> 的 builder, 监听对象的界面展现. 本质是一个方法，
Widget Function(BuildContext context, T value, Widget child) - ValueListenable<T> 对象 , 监听对象, 这里用它的实现类:
ValueNotifier
使用
ValueListenableBuilder<int>(
builder: _builderWithValue,
valueListenable: new_counter,
),
完整代码
class _MyHomePageState extends State<MyHomePage> {
// ValueNotifier是ValueListenableBuilder 需要传入的ValueListenable<T> 抽象类的实现 . 接收一个泛型.
final ValueNotifier<int> new_counter = ValueNotifier<int>(0);
void _incrementCounter() {
new_counter.value += 1;
}
// 每当监听的对象值发生变化时，会触发builder 方法进行刷新。
// 如下, 在点击时只需要改变 new_counter.value 的值，就会触发 _buildWithValue 从而将界面数字刷新。
Widget _builderWithValue(BuildContext context , int value , Widget child){
return Text('$value',
style: Theme.of(context).textTheme.headline4,);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
ValueListenableBuilder<int>(
builder: _builderWithValue,
valueListenable: new_counter,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
