Flutter之局部刷新(2021)

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

原文參考

Flutter 寫的app, 需要源碼可以私信~~


最好的筆記軟件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章