Flutter：如何避免宽屏场景下卡片横向拉伸？

需求与问题描述 #

我要制作一款Flutter卡片，布局逻辑是顶部展示图片，下方排列三个Text元素：其中text1和text2分别居左右两侧，text3在下方。预期布局样式如下：

______________
|              |
|              |
|              |
|    Image     |
|              |
|              |
|______________|
text1      text2
text3

所有元素嵌套在InkWell中，常规屏幕下布局间距正常，但切换到宽屏时，承载text1和text2的Row宽度会超过图片宽度，布局异常变为：

______________
  |              |
  |              |
  |              |
  |    Image     |
  |              |
  |              |
  |______________|
text1          text2
text3

请问如何阻止Row的宽度超过图片宽度？

现有实现代码 #

InkWell(
    borderRadius: BorderRadius.circular(15.0),
    onTap: () => {},
    child: Column(
      children: [
        Card(
          child: Container(
            //fits the card, children fit the card - 10 from each side
            padding: const EdgeInsets.all(10),

            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: const Color.fromARGB(
                        255, 161, 160, 159),
                    borderRadius:
                        BorderRadius.circular(5.0),
                  ),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minWidth: MediaQuery.of(context)
                              .size
                              .width *
                          0.1,
                      maxWidth: MediaQuery.of(context)
                              .size
                              .width *
                          0.22,
                      maxHeight: MediaQuery.of(context)
                              .size
                              .height *
                          0.22,
                    ),
                    child: ClipRRect(
                      borderRadius:
                          BorderRadius.circular(3),
                      child: Image.asset(
                        'assets/img/test.jpg',
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
                Container(
                  constraints: BoxConstraints(
                    minWidth: MediaQuery.of(context)
                            .size
                            .width *
                        0.1,
                    maxWidth: MediaQuery.of(context)
                            .size
                            .width *
                        0.22,
                    maxHeight: MediaQuery.of(context)
                            .size
                            .height *
                        0.22,
                  ),
                  child: Container(
                    constraints: BoxConstraints(
                      minWidth: MediaQuery.of(context)
                              .size
                              .width *
                          0.1,
                      maxWidth: MediaQuery.of(context)
                              .size
                              .width *
                          0.18,
                      maxHeight: MediaQuery.of(context)
                              .size
                              .height *
                          0.18,
                    ),
                    child: const Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Row(
                          mainAxisAlignment:
                              MainAxisAlignment
                                  .spaceBetween,
                          children: [
                            Text(
                              "Test 1",
                              style: TextStyle(
                                fontSize: 10.0,
                              ),
                            ),
                            Text(
                              "Test 2",
                              style: TextStyle(
                                fontSize: 10.0,
                              ),
                            ),
                          ],
                        ),
                        Row(
                          mainAxisSize:
                              MainAxisSize.min,
                          children: [
                            Text(
                              "Test 3",
                              style: TextStyle(
                                fontSize: 10.0,
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );

解决方案 #

核心问题是文本区域的约束未与图片实际宽度绑定，而是依赖屏幕宽度百分比，导致宽屏时Row被过度拉伸。以下两种方法可解决：

方法1：用IntrinsicWidth统一子元素宽度 #

将图片和文本区域包裹在IntrinsicWidth中，强制所有子元素宽度与最宽元素（即图片）保持一致，实现逻辑简洁：

InkWell(
  borderRadius: BorderRadius.circular(15.0),
  onTap: () => {},
  child: Column(
    children: [
      Card(
        child: Container(
          padding: const EdgeInsets.all(10),
          child: IntrinsicWidth( // 新增组件，统一子元素宽度
            child: Column(
              children: [
                // 图片容器部分保持原有约束
                Container(
                  padding: const EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: const Color.fromARGB(255, 161, 160, 159),
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minWidth: MediaQuery.of(context).size.width * 0.1,
                      maxWidth: MediaQuery.of(context).size.width * 0.22,
                      maxHeight: MediaQuery.of(context).size.height * 0.22,
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(3),
                      child: Image.asset(
                        'assets/img/test.jpg',
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
                // 简化文本区域布局，移除多余嵌套和重复约束
                Container(
                  padding: const EdgeInsets.only(top: 8),
                  child: const Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "Test 1",
                            style: TextStyle(fontSize: 10.0),
                          ),
                          Text(
                            "Test 2",
                            style: TextStyle(fontSize: 10.0),
                          ),
                        ],
                      ),
                      SizedBox(height: 4), // 可选，增加文本间距
                      Text(
                        "Test 3",
                        style: TextStyle(fontSize: 10.0),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  ),
);

方法2：用LayoutBuilder传递图片约束 #

若对性能有要求（IntrinsicWidth存在轻微性能开销），可通过LayoutBuilder复用图片的宽度约束，直接限制文本区域的最大宽度：

InkWell(
  borderRadius: BorderRadius.circular(15.0),
  onTap: () => {},
  child: Column(
    children: [
      Card(
        child: Container(
          padding: const EdgeInsets.all(10),
          child: LayoutBuilder(
            builder: (context, constraints) {
              // 提取图片的宽度约束，统一复用
              final imageMinWidth = MediaQuery.of(context).size.width * 0.1;
              final imageMaxWidth = MediaQuery.of(context).size.width * 0.22;
              return Column(
                children: [
                  Container(
                    padding: const EdgeInsets.all(5),
                    decoration: BoxDecoration(
                      color: const Color.fromARGB(255, 161, 160, 159),
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                        minWidth: imageMinWidth,
                        maxWidth: imageMaxWidth,
                        maxHeight: MediaQuery.of(context).size.height * 0.22,
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(3),
                        child: Image.asset(
                          'assets/img/test.jpg',
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    // 直接复用图片的宽度约束
                    constraints: BoxConstraints(
                      minWidth: imageMinWidth,
                      maxWidth: imageMaxWidth,
                    ),
                    padding: const EdgeInsets.only(top: 8),
                    child: const Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "Test 1",
                              style: TextStyle(fontSize: 10.0),
                            ),
                            Text(
                              "Test 2",
                              style: TextStyle(fontSize: 10.0),
                            ),
                          ],
                        ),
                        SizedBox(height: 4),
                        Text(
                          "Test 3",
                          style: TextStyle(fontSize: 10.0),
                        ),
                      ],
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    ],
  ),
);

补充说明 #

• 方法1适合大多数场景，代码简洁易维护；方法2性能更优，适合复杂布局场景。
• 可根据视觉需求添加SizedBox等组件调整元素间距，优化整体观感。

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