背景
嵌套層級深的問題讓眾多剛接觸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),
],
),
);
}
}
但，Flutter嵌套層級的問題不僅體現在代碼的視覺觀感上，還體現在編碼過程中的體驗
影響編碼體驗
如果想要給某個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節點下添加child，粘貼剛才剪切的內容作為child的值
添加marginTop
實際編碼過程中，這種情況頻繁出現，特別是代碼行數比較多的時候，這是非常糟糕的體驗。
此時，我內心希望可以這樣寫：
如果能這樣添加marginTop就好了
顯然，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構造方法一致，于是，我們就可以這樣寫了：
用intoContainer擴展函數添加marginTop
除了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()
);
}
}
值得指出的是，擴展函數(無嵌套)跟構造方法(有嵌套)是可以混用的。上面的代碼也可以寫成這樣：
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的嵌套地獄。
由于大篇幅的擴展函數調用會影響代碼閱讀體驗，還是需要保留部分關鍵嵌套層級結構以使得布局的層級結構保持清晰，文中的擴展函數支持與構造函數混用，具體使用到什么程度，就看大家自己的選擇了
