减小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

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

1. 第一个参数

   measurable

   是一个对象，您可以使用

   measure

   （第二个

   constraints

   参数）调用

   layout

   。

   measure

   将计算您的视图所需的大小，并计算

   constraints

   。
2. 在

   layout

   中，您需要传递所需的视图大小 - 通常可以从上一步的

   placeable

   中获取。
3. 在

   layout

   内部，您需要使用所需的偏移量在

   place

   上调用

   placeable

   。

随着

height(IntrinsicSize.Min)

layout

内容被多次调用：

1. 在第一次调用期间，最大高度约束等于

   Infinity

   ，因此内部计算可以选择正确的尺寸，忽略父尺寸。
2. 在最后一次调用中，最大高度约束等于计算的父级固有高度。

在我的代码中，在第一次调用期间，当高度约束等于

Infinity

时，我说该视图的大小为零，因此不计入内在测量中。定义固有高度后，我可以使用最终约束对其进行布局。

Answer 2

我采纳了@Phil的答案，并将其变成了一个可以重复使用的扩展。

fun Modifier.matchRowSize() : Modifier {
    return 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)
            }
        }
    }
}

可以在您的图标中使用，如下所示：

Row(
    modifier = Modifier
        .height(IntrinsicSize.Min)
        .padding(8.dp)
) {
    Icon(
        imageVector = Icons.Default.Star,
        contentDescription = null,
        modifier = Modifier
            .matchRowSize() // <-- here
    )
    Spacer(modifier = Modifier.size(10.dp))
    Text(text = "Hello", fontSize = 17.sp)
}

Answer 3

您可以使用

“重置”图标的固有大小

Modifier.fillMaxHeight().height(1.dp)