Jetpack组合:所有项目高度相同的行
Jetpack组合:所有项目高度相同的行
提问于 2022-02-11 12:36:32
我正在尝试实现一个布局，在这个布局中，水平滚动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
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71080209
复制相关文章
相似问题
腾讯云开发者
