Flutter：父容器缩小时图标溢出一行

Question

我创建了一个完整的自定义侧面菜单。 在移动设备上，我希望菜单完全折叠。

所以，我创建了以下结构：

AnimatedContainer
    Column
        Image          
        SizedBox,
        Padding
            MenuItem

其中 MenuItem 小部件如下：

Padding(
      padding: const EdgeInsets.only(bottom:16),
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: () {
            NavigatorKeys.navigatorKey.currentState?.pushNamed(route);
            // Callback call
            if(onClicked != null){
              onClicked!();
            }
          },
          child: Row(
            children: [
              Icon(
                icon,
                size: 48,
                color: theme.colorScheme.onPrimaryContainer,
              ),
              Expanded(
                child: AnimatedOpacity(
                  opacity: textOpacity,
                  duration: animDuration,
                  curve: Curves.easeInOut,
                  child: Padding(
                    padding: const EdgeInsets.only(left:16),
                    child: Text(
                      label,
                      overflow: TextOverflow.ellipsis,
                      style: style,
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );

使用此布局，文本可以完美折叠。 但由于图标的原因，会引发溢出错误。

折叠动画的GIF

为了避免溢出，我尝试用Flexible包裹Icon Widget。 但现在我们将为 Row 提供两个 Flex 子级，将每个 Widget 的可用空间除以二。 我们希望图标宽度固定，文本占据所有剩余空间。

有解决此行为的想法吗？ 谢谢你。

Answer 1

请按如下方式包裹图标并检查。

LayoutBuilder(builder: (context, constraint) {
    return Icon(Icons.access_alarms, size: constraint.biggest.height);

}），

正如您上面提到的，约束是 48。