背景
巢狀層級深的問題讓眾多剛接觸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?? ], ), ); }此時，我內心希望可以這樣寫：
顯然，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的巢狀地獄問題。
由於大篇幅的擴充套件函式呼叫會影響程式碼閱讀體驗，還是需要保留部分關鍵巢狀層級結構以使得佈局的層級結構保持清晰，文中的擴充套件函式支援與建構函式混用，具體使用到什麼程度，就看大家自己的選擇了
最新評論