Flutter巢狀深？擴充套件函式了解一下

齊翊發表於2019-12-30
Flutter巢狀套件函式

背景

巢狀層級深的問題讓眾多剛接觸Flutter的同學感到困擾，它不僅是看起來讓人感到不適，還非常影響編碼體驗。

大佬們會告訴你應該拆分自己的巢狀程式碼(自定義widget或者抽取build方法）來減少巢狀層級。這確實是個行之有效的方法，除此之外，還有沒有別的方法呢，本文將向您介紹另一種減少巢狀層級的方法。

巢狀過深影響程式碼的視覺觀感

這段程式碼演示了什麼叫做：巢狀地獄

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: <Widget>[
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.phone),
                    Text("amy"),
                  ],
                ),
              ),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.phone),
                    Text("billy"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
複製程式碼

提取build方法後，巢狀層級得到了明顯的改善

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: <Widget>[
              buildItem("amy"),
              buildItem("billy"),
            ],
          ),
        ),
      ),
    );
  }

  Container buildItem(String name) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.phone),
          Text(name),
        ],
      ),
    );
  }
}
複製程式碼

還能不能繼續優化呢？

自定義擴充套件函式

舉個例子：想要給下面這段程式碼中的第2個Textwidget加上marginTop:10屬性

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          Text('billy'),
          Text('say hello'), //add margin top??
        ],
      ),
    );
  }
複製程式碼

此時，我內心希望可以這樣寫：

新增marginTop1

顯然，flutter不支援這麼寫，幸運的是：dart2.7釋出時正式宣佈支援擴充套件函式（Extension Methods）

實際上從dart 2.6.0就開始支援擴充套件函式了
如果pubspec.yaml中設定的dart版本低於2.6.0則會出現警告提示

如：
environment:
  sdk: ">=2.1.0 <3.0.0"

警告提示：
Extension methods weren’t supported until version 2.6.0
複製程式碼

先來定義一個擴充套件函式

extension WidgetExt on Widget {

  Container intoContainer({
  	//複製Container建構函式的所有引數（除了child欄位）
    Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
  }) {
  	//呼叫Container的建構函式，並將當前widget物件作為child引數
    return Container(
      key: key,
      alignment: alignment,
      padding: padding,
      color: color,
      decoration: decoration,
      foregroundDecoration: foregroundDecoration,
      width: width,
      height: height,
      constraints: constraints,
      margin: margin,
      transform: transform,
      child: this,
    );
  }
}
複製程式碼

現在，所有widget物件都多了一個intoContainer(...)擴充套件函式，而且引數與Container構造方法一致，於是，我們就可以這樣寫了：

新增marginTop1

除了Container，其它容器也可以通過同樣的方式來擴充套件。於是，程式設計體驗大大提升，再也不用動不動就大段選擇程式碼剪下貼上了。

還可以支援鏈式呼叫:

Text("billy")
	.intoExpanded(flex: 1)
	.intoContainer(color: Colors.white)
複製程式碼

有些widget有多個子widget (children)， 可以新增如下的擴充套件函式：

extension WidgetExt on Widget {
  //新增一個相鄰的widget，返回List<Widget>
  List<Widget> addNeighbor(Widget widget) {
    return <Widget>[this, widget];
  }

  //新增各種單child的widget容器
  //如:Container、Padding等...
}

extension WidgetListExt<T extends Widget> on List<T> {
  //子List<Widget>列表中再新增一個相鄰的widget，並返回當前列表
  List<Widget> addNeighbor(Widget widget) {
    return this..add(widget);
  }

  Row intoRow({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
  }) {
    return Row(
      key: key,
      mainAxisAlignment: mainAxisAlignment,
      mainAxisSize: mainAxisSize,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      textBaseline: textBaseline,
      children: this,
    );
  }
  //新增其它多child的widget容器
  //如:Column、ListView等...
}
複製程式碼

使用擴充套件函式解決巢狀過深的問題

回到本文最初的巢狀地獄，現在我們的程式碼可以寫成這樣

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo'),),
        body: buildItem("amy")
              .addNeighbor(buildItem("billy"),)
              .intoListView()
              .intoOffstage(offstage: false)
              .intoContainer()
    );
  }

  Container buildItem(String name) {
    return Icon(Icons.phone)
        .addNeighbor(Text(name))
        .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
        .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),);
  }
}
複製程式碼

為了讓我們的程式碼更加符合鏈式程式設計風格，再定義一個靜態方法吧

class WidgetChain {
  static Widget addNeighbor(Widget widget) {
    return widget;
  }
}
複製程式碼

另外，再定義一個從資料到widget的對映擴充套件方法

extension ListExt<T> on List<T> {

  List<Widget> buildAllAsWidget(Widget Function(T) builder) {
    return this.map<Widget>((item) {
      return builder(item);
    }).toList();
  }

}
複製程式碼

現在，程式碼是這樣的：

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo'),),
        body: ["amy", "billy"]
            .buildAllAsWidget((name) =>
              WidgetChain
              .addNeighbor(Icon(Icons.phone))
              .addNeighbor(Text(name))
              .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
              .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),)
            )
            .intoListView()
            .intoOffstage(offstage: false)
            .intoContainer()
    );
  }
}
複製程式碼

值得指出的是，擴充套件函式(無巢狀)跟建構函式(有巢狀)是可以混用的。上面的程式碼也可以寫成這樣（Container和Offstage這2層改成了建構函式）：

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ["amy", "billy"]
            .buildAllAsWidget((name) =>
              WidgetChain
              .addNeighbor(Icon(Icons.phone))
              .addNeighbor(Text(name))
              .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
              .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),)
            )
            .intoListView()
        ),
      ),
    );
  }
}
複製程式碼

這樣的擴充套件函式你想不想試試呢？我已經替大家封裝好了常用Widget對應的into擴充套件函式，可以直接食用：

dependencies:
  widget_chain: ^0.1.0
複製程式碼

匯入：

import 'package:widget_chain/widget_chain.dart';
複製程式碼

然後就可以起飛了！

Github原始碼地址： widget_chain 敬請star收藏

總結

本文介紹了Flutter中的巢狀地獄，並使用擴充套件函式的方式來解決flutter的巢狀地獄問題。

由於大篇幅的擴充套件函式呼叫會影響程式碼閱讀體驗，還是需要保留部分關鍵巢狀層級結構以使得佈局的層級結構保持清晰，文中的擴充套件函式支援與建構函式混用，具體使用到什麼程度，就看大家自己的選擇了

2019-12-30編輯後補充說明

本文初次釋出時包含了使用擴充套件函式提升編碼體驗的相關內容。因為我之前編寫flutter程式碼時新增父容器的方式為：

  • 先剪下要新增父容器的widget程式碼
  • 在剪下處編寫父容器及其屬性
  • 在父容器節點下新增child，貼上剛才剪下的內容作為child的值

新增marginTop

後來在微信群（Gityuan Flutter技術交流群）裡大佬@舒大飛告知我：IDE中其實提供了新增父容器的快捷鍵（游標定位在Widget上，然後Alt + Enter，選擇需要新增的父容器即可），非常方便。

之前我確實不知道，特別感謝大佬:@舒大飛

於是，重新編輯了本文，重點介紹如何使用擴充套件函式以不一樣的編碼風格來解決flutter巢狀層級過深的問題。希望大家喜歡！

相關文章