我尝试在Compose中实现一个布局,其中可水平滚动的Row
的项目应该都具有相同的高度,因此较小的项目应该调整为行中最大项目的大小。我知道intrinsic size,但我就是不能让它工作。而且我不想为Row
分配固定的高度。因为Row的高度也应该是其可组合的最大子行的高度。
这是简化的布局
@Composable
fun Screen(
modifier: Modifier = Modifier,
) {
Row(
modifier = modifier
.height(IntrinsicSize.Min)
.horizontalScroll(state = rememberScrollState()),
horizontalArrangement = Arrangement.spacedBy(10.dp),
) {
Item(
text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy " +
"eirmod tempor invidunt ut labore et dolore magna aliquyam"
)
Item(
text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy " +
"eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam " +
"voluptua. At"
)
Item(
text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam"
)
}
}
@Composable
private fun Item(
modifier: Modifier = Modifier,
text: String,
) {
Column(
modifier = modifier.width(200.dp),
horizontalAlignment = Alignment.End,
verticalArrangement = Arrangement.SpaceBetween
) {
Column {
Text("Some static text")
// Dynamic text
Text(
text,
modifier = Modifier.padding(top = 5.dp)
)
}
// The space between these two composables should be flexible,
// hence the outer column with Arrangement.SpaceBetween
Button(
modifier = Modifier.padding(top = 20.dp),
onClick = {}
) {
Text("Button")
}
}
}
这就是结果
但我真正想要的是
当我将fillMaxHeight()
应用到Item
时,项目占据了整个高度,所有按钮都对齐到屏幕底部。
Jetpack合成版本:1.1.0
**更新:**这是合成中的错误,在compose-foundation
版本1.3.0-beta 01中为fixed。
7条答案
按热度按时间9ceoxa921#
此方法仅适用于列表很小的情况,因为Row()一次加载所有项(而不是延迟加载)
自合成v1.3.0起,惰性列表不支持
modifier.height(intrinsicSize = IntrinsicSize.Max)
因此,现在我们必须将Row与
modifier = modifier.height(intrinsicSize = IntrinsicSize.Max)
一起使用写入RowItem时,添加
Spacer(modifier = Modifier.weight(1f))
以填充空白空间确保添加
horizontalScroll(rememberScrollState())
以使Row可滚动,添加height(intrinsicSize = IntrinsicSize.Max)
以使所有卡片的高度为最高项。结果:
m1m5dgzv2#
我创建了一个Google不推荐的解决方案,但对我们来说效果很好。
然后,您可以配置修饰符并将其应用于所有希望具有相同最小高度的对象
这些都在LazyRow里
关于Kotlin松弛解的讨论可以在这里找到:https://kotlinlang.slack.com/archives/CJLTWPH7S/p1649956718414129
xghobddn3#
使用
SubComposeLayout
可以实现这样一个特性来设置每个元素的高度,它允许您基于新的度量标准(如具有最大宽度或高度的兄弟元素)重新测量可组合元素。你可以检查SubComposeLayout here的描述,或者我的答案,让列在这里等宽。
第二次测量中的约束是重要的,因为我们希望每个可组合具有最大高度
用途
结果
mepcadol4#
下面的例子产生了你所寻找的行为。它利用了内在的大小。
kxxlusnw5#
所描述的行为是Compose中的一个错误,于2022年2月11日发布reported。该错误已于2022年8月13日标记为已修复。但尚不清楚哪个Compose版本将包含此修复。
**更新:**该错误已在
compose-foundation
版本1.3.0-beta 01中修复。o4hqfura6#
为了解决这个问题,我在
Text()
中使用了onTextLayout
。找到最小行数并添加空间,直到我所有的文本在购物车有相同的高度。
iezvtpos7#
有点晚了,但这里是解决方案。你几乎就到了。你想要的是行高等于所有子列项目的最大高度,所以你想要的是设置行高为“IntrinsicSize.Max”。诀窍是使用一个Spacer()组成以填充任何需要填充的空间,而不影响列本身的固有高度。如果您将间隔物的重量设置为“1f”,它将填充剩余的空间。
see resulting screenshot