Flutter Row嵌套组件适配：让文本截断并保留所有图标

你的布局在竖屏时出现溢出，核心原因是最外层Row的左侧容器未设置弹性收缩规则，导致文本无法在有限空间内自动截断。以下是调整后的Widget树及关键说明：

修改后的代码实现 #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    // 给左侧区域套Flexible，让它占据右侧图标外的所有剩余空间
    Flexible(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // 用Expanded确保文本占据左侧区域内的剩余空间，空间不足时自动截断
          Expanded(
            child: Text(
              "Very very long text title",
              overflow: TextOverflow.ellipsis,
              maxLines: 1, // 强制单行，避免文本换行打乱布局
            ),
          ),
          getMenuAnchor(), // 菜单锚点保持自身固有宽度，不会被挤压
        ],
      ),
    ),
    IconButton(
      icon: Image.asset('share_icon.png'), // 修正原代码错误：需用Image.asset/Icon组件而非字符串
      onPressed: () {}, // 补充必填的点击回调
    ),
  ],
);

关键调整逻辑 #

• 外层Flexible包裹左侧区域：让左侧部分在最外层Row中优先为右侧分享图标预留空间，避免图标被挤压或隐藏。
• 文本用Expanded替代Flexible：确保文本在左侧Row内最大化利用剩余空间，当空间不足时触发省略号截断。
• 明确文本单行限制：通过maxLines:1强制文本不换行，保证所有元素始终在同一行布局。
• 修正IconButton参数错误：原代码直接传入字符串作为icon不符合Flutter规范，需改用Image.asset加载本地图片或内置Icon组件。

调整后，无论横屏还是竖屏，分享图标、菜单锚点都会完整显示，文本则会根据屏幕宽度自动截断并显示省略号，彻底解决溢出问题。

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