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, 需要源码可以私信~~


最好的笔记软件

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