GridView元件初體驗

前文我們聊了Flutter的ListView元件，其類似于OC中的UITableView；今天我們來聊聊GridView元件，其實作的效果類似于OC中的UICollectionView。

GridView的構造方法有很多，我們今天主要介紹以下兩種：

GridView.count和GridView.builder。

GridView.count

GridView.count是靜态網格布局，也就是說，事先需要将各個子Widget都建立好。代碼如下：

class HomeContent extends StatelessWidget {

  //建立各個子元素的自定義方法
  List<Widget> _getChildren() {
    var children = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imgUrl"]),
            SizedBox(height: 10),//設定Image和text的上下間距
            Text(
              value["title"],
              style: TextStyle(
                fontSize: 14,
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.blue,
            width: 2,
          ), //設定Container的邊框
        ),
      );
    });
    return children.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      children: this._getChildren(),
      crossAxisCount: 3, //交叉軸（預設情況下為橫軸）上的子widget個數，即列數（預設情況下）
      crossAxisSpacing: 10, //交叉軸（預設情況下為橫軸）上的子widget之間的距離，即列與列之間的距離（預設）
      mainAxisSpacing: 10, //主軸（預設情況下為縱軸）上的子widget之間的距離，即行與行之間的距離（預設）
      padding: EdgeInsets.all(10), //設定GridView的内邊距
      // childAspectRatio: 0.5, //子Widget元素的寬/高比
    );
  }
}           

複制

GridView.builder

class HomeContent extends StatelessWidget {
  Widget _getItemBuilder(context, index) {
    return Column(
      children: <Widget>[
        Image.network(listData[index]["imgUrl"]),
        Text(listData[index]["title"])
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: this._getItemBuilder,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,//交叉軸（預設情況下為橫軸）上的子widget個數，即列數（預設情況下）
          crossAxisSpacing: 10,//交叉軸（預設情況下為橫軸）上的子widget之間的距離，即列與列之間的距離（預設）
          mainAxisSpacing: 10,//主軸（預設情況下為縱軸）上的子widget之間的距離，即行與行之間的距離（預設）
          childAspectRatio: 1.0),//子Widget元素的寬/高比
    );
  }
}           

複制

以上。