android 减小jetpack compose中图标的大小以匹配行高

vpfxa7rd  于 2023-05-27  发布在  Android
关注(0)|答案(2)|浏览(143)

我有以下的组合。

@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。如何让图标变小?

kkih6yb8

kkih6yb81#

您的代码实际上按预期工作-这就是内在计算的工作方式。
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是一个对象,您可以在其上使用constraints(第二个layout参数)调用measuremeasure将计算视图的大小,并将constraints作为计数。
1.在layout中,你需要传递所需的视图大小-通常可以从上一步的placeable中获取。
1.在layout内部,您需要使用所需的偏移量在placeable上调用place
使用height(IntrinsicSize.Min)layout时,内容会被多次调用:
1.在第一次调用期间,max_height_constraint等于Infinity,因此固有计算可以选择正确的大小,忽略父大小。
1.在最后一次调用中,最大高度约束等于计算的父固有高度。
在第一次调用的代码中,当height constraint等于Infinity时,我说这个视图的大小为零,所以它不计入内部度量。定义了固有高度后,我可以使用最终约束对其进行布局。

fnvucqvd

fnvucqvd2#

我接受了@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)
}

相关问题