【Flutter 2-12】Flutter手把手教程UI佈局和Widg

作者 | 弗拉德

來源 | 弗拉德

GridView

GridView 是一個好用的網格佈局控制元件，它的很多屬性跟前面提到的ListView是一樣的，重複的屬性這裡就不贅述了。我們重點了解初始化方法GridView.count的使用，還有兩個代理SliverGridDelegateWithFixedCrossAxisCount、SliverGridDelegateWithMaxCrossAxisExtent的引數以及使用。

GridView.count

我們先來看GridView.count的建構函式

GridView.count({

/// key

Key key,

/// 佈局方向

Axis scrollDirection = Axis.vertical,

/// 是否 倒序顯示

bool reverse = false,

/// ScrollController用於控制滾動位置和監聽滾動事件

ScrollController controller,

/// 是否使用預設的controller

bool primary,

/// 滾動效果 可以透過此引數 設定 GridView 不可滾動

ScrollPhysics physics,

/// 是否根據子控制元件的總長度來設定 GridView 的長度，預設值為false

bool shrinkWrap = false,

/// padding

EdgeInsetsGeometry padding,

/// 交叉軸 子控制元件的個數

@required  int crossAxisCount,

/// 主軸方向的間距

double mainAxisSpacing = 0.0,

/// 交叉軸方向子元素的間距

double crossAxisSpacing = 0.0,

/// 子控制元件的寬高比例

double childAspectRatio = 1.0,

// 在 關閉螢幕時 是否釋放子控制元件

bool addAutomaticKeepAlives = true,

/// 是否 避免列表項重繪

bool addRepaintBoundaries = true,

/// 該屬性表示是否把子控制元件包裝在IndexedSemantics裡，用來提供無障礙語義

bool addSemanticIndexes = true,

// 預載入子控制元件的個數

double cacheExtent,

/// 子控制元件的陣列

List<Widget> children = const <Widget>[],

/// 子控制元件的數量

int semanticChildCount,

DragStartBehavior dragStartBehavior = DragStartBehavior.start,

ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,

})

這裡要說的是有兩個比較重要的引數crossAxisSpacing和childAspectRatio，這個兩個引數是用來定義子控制元件大小的。

假如我們設定 crossAxisSpacing = 2,那麼每一行就會顯示2個控制元件，而且控制元件的高度由childAspectRatio來確定。

childAspectRatio表示子控制元件的寬高比，假如我們設定為2 / 3，那麼高就是寬的1.5倍，這樣就可以計運算元控制元件的大小了，並且按照 GridView設定好的方向來排列和佈局子控制元件。

GridView.count(

crossAxisCount: 3,

childAspectRatio: 2 / 3,

children: List.generate(

50,

(index) {

return  Card(

child: Container(

color: Colors.green,

child: Center(

child: Text("$index"),

),

),

);

},

),

)

效果圖如下：

SliverGridDelegateWithFixedCrossAxisCount

除了GridView.count()這種構造方法，我們很多時候常用一個構造方法是GridView.builder(gridDelegate: itemBuilder:)，它接收一個delegate物件，並且跟ListView一樣接收一個itemBuilder方法。

SliverGridDelegateWithFixedCrossAxisCount的構造方法如下：

SliverGridDelegateWithFixedCrossAxisCount({

@required  this.crossAxisCount,

this.mainAxisSpacing = 0.0,

this.crossAxisSpacing = 0.0,

this.childAspectRatio = 1.0,

})

可以看得出來它是把GridView.count()的幾個引數封裝了一下，具體的用法和效果跟GridView.count()一樣，這裡就不贅述了。

SliverGridDelegateWithFixedCrossAxisCount在很多情況下都能滿足我們的佈局需求，但是有一個不足，因為它設定的每一行數是一個定值。

當我們把螢幕旋轉，此時原來的高度會變為現在的寬度，效果就會如下：

所以我們可以使用下面delegate來解決這個問題。

SliverGridDelegateWithMaxCrossAxisExtent

我們可以在GridView.builder(gridDelegate: itemBuilder:)方法內傳入另外一個引數SliverGridDelegateWithMaxCrossAxisExtent

構造方法如下：

const  SliverGridDelegateWithMaxCrossAxisExtent({

@required  this.maxCrossAxisExtent,

this.mainAxisSpacing = 0.0,

this.crossAxisSpacing = 0.0,

this.childAspectRatio = 1.0,

})

這裡有一個比較重要的引數就是maxCrossAxisExtent，這個值表示的是子控制元件最大的寬度是多少。

舉個例子：

手機的螢幕寬度為375，子控制元件之間的間距為0，maxCrossAxisExtent的值設定為100，那麼我們知道子控制元件的寬度取值區間在0~100之間。

• 假設我們佈局3個子控制元件，3 乘以最大值100等於300，很明顯是不能滿足佈局在375的寬度上的。

• 假設我們佈局4個子控制元件，4乘以100等於400，400 大於 375。我們知道寬度的取值區間在0~100，375 / 4 = 93.75既滿足了寬度小於100，又滿足了可以充滿375的寬度，那麼子控制元件的個數為 4寬度為93.75

這就是maxCrossAxisExtent的用法。

其實GridView還可以做瀑布流效果，感興趣的同學可以去查一下。

想體驗以上的示例的執行效果，可以到[我的Github倉庫] github.com/Johnson8888/learn_flutter 專案flutter_app->lib->routes->gridview_page.dart檢視，並且可以下載下來執行並體驗。