Flutter使用GridView.count构建布局时无法设置图片高度问题求助

问题原因 #

GridView.count 默认通过 childAspectRatio（子元素宽高比）控制子组件尺寸，子组件自身设置的宽高参数会被网格布局的父级约束覆盖，所以直接给图片设置高度不会生效。

解决方法 #

方法1：调整childAspectRatio（推荐，适合固定宽高比的网格项） #

直接在GridView.count中添加childAspectRatio参数，参数值为「宽/高」的比值，比如你需要海报是3:4的竖版比例，就设置为3/4即可，代码修改如下：

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Container(
    height: MediaQuery.of(context).size.height,
    child: GridView.count(
      mainAxisSpacing: 5.0,
      crossAxisSpacing: 5.0,
      crossAxisCount: 3,
      // 新增这行，按需调整比值即可控制子项高度
      childAspectRatio: 3 / 4,
      children: List.generate(
        snapshot.data!.length,
        (index) => ClipRRect(
          borderRadius: BorderRadius.circular(15.0),
          child: snapshot.data![index].posterPath.isEmpty
              ? Container()
              : CachedNetworkImage(
                  fit: BoxFit.cover,
                  imageUrl:
                      'https://image.tmdb.org/t/p/original/${snapshot.data![index].posterPath}',
                ),
        ),
      ),
    ),
  ),
);

方法2：使用mainAxisExtent直接指定固定高度（适合子项高度固定的场景） #

如果你不想通过比例换算，想要直接写死子项的高度，可以把GridView.count换成GridView.builder配合SliverGridDelegateWithFixedCrossAxisCount的mainAxisExtent参数：

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Container(
    height: MediaQuery.of(context).size.height,
    child: GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 5.0,
        crossAxisSpacing: 5.0,
        // 直接指定主轴（垂直滚动时就是高度）尺寸为200，按需修改即可
        mainAxisExtent: 200,
      ),
      itemCount: snapshot.data!.length,
      itemBuilder: (context, index) => ClipRRect(
        borderRadius: BorderRadius.circular(15.0),
        child: snapshot.data![index].posterPath.isEmpty
            ? Container()
            : CachedNetworkImage(
                fit: BoxFit.cover,
                imageUrl:
                    'https://image.tmdb.org/t/p/original/${snapshot.data![index].posterPath}',
              ),
      ),
    ),
  ),
);

方法3：动态高度网格（适合每个子项高度不同的场景） #

如果你的网格项高度不固定，每个项高度都不一样，可以使用第三方库flutter_staggered_grid_view的StaggeredGridView实现动态高度布局。

内容的提问来源于stack exchange，提问作者user16304169