探究flutter中的Builder和StatefulBuilder

????flutter開發(fā)的官方推薦是響應式編程,響應式編程簡單理解是數據流變化自動驅動view層刷新的一種開發(fā)方式;這樣的開發(fā)讓業(yè)務和view層徹底解耦,是很棒的一種開發(fā)思想,所以flutter的開發(fā)就成了widget的組裝及其屬性的數據綁定。但是我們很多時候不僅僅是進行數據綁定,view層也不能狹隘的理解為widget的組裝與屬性賦值,view層結合view相關的一些業(yè)務邏輯的處理才能讓架構更為合理,比如view點擊事件的設定、新的路由的打開、新的對話框的打開、動畫相關的操作等,此時我們不僅需要在widget中進行一些業(yè)務邏輯的處理,我們還需要得到這個widget對于的BuildContext。下面的代碼應該非常常見了吧:

      body: Center(
        child: Builder(
          builder: (context) {
            return Text("Builder").gesture(onTap: () {
              showDialog(context: context, child: Text("dialog"));
            });
          },
        ),
      ),

????如果你想在點擊了某個組件之后對界面進行刷新,那么通常你需要定義一個StatefulWidget在需要刷新的地方調用setState,但是StatefulBuilder看起來也是一個不錯的選擇:

這里沒有使用定義StatefulWidget的方式,因為這個邏輯很簡單,定義StatefulWidget是麻煩而且沒有必要的
      body: Center(
        child: StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            return Text("clickTimes$clickTimes").gesture(onTap: () {
              setState(() {
                clickTimes++;
              });
            });
          },
        ),
      ),

????以上Builder類和StatefulBuilder都是官方提供的類,以便開發(fā)者使用,但我們不能滿足于簡簡單單的使用,我們還要知道他的本質。
????那先來看看Builder吧:


class Builder extends StatelessWidget {
  const Builder({
    Key key,
    @required this.builder,
  }) : assert(builder != null),
       super(key: key);
  final WidgetBuilder builder;

  @override
  Widget build(BuildContext context) => builder(context);
}

????Builder 的源碼非常簡單,其實就是一個StatelessWidget ,只不過是其build方法,通過傳入的builder方法由使用者實現。再看看傳入的builder的簽名:

///  * [IndexedWidgetBuilder], which is similar but also takes an index.
///  * [TransitionBuilder], which is similar but also takes a child.
///  * [ValueWidgetBuilder], which is similar but takes a value and a child.
typedef WidgetBuilder = Widget Function(BuildContext context);

????也很簡單,就是一個參數為BuilderContext返回值為Widget的Fuction而已。
????下面看看StatefulBuilder

class StatefulBuilder extends StatefulWidget {
  const StatefulBuilder({
    Key key,
    @required this.builder,
  }) : assert(builder != null),
       super(key: key);
  final StatefulWidgetBuilder builder;

  @override
  _StatefulBuilderState createState() => _StatefulBuilderState();
}

class _StatefulBuilderState extends State<StatefulBuilder> {
  @override
  Widget build(BuildContext context) => widget.builder(context, setState);
}

????StatefulBuilder 的源碼也非常簡單,其實就是一個StatefulWidget ,與Builder的不同之處在于其傳入的builder的函數簽名包含兩個參數,多了一個setState,setState是一個函數引用,調用這個函數可以導致這個StatefulWidget 的bulide方法被調用,StatefulBuilder 就是通過傳入的builder方法將setState傳遞給使用者,在外部刷新這個widget。再看看StatefulBuilder 的builder的簽名:

/// Signature for the builder callback used by [StatefulBuilder].
///
/// Call [setState] to schedule the [StatefulBuilder] to rebuild.
typedef StatefulWidgetBuilder = Widget Function(BuildContext context, StateSetter setState);

???? 非常簡單,就是參數為BuilderContext和StateSetter 返回值為Widget的Fuction而已。
???? 以上就是關于Builder和StatefulBuilder的探究過程。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容