Flutter 实现局部刷新

当widget需要进行刷新时，我们可以通过调用widget的setState方法来实现，setState随后会调用State的build方法来进行重建

  //请求刷新
  setState((){
    
  });


  #State<T extends StatefulWidget>
  @override
  Widget build(BuildContext context) {
    //构建新的Widget
    return new Text(_text);
  }

那么，如果我们能将 build方法中的 return new Text(_text) 暴漏出去，我们就可以实现通用的局部刷新 Widget。

实现方案

接口回调，将return new Text(_text);暴露出去：

用typedef function实现

 //定义函数别名
 typedef BuildWidget = Widget Function();

将函数别名 BuildWidget 作为参数，传递到State.build方法即可

完整代码


import 'package:flutter/material.dart';

//封装 通用局部刷新工具类
//定义函数别名
typedef BuildWidget = Widget Function();

class PartRefreshWidget extends StatefulWidget {

  PartRefreshWidget(Key key, this._child): super(key: key);
  BuildWidget _child;

  @override
  State<StatefulWidget> createState() {
    return PartRefreshWidgetState(_child);
  }

}

class PartRefreshWidgetState extends State<PartRefreshWidget> {

  BuildWidget child;

  PartRefreshWidgetState(this.child);

  @override
  Widget build(BuildContext context) {
    return child.call();
  }

  void update() {
    print('update');
    setState(() {

    });
  }
  
}

使用：

import 'package:flutter/material.dart';

import 'PartRefreshWidget.dart';

class GlobalKeyDemo extends StatefulWidget {
  @override
  _GlobalKeyDemoState createState() => _GlobalKeyDemoState();
}

class _GlobalKeyDemoState extends State<GlobalKeyDemo> {
  int _count = 0;

  //使用1 创建GlobalKey
  GlobalKey<PartRefreshWidgetState> globalKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    print('----------------build');

    return Scaffold(
        appBar: AppBar(
          title: Text("inheritedWidget"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //使用2 创建通用局部刷新widget
              PartRefreshWidget(globalKey, () {
                ///创建需要局部刷新的widget
                return Text(
                  '变化的：$_count',
                  style: TextStyle(color: Colors.green),
                );
              }),
              Text('不变的: $_count'),
              RaisedButton(
                onPressed: () {
                  //点击
                  _count++;
                  //使用3调用刷新方法
                  globalKey.currentState.update();
                },
              ),
            ],
          ),
        )
    );
  }
}

效果如下图所示：

Flutter 实现局部刷新

实现方案

猜你喜欢