flutter系列之:flutter中的Wrap

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第29天,點選檢視活動詳情

簡介

我們在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(), ), ); }

執行上面的程式碼,我們可以得到這樣的介面:

如果在Row中多新增幾個YellowBox會有什麼效果呢?

我們在上面的Row中多新增一個yellowBox:

Widget build(BuildContext context) { return Row( textDirection: TextDirection.ltr, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ YellowBox(), YellowBox(), Expanded( child: YellowBox(), ), YellowBox(), YellowBox(), ], ); }

執行可以得到下面的介面:

可以看到,因為Row中的子widget太多了,已經超出了Row的範圍,介面上已經報錯了。

要解決這個問題,就需要使用到Wrap元件。

Wrap元件詳解

先來看下Wrap的定義:

class Wrap extends MultiChildRenderObjectWidget

Wrap繼承自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註釋掉了,執行可以得到下面的介面:

可以看到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屬性,執行可以得到下面的介面:

可以看到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(), ], ); }

執行可以得到下面的介面:

Wrap已經完美的運行了。

總結

Wrap可以通過使用不同的direction來替換Row或者Column,我們在元件可能會超出範圍的時候,就可以考慮使用Wrap了。

本文的例子:https://github.com/ddean2009/learn-flutter.git

更多內容請參考 www.flydean.com

最通俗的解讀,最深刻的乾貨,最簡潔的教程,眾多你不知道的小技巧等你來發現!

歡迎關注我的公眾號:「程式那些事」,懂技術,更懂你!