1. 首頁 > 生活百科 > >

flutter系列之:永遠不用擔心組件溢出的Wrap

生活百科

目錄

  • 簡介
  • Row和Column的困境
  • Wrap組件詳解
  • 總結
簡介我們在flutter中使用能夠包含多個child的widget的時候 ， 經常會遇到超出邊界范圍的情況 ， 尤其是在Column和Row的情況下 ， 那么我們有沒有什么好的解決辦法呢？答案就是今天我們要講解的Wrap 。
Row和Column的困境Row和Column中可以包含多個子widget，如果子widget超出了Row或者Column的范圍會出現什么情況呢？
我們以Row的情況舉個例子：
Widget build(BuildContext context) {return Row(textDirection: TextDirection.ltr,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [YellowBox(),YellowBox(),Expanded(child: YellowBox(),),YellowBox(),],);}上面的例子中，我們在Row中添加了幾個YellowBox，YellowBox是一個width=100,height=50的長方形：
Widget build(BuildContext context) {return Container(width: 100,height: 50,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(),),);}運行上面的代碼 ， 我們可以得到這樣的界面：
flutter系列之:永遠不用擔心組件溢出的Wrap

文章插圖
如果在Row中多添加幾個YellowBox會有什么效果呢？
我們在上面的Row中多添加一個yellowBox：
Widget build(BuildContext context) {return Row(textDirection: TextDirection.ltr,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [YellowBox(),YellowBox(),Expanded(child: YellowBox(),),YellowBox(),YellowBox(),],);}運行可以得到下面的界面：
flutter系列之:永遠不用擔心組件溢出的Wrap

文章插圖
可以看到，因為Row中的子widget太多了，已經超出了Row的范圍，界面上已經報錯了 。
要解決這個問題，就需要使用到Wrap組件 。
Wrap組件詳解先來看下Wrap的定義：
class Wrap extends MultiChildRenderObjectWidgetWrap繼承自MultiChildRenderObjectWidget，表示可以包含多個子child 。
接下來是Wrap的構造函數：
Wrap({Key? key,this.direction = Axis.horizontal,this.alignment = WrapAlignment.start,this.spacing = 0.0,this.runAlignment = WrapAlignment.start,this.runSpacing = 0.0,this.crossAxisAlignment = WrapCrossAlignment.start,this.textDirection,this.verticalDirection = VerticalDirection.down,this.clipBehavior = Clip.none,List<Widget> children = const <Widget>[],}) : assert(clipBehavior != null), super(key: key, children: children);構造函數中列出了Wrap中常用的屬性 。
其中direction表示子組件的排列方向 。alignment表示的是子組件的對其方式 。spacing表示子組件的間隔 。
跟spacing類似的還有一個runSpacing屬性，兩者有什么區別呢？ 我們還是通過一個具體的例子來查看 。
Widget build(BuildContext context) {return Wrap(direction: Axis.horizontal,textDirection: TextDirection.ltr,children: [YellowBox(),YellowBox(),// Expanded(//child: YellowBox(),// ),YellowBox(),YellowBox(),YellowBox(),],);還是上面的例子，這里我們使用Wrap來替換Row，這里我們使用了direction選項，表示是在橫向方向進行Wrap 。
然后在children中添加了5個YellowBox 。
注意，這里不能使用Expanded ， 否則會報錯，所以我們把Expanded注釋掉了，運行可以得到下面的界面：
flutter系列之:永遠不用擔心組件溢出的Wrap

文章插圖
【flutter系列之:永遠不用擔心組件溢出的Wrap】可以看到YellowBox是按行的方向來排列的，超出一行的范圍之后就會自動換行，這也就是Wrap的功能 。
我們在講解Wrap的時候 ， 還提到了兩個屬性，分別是spacing和runSpacing 。兩者有什么區別呢？
先看下spacing:
Widget build(BuildContext context) {return Wrap(direction: Axis.horizontal,spacing: 10,textDirection: TextDirection.ltr,children: [YellowBox(),YellowBox(),// Expanded(//child: YellowBox(),// ),YellowBox(),YellowBox(),YellowBox(),],);}我們先給Wrap添加spacing屬性，運行可以得到下面的界面：
flutter系列之:永遠不用擔心組件溢出的Wrap

文章插圖
可以看到YellowBox之間是用spacing來進行分割的 。
那么如果我們希望在Wrap換行的時候，兩行之間也有一些間距應該怎么處理呢？
這個時候就需要用到runSpacing屬性了：
Widget build(BuildContext context) {return Wrap(direction: Axis.horizontal,spacing: 10,runSpacing: 10,textDirection: TextDirection.ltr,children: [YellowBox(),YellowBox(),// Expanded(//child: YellowBox(),// ),YellowBox(),YellowBox(),YellowBox(),],);}運行可以得到下面的界面：
flutter系列之:永遠不用擔心組件溢出的Wrap

推薦閱讀