Flutter&Bedrock框架——页面的局部刷新介绍

介绍

Bedrock开发框架功能介绍

Bedrock开发框架

常见的Widget刷新

通常在flutter中刷新widget，最经常使用的是经过方法

setState()
复制代码

举个栗子，有页面以下

伪-代码以下：

build(){
    debugPrint('page build');
	return Column(children: [
    	//上方按钮
        btnAbove(),
        // 两个色块
        row(children:[红色、蓝色])
        //下方按钮
        btnBelow(),
        //色块 widget
        DoubleColorWidget(),
    ]);
}

//
class DoubleColorWidget{
   build(){
     debugPrint('DoubleColorWidget build');
     return row(children:[红色、蓝色]);
   }
}

复制代码

当我点击上方的按钮以交换毗邻的两个方块的颜色时，经过log能够发现，页面和DoubleColorWidget 都执行了一遍build()方法。

每点一次都会执行，且DoubleColorWidget（并不须要刷新）也触发了 build
复制代码

页面简单的话，也许能够忽略，若是页面比较复杂，那么大量的无心义build()将会带来性能的损耗。

通常状况下，咱们能够经过各类状态控制工具，如：

Bloc,redux,fish-redux,Provider等等
复制代码

也能够为子widget写一个控制器，并对外暴露。

还能够用flutter自带的inheritWidget或各类Builder，如最简单的statefulWidgetBuilder，对须要刷新的widget进行包裹，并单独rebuild。

与此同时就会额外增长很多代码，尤为是页面中须要独立刷新的widget很是多时（实际开发中，这基本难以免）。

这里我向你们介绍一下Bedrock框架下的刷新方法。

基于Bedrock的widget刷新

首先Bedrock对于上方提到的刷新依然支持，同时借助框架的设计：

另类设计，提高页面开发效率，简化跳转以及传值

在减小代码的同时，支持直接调用widget的方法，进而完成任意粒度的局部刷新（等各类操做），如下是更改后的页面代码：

class PartRefreshPage extends PageState{

  bool exp1 = false;
  ///下方色块
  final PartWidget partWidget = PartWidget();
  @override
  Widget build(BuildContext context) {
    debugPrint('page build');
    return switchStatusBar2Dark(child: Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
        ///上方按钮
          RaisedButton(onPressed: (){
            exp1 = !exp1;
            setState(() {

            });
          },
          child: Text('change color By setState()'),),
          ///上方色块
          Container(
            height: getWidthPx(100),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: getWidthPx(80),
                  color: exp1 ? Colors.red:Colors.blue,
                ),
                Container(
                  width: getWidthPx(80),
                  color: exp1 ? Colors.blue:Colors.red,
                ),
              ],
            ),
          ),
          getSizeBox(height: getWidthPx(100)),
          ///-----------下方代码区域-----------
          ///下方按钮
          RaisedButton(onPressed: (){
            partWidget.switchColor();
          },
            child: Text('change color By part refresh'),),
            ///下方色块
          partWidget.generateWidget(),
        ],
      ),
    ));
  }

}

class PartWidget extends WidgetState{

  bool exp1 = false;
  ///此为Demo 故,书写随意
  void switchColor(){
    if(!mounted)return;
    exp1 = !exp1;
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    debugPrint('DoubleColorWidget build');
    return  Container(
      height: getWidthPx(100),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: getWidthPx(80),
            color: exp1 ? Colors.red:Colors.blue,
          ),
          Container(
            width: getWidthPx(80),
            color: exp1 ? Colors.blue:Colors.red,
          ),
        ],
      ),
    );
  }

}
复制代码

咱们能够看到，在‘下方’代码区域中，下方按钮若是想交换其下方两个色块的颜色，只须要直接调用它的switchColor（），同时不会触发无关widget和页面的build方法。

另外，由于state对外暴露，咱们在处理widget上，变得更为灵活方便。

谢谢你们的阅读，若有错误，还请指出，谢谢。

Bedrock

Bedrock开发框架

系列文章

Flutter——仿网易云音乐App(基础版)

实现网易云音乐的滑动冲突处理效果

Flutter自定义View——仿高德三级联动Drawer

Flutter 自定义View——仿同花顺自选股列表

Flutter入门练习——Evenet&Method Channel协做加载大图