Flutter GridView的多种常用写法

关于 Flutter GridView的四种常用写法

*写法一：GridView.count

GridView.count(
      // 水平方向item之间间距
      crossAxisSpacing: 10.0,
      // 垂直方向item之间间距
      mainAxisSpacing: 30.0,
      // GridView内边距--这个应该都知道的
      padding: EdgeInsets.all(10.0),
      // 每行的item数量
      crossAxisCount: 2,
      // item宽高比例
      childAspectRatio: 2.0,
      // item列表进行展开
      children: List.generate(100, (index) {
          return Center(
            child: Container(
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.red, width: 3.0),
                borderRadius: BorderRadius.circular(10),
              ),
              // color: Colors.yellow,
              padding: const EdgeInsets.all(10.0),
              child: Text("Item $index", style: TextStyle(fontSize: 20, color: Colors.black54),),
            ),
          );
        },
    );

在这里插入图片描述

写法二： GridView.builder

（SliverGridDelegateWithFixedCrossAxisCount）用法：使横轴排列数量固定

GridView.builder(
          itemCount: numList.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              // 横轴元素个数
              crossAxisCount: 2,
              // 纵轴间距
              mainAxisSpacing: 20.0,
              // 横轴间距
              crossAxisSpacing: 10.0,
              // 子组件宽高长度比例
              childAspectRatio: 1.0
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              width: 20,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all( width: 3.0),
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey,
              ),
              child: Text("${numList[index]}", style: TextStyle(color: Colors.white, fontSize: 23),),
            );
          })

*写法三：GridView.builder

（SliverGridDelegateWithMaxCrossAxisExtent）用法：横轴排列数量无需固定

GridView.builder(
          itemCount: numList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              width: 20,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 3.0),
                borderRadius: BorderRadius.circular(10),
                color: Colors.black12,
              ),
              child: Text("${numList[index]}", style: TextStyle(color: Colors.black, fontSize: 23),),
            );
          },
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              // 每个item的水平方向最大宽度
              maxCrossAxisExtent: 200,
              // 水平方向每个item之间间距
              mainAxisSpacing: 20.0,
              // 垂直方向每个item之间间距
              crossAxisSpacing: 10.0
          ),
          )

*写法四：GridView.custom

GridView.custom(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            // 水平方向每行item数量
            crossAxisCount: 3,
            // 垂直方向item之间的间距
            mainAxisSpacing: 10.0,
            // 水平方向item之间的间距
            crossAxisSpacing: 20.0,
          ),
          childrenDelegate: SliverChildBuilderDelegate((context, int index) {
            return Container(
              alignment: Alignment.center,
                decoration: BoxDecoration(
                      border: Border.all(color: Colors.red, width: 3.0),
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.black12,
                    ),
              child: Text("${numList[index]}", style: TextStyle(color: Colors.black, fontSize: 23),),
            );
          },
              childCount: numList.length
          ))