Flutter 网格布局_GridView

最新推荐文章于 2025-05-06 11:52:46 发布

不语风来去

最新推荐文章于 2025-05-06 11:52:46 发布

阅读量997

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/weixin_38397436/article/details/116800159

版权

Flutter 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了GridView组件在Flutter中的使用，包括如何设置crossAxisCount（列数）、scrollDirection（滚动方向）、crossAxisSpacing和mainAxisSpacing（间距），以及childAspectRatio（宽高比）。展示了两种常见创建方式：count方法和builder方法，并通过示例展示了如何应用这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

crossAxisCount

定义GridView的列数(竖向时) / 定义GridView的行数(横向时)

crossAxisCount: 3,

scrollDirection

定义GridView的滚动方向

//横向
scrollDirection: Axis.horizontal,
//纵向
scrollDirection: Axis.vertical,

crossAxisSpacing & mainAxisSpacing

定义GridView的item之间的间距(不包含与外界的间距)

//横向间距
crossAxisSpacing: 20,
//纵向间距
mainAxisSpacing: 20,

childAspectRatio

定义GridView的item的宽高比 (滚动方向变化时随之变化)

// 宽: 高 = 1:2  (在滚动方向变化时变化为 高:宽 = 1:2)
childAspectRatio: 1/2,

创建GridView常用的两种方式

通过GridView.count创建

GridView.count(
        //定义列数
        crossAxisCount: 3,

        //滚动方向
        scrollDirection: Axis.horizontal,

        //横向间距
        crossAxisSpacing: 20,

        //纵向间距
        mainAxisSpacing: 20,

        // 宽高比
        childAspectRatio: 1/2,

        //定义数据源
        children: getListWidget(),
      )

通过GridView.builder创建

GridView.builder(
        itemCount: listData.length,
        scrollDirection: Axis.horizontal,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          childAspectRatio: 1.5 / 1,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Image.network(listData[index]["imgUrl"]),
              Text(listData[index]["title"])
            ],
          );
        },
      )

示例

class GridViewBody extends StatelessWidget {

  List<Widget> getListWidget() {
    return listData.map((value) {
      return Container(
          width: 100,
          height: 200,
          color: Colors.blue,
          child: Column(
            children: [
              Image.network(
                imgUrl2,
                fit: BoxFit.contain,
                width: 50,
                height: 50,
              ),
              Text("标题")
            ],
          ));
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      //设置外边距
      padding: EdgeInsets.all(20),

      height: 300,

      //网格布局(宽高相等)
      child: GridView.count(
        //定义列数
        crossAxisCount: 3,

        //滚动方向
        scrollDirection: Axis.horizontal,

        //横向间距
        crossAxisSpacing: 20,

        //纵向间距
        mainAxisSpacing: 20,

        // 宽高比
        childAspectRatio: 1/2,

        //定义数据源
        children: getListWidget(),
      ),

      //通过builder创建网格布局
//      child: GridView.builder(
//        itemCount: listData.length,
//        scrollDirection: Axis.horizontal,
//        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//          crossAxisCount: 2,
//          crossAxisSpacing: 20,
//          mainAxisSpacing: 20,
//          childAspectRatio: 1.5 / 1,
//        ),
//        itemBuilder: (BuildContext context, int index) {
//          return Column(
//            children: [
//              Image.network(listData[index]["imgUrl"]),
//              Text(listData[index]["title"])
//            ],
//          );
//        },
//      ),
    );
  }
}