减小 Jetpack Compose 中图标的大小以匹配行高

Question

我有以下可组合项。

@Composable
fun Temp() {
    Row(
        modifier = Modifier
            .background(Color.Red)
            .height(IntrinsicSize.Min)
            .fillMaxWidth()
    ) {
        Text(text = "Hello", fontSize = 10.sp)
        Icon(
            imageVector = Icons.Default.Star,
            contentDescription = "Star",
            modifier = Modifier.fillMaxHeight()
        )
    }
}

图标的高度没有从 24.dp 开始减小。有什么办法可以实现这种行为。我希望图标大小只是父行的高度。如果文字很大。图标大小增加。我认为它必须是图标最小尺寸 24.dp。如何让图标变小？

Answer 1

您的代码实际上按预期工作 - 这就是内部计算的工作方式。

Compose 检查每个视图的最小高度并选择这些值中的最大值。在您的情况下，图像的最小高度与图像的固有大小有关，在 Icons.Default.

的情况下您无法控制

一个可能的解决方案是使用Modifier.layout。当 Compose 计算固有高度时，高度限制将是无限大的，在这种情况下，您可以将其布局为零尺寸视图，这样您的文本将是最高的。当固有高度确定后，就可以测量并定位图标了：

Row(
    modifier = Modifier
        .background(Color.Red)
        .height(IntrinsicSize.Min)
        .fillMaxWidth()
) {
    Text(text = "Hello", fontSize = 10.sp)
    Icon(
        imageVector = Icons.Default.Star,
        contentDescription = null,
        modifier = Modifier
            .layout { measurable, constraints ->
                if (constraints.maxHeight == Constraints.Infinity) {
                    layout(0, 0) {}
                } else {
                    val placeable = measurable.measure(constraints)
                    layout(placeable.width, placeable.height) {
                        placeable.place(0, 0)
                    }
                }
            }
    )
}

使用 Modifier.layout 您可以更改视图的大小及其位置。通常你这样使用它：

第一个参数，measurable 是一个对象，您可以在其上调用 measure 和 constraints - 第二个 layout 参数。 measure 将计算您的视图将占用的大小，计数为 constraints。
在 layout 中您需要传递所需的视图大小 - 通常可以从上一步的 placeable 中获取。
在 layout 中，您需要使用所需的偏移量在 placeable 上调用 place。

height(IntrinsicSize.Min) layout 内容被多次调用：

在第一次调用期间，最大高度约束等于 Infinity，因此内部计算可以 select 忽略父尺寸的正确尺寸。
在最后一次调用中，最大高度约束等于计算出的父固有高度。

在我第一次调用的代码中，当高度约束等于 Infinity 时，我说这个视图的大小为零，因此它不计入内部测量值。定义固有高度后，我可以使用最终约束对其进行布局。

减小 Jetpack Compose 中图标的大小以匹配行高

decrease size of icon in jetpack compose to match row height

android

icons

android-jetpack-compose

modifier

composable