Flutter Web浏览器窗口缩小时右侧布局溢出如何修复

三个核心问题导致溢出，你之前尝试的方案无效都是因为没触发布局生效的前提：

1. 弹性组件使用位置错误：Flexible/Expanded这类弹性布局组件，只能作为Row/Column/Flex这类Flex类容器的直接子组件才能生效。你把Flexible直接放在Container子级，Container不是Flex容器，这个Flexible完全不起作用，不会帮你约束内部Row的宽度。
2. 固定边距占用宽度过大：每个菜单项MenuItem1设置了左右各50px的固定水平内边距，4个菜单项光内边距就占了400px，再加上外层Container的margin、padding共80px，加上文字本身宽度，当浏览器窗口宽度小于总内容宽度时，Row作为水平布局组件默认不会压缩子组件，直接触发溢出。
3. 文字溢出属性不满足生效条件：TextOverflow.ellipsis生效的前提是Text组件本身被父组件强制约束了最大宽度。你的菜单项外层没有任何宽度约束，Text永远会按照内容全宽渲染，溢出属性根本不会触发。之前尝试Wrap组件无效也是同样的原因：Wrap没有拿到正确的父级宽度约束，子项固定边距依然会撑爆布局。

1. 修改custom_app_bar.dart #

• 删除Container下无效的Flexible包裹，Container本身会自动占满父级可用宽度，直接将Row作为Container的子组件
• 移除占固定空间的Spacer，避免空间不足时强行挤压其他组件
• 给每个菜单项外层包裹Flexible，让菜单项可以在空间不足时自动压缩宽度
  修改后代码：

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(46),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, -2),
            blurRadius: 30,
            color: Colors.black.withOpacity(0.16),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Text(
              "someText".toUpperCase(),
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ),
          Flexible(
            child: MenuItem1(
              title: "someText",
              press: () {},
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Flexible(
            child: MenuItem1(
              title: "someText",
              press: () {},
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Flexible(
            child: MenuItem1(
              title: "someText",
              press: () {},
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Flexible(
            child: MenuItem1(
              title: "someText",
              press: () {},
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }
}

2. 修改menu_item.dart #

把固定的超大水平内边距改成合理的自适应边距，加上单行限制确保省略号生效：

class MenuItem1 extends StatelessWidget {
  final String title;
  final TextOverflow overflow;
  final VoidCallback press;
  const MenuItem1(
      {Key? key,
      required this.title,
      required this.press,
      required this.overflow})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: press,
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 16,
        ),
        child: Text(
          title.toUpperCase(),
          overflow: overflow,
          maxLines: 1,
          style: TextStyle(
            color: kTextcolor.withOpacity(0.3),
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

可选优化：超小屏自动换行 #

如果需要在窗口极窄时让菜单项自动折行而不是显示省略号，可以把Row替换为Wrap组件，配置折行间距即可：

Wrap(
  alignment: WrapAlignment.spaceBetween,
  crossAxisAlignment: WrapCrossAlignment.center,
  spacing: 16,
  runSpacing: 12,
  children: [
    // 原logo文本、菜单项，无需包裹Flexible/Expanded
  ],
)

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