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協做加載大圖