Jetpack Compose中Icon使用fillMaxWidth()无效问题咨询

问题情况 #

给Box内的Icon添加fillMaxWidth()修饰符后，仅Icon的占位区域扩展至父容器宽度，图标本身的视觉大小完全没变化：

修改前：

添加fillMaxWidth()后：

原因 #

fillMaxWidth()只是让Icon的布局空间占满父容器，但Jetpack Compose的Icon组件默认会沿用自身矢量资源的固有尺寸（通常为24dp），不会自动跟随布局空间缩放。

解决办法 #

要让图标视觉上填满父布局宽度，需强制它匹配布局尺寸，两种简单实现方式：

方法1：取消Icon的固有尺寸限制

给Icon加上size(Size.Unspecified)，让它忽略默认固有大小，完全跟随布局约束缩放：

Box(modifier = Modifier.width(200.dp).height(50.dp).border(1.dp, Color.Gray)) {
    Icon(
        Icons.Default.ArrowForward,
        contentDescription = "箭头",
        modifier = Modifier.fillMaxWidth().size(Size.Unspecified)
    )
}

方法2：手动计算缩放比例

通过graphicsLayer计算父容器宽度与Icon默认宽度的比例，手动缩放图标以填满宽度，同时保持原有宽高比：

Box(modifier = Modifier.width(200.dp).height(50.dp).border(1.dp, Color.Gray)) {
    Icon(
        Icons.Default.ArrowForward,
        contentDescription = "箭头",
        modifier = Modifier.fillMaxWidth().graphicsLayer {
            val defaultIconWidth = 24.dp.toPx()
            scaleX = size.width / defaultIconWidth
            scaleY = scaleX // 保持图标比例不变
        }
    )
}

使用上述任意一种方法，即可让Icon真正填满父布局的宽度。

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