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個

Text

widget加上

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??
        ],
      ),
    );
  }

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

顯然，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

構造方法一緻，于是，我們就可以這樣寫了：

除了

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的嵌套地獄問題。

由于大篇幅的擴充函數調用會影響代碼閱讀體驗，還是需要保留部分關鍵嵌套層級結構以使得布局的層級結構保持清晰，文中的擴充函數支援與構造函數混用，具體使用到什麼程度，就看大家自己的選擇了

Flutter嵌套深？擴充函數了解一下

背景

嵌套過深影響代碼的視覺觀感

自定義擴充函數

使用擴充函數解決嵌套過深的問題

總結

繼續閱讀

[轉]Top 20 Programming Lessons I've Learned in 20 Years

Python程式可列印今天的年，月和日

Linux系統指令行整理

Windows指令行使用Git下的Curl指令

科研項目管理平台

WIN10下指令行禁用編輯模式

Eclipse搭建Web Service服務

web service 的簡單實作

Web Service 應用執行個體

Web Service開發實戰

更改LYNC SIP位址

終端環境之tmux

lvm建立、擴容

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

Future和async(異步函數)、await(同步等待)

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins