减小 Jetpack Compose 中图标的大小以匹配行高
decrease size of icon in jetpack compose to match row height
我有以下可组合项。
@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。如何让图标变小?
您的代码实际上按预期工作 - 这就是内部计算的工作方式。
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
时,我说这个视图的大小为零,因此它不计入内部测量值。定义固有高度后,我可以使用最终约束对其进行布局。
我有以下可组合项。
@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。如何让图标变小?
您的代码实际上按预期工作 - 这就是内部计算的工作方式。
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
时,我说这个视图的大小为零,因此它不计入内部测量值。定义固有高度后,我可以使用最终约束对其进行布局。