Flutter GridView不同屏幕响应式适配问题咨询

你代码中最核心的问题是大量使用固定硬编码的逻辑像素值，没有根据设备的屏幕尺寸、像素密度、宽高比做动态适配，不同设备的可用屏幕宽度差异大，固定尺寸的组件在小屏/高屏设备上就会出现内容溢出、重叠的问题，典型的错误写法包括：

• 商品图片硬编码宽高为165.0
• new标签硬编码宽度为60.0，按钮硬编码宽高为70.0 * 30.0
• GridView固定childAspectRatio: 0.72，没有动态计算适配
• 未做文字溢出处理，长文本会撑开布局超出GridView分配的item高度

1. 替换硬编码尺寸为相对尺寸 #

不要直接写死固定像素值，通过MediaQuery获取当前设备的屏幕参数，动态计算组件尺寸：

@override
Widget build(BuildContext context) {
  // 获取当前设备的逻辑尺寸
  final screenSize = MediaQuery.of(context).size;
  // 计算网格item的宽度：两列布局，减去左右padding和交叉轴间距
  final crossAxisSpacing = 1.0;
  final horizontalPadding = kDefaultPadding * 2;
  final itemWidth = (screenSize.width - horizontalPadding - crossAxisSpacing) / 2;
  // 按比例计算其余组件尺寸
  final imageSize = itemWidth; // 图片宽高和item宽度一致
  final newTagWidth = itemWidth * 0.36; // 按原比例60/165≈0.36计算
  final buttonHeight = itemWidth * 0.18; // 按原比例30/165≈0.18计算
  final buttonWidth = itemWidth * 0.42; // 按原比例70/165≈0.42计算
  // 动态计算网格的宽高比：item宽度/(图片高度+文字区域高度)
  final childAspectRatio = itemWidth / (imageSize + 80); // 80为文字+按钮区域的预估高度，可根据实际调整
  // 其余原有逻辑...

对应的GridView的gridDelegate修改为：

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: childAspectRatio, // 替换为动态计算值
  mainAxisSpacing: 1.0,
  crossAxisSpacing: crossAxisSpacing,
),

所有硬编码的尺寸都替换为上面的动态计算值即可。

2. 增加文字溢出处理 #

给所有Text组件增加溢出配置，避免长文本撑开布局：

Text(product.title,
  style: kStyleTitle,
  maxLines: 2, // 最多显示2行
  overflow: TextOverflow.ellipsis, // 超出显示省略号
)

3. 适配系统字体缩放 #

如果需要兼容用户修改系统字体大小的场景，可通过MediaQuery.textScaleFactorOf(context)动态调整字体大小，避免字体放大后溢出：

