Jetpack Compose中如何根据Icon高度自适应缩放其宽度

问题原因 #

Jetpack Compose 原生Icon组件未内置contentScale参数，该参数为Image组件专属配置，因此直接添加会无法识别。

解决方案 #

方案1：改用Image组件（推荐，灵活支持各类缩放策略）

直接替换为支持contentScale的Image组件，参数配置和Icon基本一致，额外添加你需要的ContentScale.Fit即可实现等比缩放适配容器：

Image(
    painter = painterResource(id = id),
    contentDescription = null,
    tint = Color.White,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .fillMaxHeight(0.6f)
        .align(CenterVertically)
        .border(2.dp, Color.Black, RectangleShape)
)

方案2：保留Icon组件，通过aspectRatio修饰符实现自适应

如果需要继续使用Icon组件，可通过aspectRatio修饰符设置宽高比，开启matchHeightConstraintsFirst优先匹配高度约束，再按比例计算宽度：

Icon(
    painter = painterResource(id = id),
    contentDescription = null,
    tint = Color.White,
    modifier = Modifier
        .fillMaxHeight(0.6f)
        // 此处比例替换为你的图标实际宽高比，正方形图标填1f即可
        .aspectRatio(1f, matchHeightConstraintsFirst = true)
        .align(CenterVertically)
        .border(2.dp, Color.Black, RectangleShape)
)

两种方案都可以实现图标高度占满边框容器、宽度按原图比例自适应，不会出现拉伸变形问题。

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