Flutter中如何防止GridView缩放异常并实现子项自适应屏幕尺寸

问题根因 #

你遇到的布局异常主要是两个原因导致的：

1. SliverGrid没有设置固定的子项宽高比（childAspectRatio），默认比例为1，无法适配图书封面的比例，导致子项尺寸混乱
2. 子组件UnitBookDisplay中设置了动态的宽高参数（传值为null），且没有限制子元素的横向填充规则，导致图片无法占满可用空间

调整方案 #

1. 修改网格布局配置

给SliverGrid.count新增childAspectRatio参数，按你图书封面的实际比例调整即可（示例值0.7对应宽高比3:4，适合常规图书封面）：

return Scaffold(
  appBar: AppBar(
    title: Text("${getUnitBookClassTitlebyTag(tag!)} 목록"),
    backgroundColor: Color(COLOR_PRIMARY),
    centerTitle: true,
  ),
  body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: CustomScrollView(
        primary: false,
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(20),
            sliver: SliverGrid.count(
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: 3,
              // 新增子项宽高比，按实际封面比例调整即可
              childAspectRatio: 0.7,
              children: <Widget>[
                for (UnitBook _curUnitBook in unitBookList!)
                  UnitBookDisplay(bookData: _curUnitBook),
              ],
            ),
          ),
        ],
      )),
);

2. 调整子组件UnitBookDisplay代码

删掉无效的宽高参数，新增横向填充规则，让内容自动占满子项可用空间：

Widget build(BuildContext context) {
  if (bookData == null) debugPrint('bookData is null!!');
  return Column(
    // 新增横向填充规则，让所有子元素占满子项宽度
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (_) => DetailScreen(book: convertUnitBooktoBook(bookData!)),
            ),
          ); 
        },
        child: Expanded(
          child: Container(
            margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 10.0),
            // 删掉null的height、width参数，自动适配父容器尺寸
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(0.0, 4.0),
                  blurRadius: 6.0,
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10.0),
              child: (bookData!.coverUrl == null)
                  ? Image.asset(
                      'images/default_book_cover_image.png',
                      fit: BoxFit.cover,
                    )
                  : Image.network(
                      bookData!.coverUrl!.replaceAll('\/', '/'),
                      fit: BoxFit.cover,
                    ),
            ),
          ),
        ),
      ),
      // 替换原来固定宽度的SizedBox，自适应宽度同时和上方图片边距对齐
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Text(
          bookData!.title ?? 'unNamed',
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.center,
        ),
      )
    ],
  );
}

修改后不管屏幕宽窄，每行都会固定显示3个元素，子项会按照你设置的childAspectRatio等比缩放，图片自动占满容器，不会出现间距变大或子项收缩的问题。

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