如何解决Flutter GridView在平板上子组件留白，保持正确宽高比？

手机模拟器上卡片显示效果：

平板模拟器上卡片左右及底部出现留白：

实现布局的GridView.builder代码：

return GridView.builder(
  controller: _scrollController,
  padding: const EdgeInsets.only(left: 5, right: 5, bottom: 5),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: crossAxisCount,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: cardAspectRatio,
  ),
  itemCount: data.length,
  itemBuilder: (context, index) {
    final model = data[index];
    return FutureBuilder<String>(
      future: _getCachedShootCount(model),
      builder: (context, snapshot) {
        final count =
            snapshot.connectionState == ConnectionState.waiting
                ? 'Loading...'
                : snapshot.hasError
                    ? 'Error'
                    : snapshot.data ?? '0';

        return ModelCard(
          listitem: model,
          shootCount: count,
          listType: widget.listType,
        );
      },
    );
  },
);

其中crossAxisCount手机端设为2，平板端设为5（基于屏幕分辨率判断）；cardAspectRatio当前使用图片宽高比256/274（约0.93），手机端显示完美。尝试将该值调整为1.015并把间距改为20后，平板端显示有所改善，但仍无法完全消除留白。需要在保持设备对应列数的前提下，让图片无多余留白地适配布局。

ModelCard代码：

class ModelCard extends ConsumerWidget {
  ModelCard({
    required this.listitem,
    required this.shootCount,
    required this.listType,
  }) : super(key: ObjectKey(listitem));

  final ModelCardItem listitem;
  final String shootCount;
  final ModelListType listType;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final showStatus = listType == ModelListType.all;

    // 尝试将shootCount解析为整数
    final count = int.tryParse(shootCount);

    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
      ),
      elevation: 3,
      child: InkWell(
          onTap: () async {
            context.push('/model/${listitem.id}');
          },
          onLongPress: () {
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return DeleteItemDialog(record: listitem);
                });
          },
          child: Column(
            children: [
              Stack(children: [
                Image.asset('assets/images/models/placeholder.jpg'),
                // 名称和位置文本
                Positioned(
                  left: 8,
                  bottom: 8,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      AutoSizeText(listitem.stageName ?? '',
                          style: TextStyle(
                            fontFamily: 'Roboto',
                            fontVariations: [FontVariation('wght', 600)],
                            fontSize: 20,
                            color: Colors.white,
                            letterSpacing: 1.0,
                            shadows: [
                              Shadow(
                                offset: Offset(0, 0),
                                blurRadius: 12,
                                color: Colors.black,
                              ),
                            ],
                          ),
                          minFontSize: 14,
                          maxFontSize: 22,
                          wrapWords: false,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis),
                      AutoSizeText(listitem.city ?? 'N/A',
                          style: TextStyle(
                            fontFamily: 'Roboto',
                            fontVariations: [FontVariation('wght', 500)],
                            fontSize: 18,
                            color: Colors.white,
                            letterSpacing: 1.0,
                            shadows: [
                              Shadow(
                                offset: Offset(0, 0),
                                blurRadius: 12,
                                color: Colors.black,
                              ),
                            ],
                          ),
                          minFontSize: 14,
                          maxFontSize: 22,
                          wrapWords: false,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis),
                    ],
                  ),
                ),
                count != null && count > 0
                    ? Positioned(
                        top: 6,
                        left: 6,
                        child: Container(
                          width: 26, // 确保为正方形
                          height: 26, // 确保为正方形
                          alignment: Alignment
                              .center, // 让文本垂直水平居中
                          padding: EdgeInsets.all(2),
                          decoration: BoxDecoration(
                            color: Colors.grey[600],
                            shape: BoxShape.rectangle,
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Text(
                            shootCount, // 计数器值
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                            textAlign:
                                TextAlign.center, // 确保文本居中
                          ),
                        ),
                      )
                    : SizedBox.shrink(),
              ]),
            ],
          )),
    );
  }
}

1. 让图片填满Card容器 #

当前图片未设置适配模式，默认按自身尺寸显示，导致平板端Card出现多余空间。修改Image.asset配置：

Image.asset(
  'assets/images/models/placeholder.jpg',
  fit: BoxFit.cover, // 按比例覆盖整个容器，裁剪超出部分
  width: double.infinity,
  height: double.infinity,
)

同时给外层Stack添加约束，确保子元素填满父容器：

Stack(
  fit: StackFit.expand, // 让Stack子元素填满父容器
  children: [
    // 图片及其他元素
  ],
)

2. 动态计算精确的childAspectRatio #

固定宽高比在不同屏幕尺寸下易出现偏差，可根据屏幕实际宽度动态计算：

// 在State类中添加计算方法
double _calculateAspectRatio(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  final padding = EdgeInsets.only(left: 5, right: 5).horizontal;
  final totalSpacing = (crossAxisCount - 1) * 10; // crossAxisSpacing为10
  final itemWidth = (screenWidth - padding - totalSpacing) / crossAxisCount;
  // 根据图片实际宽高比256/274，计算item高度
  final itemHeight = itemWidth * (274 / 256);
  return itemWidth / itemHeight;
}

// 在GridView.builder中使用
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: crossAxisCount,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  childAspectRatio: _calculateAspectRatio(context),
),

3. 移除默认内/外边距 #

Card默认带有margin，可设置为EdgeInsets.zero去除：

Card(
  margin: EdgeInsets.zero, // 移除Card默认外边距
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(5),
  ),
  elevation: 3,
  // ...
)

外层Column设置mainAxisSize: MainAxisSize.min，避免占用多余空间：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    // ...
  ],
)

验证步骤 #

1. 先修改图片适配和Stack约束，这是解决留白最直接的方法；
2. 若仍有问题，添加动态计算childAspectRatio的逻辑；
3. 最后调整Card和Column的边距配置。

内容的提问来源于stack exchange，提问作者Evan R.