一. GridView組件

GridView用于展示多列的展示狡刘，在開發(fā)中也非常常見(jiàn)享潜，比如直播App中的主播列表困鸥、電商中的商品列表等等。

在Flutter中我們可以使用GridView來(lái)實(shí)現(xiàn)剑按，使用方式和ListView也比較相似疾就。

1.1. GridView構(gòu)造函數(shù)

我們先學(xué)習(xí)GridView構(gòu)造函數(shù)的使用方法

一種使用GridView的方式就是使用構(gòu)造函數(shù)來(lái)創(chuàng)建，和ListView對(duì)比有一個(gè)特殊的參數(shù)：gridDelegate

gridDelegate用于控制交叉軸的item數(shù)量或者寬度艺蝴，需要傳入的類型是SliverGridDelegate猬腰，但是它是一個(gè)抽象類，所以我們需要傳入它的子類：

SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount({
  @required double crossAxisCount, // 交叉軸的item個(gè)數(shù)
  double mainAxisSpacing = 0.0, // 主軸的間距
  double crossAxisSpacing = 0.0, // 交叉軸的間距
  double childAspectRatio = 1.0, // 子Widget的寬高比
})

代碼演練：

class MyGridCountDemo extends StatelessWidget {

  List<Widget> getGridWidgets() {
    return List.generate(100, (index) {
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent({
  double maxCrossAxisExtent, // 交叉軸的item寬度
  double mainAxisSpacing = 0.0, // 主軸的間距
  double crossAxisSpacing = 0.0, // 交叉軸的間距
  double childAspectRatio = 1.0, // 子Widget的寬高比
})

代碼演練：

class MyGridExtentDemo extends StatelessWidget {

  List<Widget> getGridWidgets() {
    return List.generate(100, (index) {
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 150,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

前面兩種方式也可以不設(shè)置delegate

可以分別使用：GridView.count構(gòu)造函數(shù)和GridView.extent構(gòu)造函數(shù)實(shí)現(xiàn)相同的效果猜敢，這里不再贅述姑荷。

1.2. GridView.build

和ListView一樣，使用構(gòu)造函數(shù)會(huì)一次性創(chuàng)建所有的子Widget缩擂，會(huì)帶來(lái)性能問(wèn)題鼠冕，所以我們可以使用GridView.build來(lái)交給GridView自己管理需要?jiǎng)?chuàng)建的子Widget。

我們直接使用之前的數(shù)據(jù)來(lái)進(jìn)行代碼演練：

class _GridViewBuildDemoState extends State<GridViewBuildDemo> {
  List<Anchor> anchors = [];

  @override
  void initState() {
    getAnchors().then((anchors) {
      setState(() {
        this.anchors = anchors;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GridView.builder(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 1.2
        ),
        itemCount: anchors.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Image.network(anchors[index].imageUrl),
                SizedBox(height: 5),
                Text(anchors[index].nickname, style: TextStyle(fontSize: 16),),
                Text(anchors[index].roomName, maxLines: 1, overflow: TextOverflow.ellipsis,)
              ],
            ),
          );
        }
      ),
    );
  }
}