Jetpack Compose 自定义Layout无法正确测量Icon尺寸问题

问题原因 #

• Material 矢量图标默认固有尺寸为24.dp，未给Icon指定尺寸修饰符时，组件会优先匹配矢量图的固有尺寸绘制。即便自定义Layout传入的测量约束要求最小尺寸更大，Icon也只会将自身测量尺寸调整为满足约束的最小值，但内部图标仍然保持固有尺寸居中显示，因此会出现外围透明区域大小变化、图标本身尺寸不变的现象。
• 你当前的测量逻辑仅修改了约束的minHeight，既没有限制maxHeight固定为目标值，也没有让Icon主动适配测量得到的布局尺寸，因此图标始终保持默认大小。

解决方法 #

方案1：让Icon适配自定义Layout的约束

给Icon添加Modifier.fillMaxSize()修饰符，让图标绘制范围自动填充满测量得到的布局尺寸，同时测量时固定宽高约束为目标值即可，修改后的代码如下：

Layout( content = {
    Icon(
        modifier = Modifier.fillMaxSize(), // 新增适配尺寸的修饰符
        painter = rememberVectorPainter(image = Icons.Filled.CloudDownload),
        contentDescription = stringResource(R.string.upload),
        tint = Color(0xFFD0FFF7)
    )
} ){measurables, constraints ->
    val targetHeight = constraints.maxHeight / 10
    // 测量时同时指定min和max的宽高，确保Icon测量尺寸固定为目标值
    val upload = measurables[0].measure(constraints.copy(
        minHeight = targetHeight,
        maxHeight = targetHeight,
        minWidth = constraints.maxWidth,
        maxWidth = constraints.maxWidth
    ))

    layout(constraints.maxWidth, targetHeight){
        upload.place(0, 0)
    }
}

如果你需要保持图标宽高比不变、避免拉伸，可以在测量时根据图标固有宽高比计算对应宽度，不要直接填充满父布局宽度。

方案2：直接指定Icon固定尺寸

如果不需要动态适配父布局约束，可以直接给Icon加Modifier.size()指定尺寸，和你直接用Modifier设置高度宽度的效果一致：

Icon(
    modifier = Modifier.size(48.dp), // 直接指定所需尺寸
    painter = rememberVectorPainter(image = Icons.Filled.CloudDownload),
    contentDescription = stringResource(R.string.upload),
    tint = Color(0xFFD0FFF7)
)

内容的提问来源于stack exchange，提问作者Richard Onslow Roper