背景
嵌套層級深的問題讓眾多剛接觸Flutter的同學(xué)感到困擾，它不僅是看起來讓人感到不適卿拴，還非常影響編碼體驗(yàn)衫仑。
老手們會(huì)告訴你應(yīng)該拆分自己的嵌套代碼(自定義widget或者抽取build方法）來減少嵌套層級。這確實(shí)是個(gè)行之有效的方法堕花，但這只是解決了最終代碼的視覺觀感問題文狱，編碼體驗(yàn)還是不太理想。
嵌套過深影響代碼的視覺觀感
這段代碼演示了什么叫做：嵌套地獄
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)在編碼過程中的體驗(yàn)
影響編碼體驗(yàn)
如果想要給某個(gè)widget加一個(gè)父容器灭美，需要三步走：
- 剪切當(dāng)前widget的及其子widget的所有代碼到粘貼板中
- 在剪切處編寫新增的父容器代碼
- 在父容器下添加child贵扰，并將剛才剪切的代碼粘貼賦值給child
舉個(gè)例子：想要給下面這段代碼中的第2個(gè)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??
],
),
);
}
當(dāng)時(shí)，我是這樣寫的：
- 先把
Text('say hello')剪切 - 在剪切處編寫Container并設(shè)置margin屬性
- 在Container節(jié)點(diǎn)下添加child抄谐，粘貼剛才剪切的內(nèi)容作為child的值
實(shí)際編碼過程中摹蘑，這種情況頻繁出現(xiàn)筹燕，特別是代碼行數(shù)比較多的時(shí)候，這是非常糟糕的體驗(yàn)衅鹿。
此時(shí)撒踪，我內(nèi)心希望可以這樣寫：
顯然，flutter不支持這么寫大渤，幸運(yùn)的是：dart2.7發(fā)布時(shí)正式宣布支持?jǐn)U展函數(shù)（Extension Methods）
實(shí)際上從dart 2.6.0就開始支持?jǐn)U展函數(shù)了
如果pubspec.yaml中設(shè)置的dart版本低于2.6.0則會(huì)出現(xiàn)警告提示
如：
environment:
sdk: ">=2.1.0 <3.0.0"
警告提示：
Extension methods weren’t supported until version 2.6.0
用擴(kuò)展函數(shù)提升編碼體驗(yàn)
先來定義一個(gè)擴(kuò)展函數(shù)
extension WidgetExt on Widget {
Container intoContainer({
//復(fù)制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ù)制妄，并將當(dāng)前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對象都多了一個(gè)intoContainer(...)擴(kuò)展函數(shù)兼犯，而且參數(shù)與Container構(gòu)造方法一致忍捡，于是集漾，我們就可以這樣寫了：
除了Container切黔，其它容器也可以通過同樣的方式來擴(kuò)展。于是具篇，編程體驗(yàn)大大提升纬霞，再也不用動(dòng)不動(dòng)就大段選擇代碼剪切粘貼了。
還可以支持鏈?zhǔn)秸{(diào)用:
Text("billy")
.intoExpanded(flex: 1)
.intoContainer(color: Colors.white)
有些widget有多個(gè)子widget (children)驱显， 可以添加如下的擴(kuò)展函數(shù)：
extension WidgetExt on Widget {
//添加一個(gè)相鄰的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>列表中再添加一個(gè)相鄰的widget埃疫，并返回當(dāng)前列表
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)栓霜，這個(gè)擴(kuò)展函數(shù)不僅僅是能在局部優(yōu)化我們的編碼體驗(yàn)?zāi)敲春唵瘟舜滂耄€能解決代碼嵌套層級過深的問題。
使用擴(kuò)展函數(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),);
}
}
為了讓我們的代碼更加符合鏈?zhǔn)骄幊田L(fēng)格销凑，再定義一個(gè)靜態(tài)方法吧
class WidgetChain {
static Widget addNeighbor(Widget widget) {
return widget;
}
}
另外，再定義一個(gè)從數(shù)據(jù)到widget的映射擴(kuò)展方法
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()
);
}
}
值得指出的是斗幼，擴(kuò)展函數(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()
),
),
);
}
}
這樣的擴(kuò)展函數(shù)你想不想要試試呢抚垄？大量常用的Widget的into擴(kuò)展函數(shù)我已經(jīng)替大家封裝好了蜕窿，可以直接食用：
dependencies:
widget_chain: ^0.1.0
導(dǎo)入：
import 'package:widget_chain/widget_chain.dart';
然后就可以起飛了谋逻！
Github源碼地址： widget_chain 敬請star收藏
總結(jié)
本文介紹了Flutter中的嵌套地獄，以及由于嵌套導(dǎo)致編碼體驗(yàn)不佳的問題桐经，并從解決編碼體驗(yàn)出發(fā)斤贰，使用擴(kuò)展函數(shù)解決了flutter的嵌套地獄。
由于大篇幅的擴(kuò)展函數(shù)調(diào)用會(huì)影響代碼閱讀體驗(yàn)次询，還是需要保留部分關(guān)鍵嵌套層級結(jié)構(gòu)以使得布局的層級結(jié)構(gòu)保持清晰荧恍，文中的擴(kuò)展函數(shù)支持與構(gòu)造函數(shù)混用，具體使用到什么程度屯吊，就看大家自己的選擇了
