Flutter：父容器缩小时Icon在Row中溢出问题求解

核心思路 #

• 给Icon设置固定宽度，确保折叠状态下容器宽度足够容纳它，避免溢出
• 让文本组件占据剩余空间，同时保留动画隐藏效果

具体实现代码 #

调整MenuItem组件结构

class MenuItem extends StatelessWidget {
  final IconData icon;
  final String text;
  final bool isCollapsed;

  const MenuItem({
    super.key,
    required this.icon,
    required this.text,
    required this.isCollapsed,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 用SizedBox固定Icon宽度，折叠时不会因容器变窄溢出
        SizedBox(
          width: 40, // 根据你的UI需求设置固定宽度
          child: Icon(icon),
        ),
        // 用Expanded包裹文本，自动占据Row剩余空间
        Expanded(
          child: AnimatedOpacity(
            opacity: isCollapsed ? 0 : 1,
            duration: const Duration(milliseconds: 300),
            // 折叠时让文本完全收缩不占空间
            child: isCollapsed ? const SizedBox.shrink() : Text(text),
          ),
        ),
      ],
    );
  }
}

约束AnimatedContainer的折叠宽度

确保折叠状态下的容器宽度不小于Icon的固定宽度，示例：

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  width: isCollapsed ? 40 : 220, // 折叠宽度与Icon固定宽度一致
  color: Colors.grey[800],
  child: Column(
    children: [
      const Image(image: AssetImage('assets/logo.png')),
      const SizedBox(height: 20),
      MenuItem(icon: Icons.home, text: '首页', isCollapsed: isCollapsed),
      MenuItem(icon: Icons.settings, text: '设置', isCollapsed: isCollapsed),
      // 其他菜单项...
    ],
  ),
)

关键说明 #

• SizedBox固定Icon宽度，从根源避免折叠时容器宽度不足导致的溢出问题
• Expanded让文本自动填充Row剩余空间，不会出现和Icon平分宽度的情况
• 配合AnimatedOpacity和SizedBox.shrink()，实现文本折叠时完全隐藏且不占用额外空间

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