Flutter中长文本行时如何让Box内Flex每行居中？布局求助

嗨，我来帮你搞定这个布局问题～你完全不需要用Stack组件，当前的Row+Flex组合就足够实现需求，问题出在几个配置细节上，咱们一步步调整：

问题根源分析 #

• 内层嵌套的Row用了MainAxisAlignment.spaceBetween，这会把左右元素往两端推，自然没法实现居中效果
• 多处设置FlexFit.tight强制子元素占满可用空间，导致布局冗余、不够紧凑
• 文本没有处理溢出逻辑，过长时会无限撑开容器，打乱整体布局

具体优化方案 #

1. 调整对齐方式，实现内容居中 #

把内层Row的mainAxisAlignment从spaceBetween改成MainAxisAlignment.center，同时给需要居中的文本加上textAlign: TextAlign.center，确保每行内容都居中显示。

2. 优化Flex配置，让布局更紧凑 #

移除不必要的FlexFit.tight，换成默认的FlexFit.loose（或者直接省略），让子元素根据自身内容大小调整，避免强制占满空间造成冗余。

3. 处理文本溢出，避免空间浪费 #

给Text组件添加overflow和maxLines属性，比如单行溢出显示省略号，或者限制多行显示，防止文本过长撑乱布局。

4. 图片适配优化 #

给Image.asset加上fit: BoxFit.cover，让图片按比例填充容器，避免拉伸变形；同时可以固定图片高度，让布局更稳定。

修改后的完整代码 #

class CategoryMeals extends StatelessWidget {
  final String title;
  final String image;
  CategoryMeals({this.title, this.image});

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      elevation: 14,
      margin: EdgeInsets.all(14),
      child: Container(
        padding: EdgeInsets.all(10),
        child: Row(
          // 整体Row居中对齐
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Flexible(
              flex: 2,
              child: Row(
                // 内层Row改为center对齐，让左右子元素居中分布
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Flexible(
                    flex: 1,
                    child: Text(
                      title,
                      // 文本居中，溢出显示省略号，最多显示2行
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                    ),
                  ),
                  Flexible(
                    flex: 1,
                    child: Container(
                      padding: const EdgeInsets.all(8.0),
                      margin: const EdgeInsets.only(left: 10), // 调整margin让间距更合理
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center, // 按钮文本居中
                        children: <Widget>[
                          Text(
                            "Button 1",
                            textAlign: TextAlign.center,
                          ),
                          Text(
                            "Button button 2",
                            textAlign: TextAlign.center,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8), // 图片圆角和卡片风格呼应
                child: Image.asset(
                  image,
                  fit: BoxFit.cover,
                  height: 80, // 固定图片高度，让布局更稳定
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

额外说明 #

• 不需要用Stack：Stack是用于层叠组件的场景，你现在是横向排列内容，Row+Flex完全足够，调整对齐和Flex参数就能达到理想效果。
• 文本过长时的Flex居中：只要每个Flex子元素内部的文本设置textAlign: TextAlign.center，同时外层Row/Flex的mainAxisAlignment设为center，就能保证每行内容都居中，再配合溢出处理，就不会出现布局混乱的情况。

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