Flutter布局问题：文本裁剪与对齐实现方案咨询

问题根源 #

原代码的核心问题在于：

• 外层Row使用mainAxisSize: MainAxisSize.min，导致整个行仅占用内容宽度，按钮无法靠右对齐；
• 直接添加Spacer()会强制占据剩余空间，迫使左侧Flexible过度扩展，导致文本被不必要裁剪。

修改后的代码 #

import 'package:flutter/material.dart';

class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Flexible(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.info),
                SizedBox(width: 8),
                Flexible(
                  child: Text(
                    'This text might be clipped when screen is narrow',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text('Button'),
        ),
      ],
    );
  }
}

关键改动说明 #

1. 外层Row配置

   • mainAxisSize: MainAxisSize.max：让Row占满屏幕宽度，为按钮靠右提供基础空间；
   • mainAxisAlignment: MainAxisAlignment.spaceBetween：使左侧元素与右侧按钮分别对齐屏幕左右边缘，中间自动填充空白，满足宽屏布局需求。

2. 左侧Flexible保留
   保留左侧的Flexible组件，确保屏幕宽度不足时，左侧容器可被压缩，内部文本触发TextOverflow.ellipsis显示省略号；宽屏时则仅占用自身所需空间，不会过度扩展。

3. 细节优化
   添加SizedBox(width: 8)为图标和文本设置间距，提升布局美观度。

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