final textScale = MediaQuery.textScaleFactorOf(context).clamp(0.8, 1.2); // 限制缩放范围避免过大/过小
Text(product.title,
  style: kStyleTitle.copyWith(fontSize: 14 * textScale),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

4. 多密度资源适配 #

切图需要准备不同分辨率的版本，放在对应资源目录下：

• 1x分辨率图放在assets/images/1.0x/
• 2x分辨率图放在assets/images/2.0x/
• 3x分辨率图放在assets/images/3.0x/
• 4x分辨率图放在assets/images/4.0x/
  Flutter会自动根据设备的像素密度加载对应分辨率的图片，避免图片模糊。

@override
Widget build(BuildContext context) {
  final screenSize = MediaQuery.of(context).size;
  final crossAxisSpacing = 1.0;
  final horizontalPadding = kDefaultPadding * 2;
  final itemWidth = (screenSize.width - horizontalPadding - crossAxisSpacing) / 2;
  final imageSize = itemWidth;
  final newTagWidth = itemWidth * 0.36;
  final buttonHeight = itemWidth * 0.18;
  final buttonWidth = itemWidth * 0.42;
  final childAspectRatio = itemWidth / (imageSize + 80);
  final textScale = MediaQuery.textScaleFactorOf(context).clamp(0.8, 1.2);

  return Scaffold(
    body: ListView(
      physics: const PageScrollPhysics(),
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(
              horizontal: kDefaultPadding, vertical: kDefaultPadding),
          child: Text('Меню', style: kStyleHeaders),
        ),
        const SizedBox(height: 10.0),
        Builder(builder: (_) {
          if (_isLoading) {
            return const Padding(
              padding: EdgeInsets.symmetric(vertical: 200.0),
              child: Center(child: CircularProgressIndicator()),
            );
          }
          if (_apiResponse.error) {
            return Center(child: Text(_apiResponse.errorMessage));
          }
          if (_apiResponse.data.isEmpty) {
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 200.0),
              child: Center(
                child: Text(
                  'No products has been found..!',
                  style: TextStyle(
                    fontSize: 16.0 * textScale,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'BuffetBold',
                    color: Colors.black,
                  ),
                ),
              ),
            );
          }
          return GridView.builder(
            shrinkWrap: true,
            physics: const ClampingScrollPhysics(),
            itemCount: _apiResponse.data.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: childAspectRatio,
              mainAxisSpacing: 1.0,
              crossAxisSpacing: crossAxisSpacing,
            ),
            itemBuilder: (context, index) {
              var product = _apiResponse.data[index];
              return CachedNetworkImage(
                imageUrl: product.imageMedium,
                imageBuilder: (context, imageProvider) => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => ProductDetail(
                              id: product.id,
                              title: product.title,
                              description: product.description,
                              structure: product.structure,
                              imageLarge: product.imageLarge,
                              weight: product.weight,
                              hasDiscount: product.hasDiscount,
                              priceBefore:
                                  double.parse(product.priceBefore),
                              priceAfter:
                                  double.parse(product.priceAfter),
                              isHit: product.isHit,
                              isNew: product.isNew,
                              isSpicy: product.isSpicy,
                              isRecommended: product.isRecommended,
                              isVegetarian: product.isVegetarian,
                              attributes: product.attributes),
                        ),
                      ),
                      child: Container(
                        alignment: const Alignment(-1, 0.9),
                        child: (product.isNew == '1')
                            ? Image.asset(
                                'assets/images/new.png',
                                width: newTagWidth,
                              )
                            : null,
                        height: imageSize,
                        width: imageSize,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.0),
                          image: DecorationImage(
                            image: imageProvider,
                            fit: BoxFit.cover,
                          ),
                          boxShadow: const [
                            BoxShadow(
                                color: Colors.grey,
                                blurRadius: 2.0,
                                spreadRadius: 0,
                                offset: Offset(0, 2))
                          ],
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 10.0, horizontal: 10.0),
                      child: Text(product.title,
                          style: kStyleTitle.copyWith(fontSize: kStyleTitle.fontSize * textScale),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis),
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: Row(
                        mainAxisAlignment:
                            MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                              product.weight != null
                                  ? product.weight
                                  : '',
                              style: kStyleWeight.copyWith(fontSize: kStyleWeight.fontSize * textScale)),
                          Text(
                              product.hasDiscount != '0'
                                  ? product.priceBefore
                                  : '',
                              style: kStyleDiscount.copyWith(fontSize: kStyleDiscount.fontSize * textScale)),
                          Container(
                            margin: const EdgeInsets.symmetric(
                                horizontal: 3, vertical: 0),
                            height: buttonHeight,
                            width: buttonWidth,
                            child: TextButton(
                              style: TextButton.styleFrom(
                                shape: RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.circular(20.0),
                                ),
                                backgroundColor: kPrimaryColor,
                                foregroundColor: Colors.white,
                                padding: const EdgeInsets.symmetric(horizontal: 5.0),
                              ),
                              onPressed: () {
                                context.read<OrderNotify>().addOrder(
                                      CartOrder(
                                          productId: product.id,
                                          product: product,
                                          qty: 1,
                                          price: hasDiscount(product)),
                                    );
                              },
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.center,
                                children: [
                                  Text(hasDiscount(product),
                                      style: kStylePrice.copyWith(fontSize: kStylePrice.fontSize * textScale)),
                                  Icon(
                                    FontAwesomeIcons.rubleSign,
                                    size: 13.0 * textScale,
                                    color: Colors.white,
                                  )
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                placeholder: (context, url) => Center(
                  child: CircularProgressIndicator(
                    valueColor:
                        AlwaysStoppedAnimation(const Color(0xffB81F33)),
                  ),
                ),
                errorWidget: (context, url, error) => Icon(
                  Icons.error,
                  size: 40.0 * textScale,
                  color: Theme.of(context).primaryColor,
                ),
              );
            },
          );
        }),
      ],
    ),
  );
}

注：代码中已将废弃的FlatButton替换为Flutter新版推荐的TextButton，可根据你的Flutter版本调整。

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