Flutter嵌套深？動不動就要拆分？現(xiàn)在有了這一招

背景

嵌套層級深的問題讓眾多剛接觸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),
        ],
      ),
    );
  }
}

但，F(xiàn)lutter嵌套層級的問題不僅體現(xiàn)在代碼的視覺觀感上，還體現(xiàn)在編碼過程中的體驗

影響編碼體驗

如果想要給某個widget加一個父容器，需要三步走：

  • 剪切當前widget的及其子widget的所有代碼到粘貼板中
  • 在剪切處編寫新增的父容器代碼
  • 在父容器下添加child，并將剛才剪切的代碼粘貼賦值給child

舉個例子：想要給下面這段代碼中的第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??
        ],
      ),
    );
  }

當時，我是這樣寫的：

  • 先把Text('say hello')剪切
  • 在剪切處編寫Container并設置margin屬性
  • 在Container節(jié)點下添加child，粘貼剛才剪切的內(nèi)容作為child的值
添加marginTop

實際編碼過程中，這種情況頻繁出現(xiàn)，特別是代碼行數(shù)比較多的時候，這是非常糟糕的體驗。

此時，我內(nèi)心希望可以這樣寫：

如果能這樣添加marginTop就好了

顯然，flutter不支持這么寫，幸運的是：dart2.7發(fā)布時正式宣布支持擴展函數(shù)（Extension Methods）

實際上從dart 2.6.0就開始支持擴展函數(shù)了
如果pubspec.yaml中設置的dart版本低于2.6.0則會出現(xiàn)警告提示

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

警告提示：
Extension methods weren’t supported until version 2.6.0

用擴展函數(shù)提升編碼體驗

先來定義一個擴展函數(shù)

extension WidgetExt on Widget {

  Container intoContainer({
    //復制Container構(gòu)造函數(shù)的所有參數(shù)（除了child字段）
    Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
  }) {
    //調(diào)用Container的構(gòu)造函數(shù)，并將當前widget對象作為child參數(shù)
    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,
    );
  }
}

現(xiàn)在，所有widget對象都多了一個intoContainer(...)擴展函數(shù)，而且參數(shù)與Container構(gòu)造方法一致，于是，我們就可以這樣寫了：

用intoContainer擴展函數(shù)添加marginTop

除了Container，其它容器也可以通過同樣的方式來擴展。于是，編程體驗大大提升，再也不用動不動就大段選擇代碼剪切粘貼了。

還可以支持鏈式調(diào)用:

Text("billy")
    .intoExpanded(flex: 1)
    .intoContainer(color: Colors.white)

有些widget有多個子widget (children)， 可以添加如下的擴展函數(shù)：

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等...
}

到現(xiàn)在，不知大家有沒有發(fā)現(xiàn)，這個擴展函數(shù)不僅僅是能在局部優(yōu)化我們的編碼體驗那么簡單了，還能解決代碼嵌套層級過深的問題。

使用擴展函數(shù)解決嵌套過深的問題

回到本文最初的嵌套地獄，現(xiàn)在我們的代碼可以寫成這樣

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

為了讓我們的代碼更加符合鏈式編程風格，再定義一個靜態(tài)方法吧

class WidgetChain {
  static Widget addNeighbor(Widget widget) {
    return widget;
  }
}

另外，再定義一個從數(shù)據(jù)到widget的映射擴展方法

extension ListExt<T> on List<T> {

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

}

現(xiàn)在，代碼是這樣的：

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()
    );
  }
}

值得指出的是，擴展函數(shù)(無嵌套)跟構(gòu)造方法(有嵌套)是可以混用的。上面的代碼也可以寫成這樣：

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

這樣的擴展函數(shù)你想不想要試試呢？大量常用的Widget的into擴展函數(shù)我已經(jīng)替大家封裝好了，可以直接食用：

dependencies:
  widget_chain: ^0.1.0

導入：

import 'package:widget_chain/widget_chain.dart';

然后就可以起飛了！

Github源碼地址： widget_chain 敬請star收藏

總結(jié)

本文介紹了Flutter中的嵌套地獄，以及由于嵌套導致編碼體驗不佳的問題，并從解決編碼體驗出發(fā)，使用擴展函數(shù)解決了flutter的嵌套地獄。

由于大篇幅的擴展函數(shù)調(diào)用會影響代碼閱讀體驗，還是需要保留部分關(guān)鍵嵌套層級結(jié)構(gòu)以使得布局的層級結(jié)構(gòu)保持清晰，文中的擴展函數(shù)支持與構(gòu)造函數(shù)混用，具體使用到什么程度，就看大家自己的選擇了

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容