flutter GridView 九宮格

題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

重要消息

• 網易雲【玩轉大前端】配套課程
• EDU配套 教程
• Flutter開發的點滴積累系列文章

GridView 九宮格

1 引言

GridView是常用可滾動元件之一，在Flutter中通常使用GridView建構二維網格清單，GridView建立方法有五種，描述如下

• GridView的構造函數方法，一次性建構所有的子條目，适用于少量資料
• GridView.builder方式來建構，懶加載模式，适用于大量資料的情況

• GridView.count方式來建構，适用于固定列的情況，适用于少量資料 GridView.extent

  方式來建構，适用于條目有最大寬度的限制的情況，适用于少量資料的情況下

• GridView.custom

  方式來建構，可配置子條目的排列規則也可配置子條目的渲染加載模式

2 滑動元件的公有屬性

GridView也是滑動元件系列中的一個，它也有滑動元件一些公用的屬性，簡單描述如下：

///滑動方向 
  Axis scrollDirection = Axis.vertical,
  ///是否滑動到底部
  bool reverse = false,
  ///滑動控制器
  ScrollController controller,
  ///是否使用預設的控制器
  bool primary,
  ///滑動到邊界時的回彈效果
  ScrollPhysics physics,
  ///内邊距
  EdgeInsetsGeometry padding,
           

3 通過GridView的構造函數來建立

通過GridView的構造函數來建構，通過參數children來建構GridView中使用到的所有的子條目，通過參數gridDelegate配置SliverGridDelegate來配置子條目的排列規則。

SliverGridDelegate聲明為abstract抽象的，是以需要使用它的子類來建構。

SliverGridDelegate有兩個直接的子類SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

通過SliverGridDelegateWithFixedCrossAxisCount來建構一個橫軸為固定數量的子條目的GridView，如圖1所示。

對應代碼如下：

///GridView的基本使用
class GridViewBaseUsePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScrollHomePageState();
  }
}

class ScrollHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("GridView基本使用"),
      ),
      ///建構九宮格資料資料
      body: buildGridView1(),
//      body: buildGridView2(),
    );
  }
  ///GridView 的基本使用
  ///通過構造函數來建立
  Widget buildGridView1() {
    return GridView(
      ///子Item排列規則
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //橫軸元素個數
          crossAxisCount: 3,
          //縱軸間距
          mainAxisSpacing: 10.0,
          //橫軸間距
          crossAxisSpacing: 10.0,
          //子元件寬高長度比例
          childAspectRatio: 1.4),
      ///GridView中使用的子Widegt
      children: buildListViewItemList(),
    );
  }
  ///GridView 的基本使用
  ///通過custom方式來建立
  Widget buildGridView() {
    return GridView.custom(
      cacheExtent: 200,
        ///子Item排列規則
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          ///子Item的最大寬度
          maxCrossAxisExtent: 100,
          //縱軸間距
          mainAxisSpacing: 10.0,
          //橫軸間距
          crossAxisSpacing: 10.0,
          //子元件寬高長度比例
          childAspectRatio: 1.4,
        ),
        ///子條目的構模組化式
        childrenDelegate:
            ///懶加載的模式
            SliverChildBuilderDelegate((BuildContext context, int index) {
          return buildListViewItemWidget(index);
        }));
  }


  List<Widget> buildListViewItemList(){
    List<Widget> list = [];
    ///模拟的8條資料
    for (int i = 0; i < 8; i++) {
      list.add(buildListViewItemWidget(i));
    }
    return list;
  }

  ///建立GridView使用的子布局
  Widget buildListViewItemWidget(int index) {
    return new Container(
      ///内容劇中
      alignment: Alignment.center,

      ///根據角标來動态計算生成不同的背景顔色
      color: Colors.cyan[100 * (index % 9)],
      child: new Text('grid item $index'),
    );
  }
}

           

其他4中建立方式請在公衆号中回複 九宮格 檢視