Flutter 实现局部刷新

Posted 2022-03-18 一叶飘舟

当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。

实现方案

1. 接口回调，将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();
                ,
              ),
            ],
          ),
        )
    );
  

效果如下图所示：