背景

嵌套層級深的問題讓眾多剛接觸Flutter的同學感到困擾，它不僅是看起來讓人感到不適，還非常影響編碼體驗。

大佬們會告訴你應該拆分自己的嵌套代碼(自定義widget或者抽取build方法）來減少嵌套層級。這確實是個行之有效的方法，除此之外，還有沒有別的方法呢，本文將向您介紹另一種減少嵌套層級的方法。

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

這段代碼演示了什么叫做：嵌套地獄

class Test extends StatelessWidget {@overrideWidget 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 {@overrideWidget 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屬性

@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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嵌套深？扩展函数了解一下的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。