Jetpack组合:所有项目高度相同的行
我正在尝试实现一个布局，在这个布局中，水平滚动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
回答 6
Stack Overflow用户
发布于 2022-08-13 16:33:12
Stack Overflow用户
发布于 2022-08-12 10:09:02
只有当您有一个小列表时，此方法才适用，因为Row()一次加载所有项(而不是懒惰)
在撰写v1.3.0时，延迟列表不支持modifier.height(intrinsicSize = IntrinsicSize.Max)
所以现在我们必须在modifier = modifier.height(intrinsicSize = IntrinsicSize.Max)中使用Row
编写RowItem时，添加Spacer(modifier = Modifier.weight(1f))以填充空空间
@Composable
fun RowItem(modifier: Modifier = Modifier) {
Surface(
modifier = modifier,
color = Color.Gray,
shape = RoundedCornerShape(12.dp)
) {
Column(
verticalArrangement = Arrangement.spacedBy(12.dp),
modifier = Modifier.padding(16.dp)
) {
repeat((1..4).random()) {
Text(
text = "item $it",
color = Color.White,
modifier = Modifier.padding(
horizontal = 16.dp,
vertical = 4.dp
)
)
}
Spacer(modifier = Modifier.weight(1f)) // this is required to push below composables to bottom
Button(onClick = {
}) { Text(text = "Button") }
}
}}确保添加horizontalScroll(rememberScrollState())使行可滚动，并添加height(intrinsicSize = IntrinsicSize.Max)使所有卡的高度达到最高项。
@Composable
fun ScrollableRow() {
Row(
Modifier
.horizontalScroll(rememberScrollState()) // this makes it scrollable
.height(intrinsicSize = IntrinsicSize.Max) // this make height of all cards to the tallest card.
.padding(horizontal = 16.dp),
content = {
repeat(4) {
RowItem(modifier = Modifier.fillMaxHeight())
}
},
horizontalArrangement = Arrangement.spacedBy(16.dp),
)}结果：
Stack Overflow用户
发布于 2022-07-25 16:18:31
我创建了一个不被Google推荐的解决方案，但是对我们来说效果很好。
fun Modifier.minimumHeightModifier(state: MinimumHeightState, density: Density) = onSizeChanged { size ->
val itemHeight = with(density) {
val height = size.height
height.toDp()
}
if (itemHeight > state.minHeight ?: 0.dp) {
state.minHeight = itemHeight
}
}.defaultMinSize(minHeight = state.minHeight ?: Dp.Unspecified)
class MinimumHeightState(minHeight: Dp? = null) {
var minHeight by mutableStateOf(minHeight)
}然后，配置并将修饰符应用于所有您希望具有相同最小高度的内容。
val density = LocalDensity.current
val minimumHeightState = remember { MinimumHeightState() }
val minimumHeightStateModifier = Modifier.minimumHeightModifier(
minimumHeightState,
density
)这些都是在一个LazyRow中
itemsIndexed(items = carouselModel.subviews, key = { _, item -> item.id }) { _, item ->
when (item) {
is BasicCard -> {
FooCard(
modifier = minimumHeightStateModifier,
section = item,
onAction = onAction
)
}
is BarCard -> {
BarVerticalCard(
modifier = minimumHeightStateModifier,
section = item,
onAction = onAction
)
}关于kotlin松弛问题的解决方案的讨论可以在这里找到：https://kotlinlang.slack.com/archives/CJLTWPH7S/p1649956718414129
https://stackoverflow.com/questions/71080209
复制相似问题
腾讯云开发者
