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.
);
}
}