请教个 Jetpack Compose 的布局问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 281 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想做一个类似物流的一个页面类似下图，但是左边那条绿线无法显示出来。（代码和图片在后面）

Row(modifier = Modifier.height(IntrinsicSize.Min)) 并且把图片 grid 注释掉，那么绿线是正常显示的
Row(modifer = Modifier.fillMaxHeight)并且设置 grid 的 height ，也无法显示

@Composable fun ListDemo() { var titles = listOf("1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2") LazyColumn(modifier = Modifier .fillMaxSize()) { itemsIndexed(titles) { index, item -> Surface(modifier = Modifier .fillMaxWidth()) { Column(modifier = Modifier .padding(horizOntal= 18.dp)) { Row(modifier = Modifier .padding(vertical = 8.dp), verticalAlignment = Alignment.CenterVertically) { Box(modifier = Modifier .size(24.dp) .background(Color.Red)) } Row(modifier = Modifier .fillMaxWidth()) { Box(modifier = Modifier .width(24.dp) .fillMaxHeight(IntrinsicSize.Min), cOntentAlignment= Alignment.Center){ // TODO show this green line Box(modifier = Modifier .fillMaxHeight() .width(1.dp) .background(Color.Green)) } Spacer(Modifier.width(8.dp)) Column(modifier = Modifier .fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) { Row(modifier = Modifier .fillMaxWidth()) { Text( text = "Time：", fOntSize= 14.sp, color = Color.Gray, modifier = Modifier .width(100.dp) ) Spacer(Modifier.width(4.dp)) Text( text = "2023-03-02 18:34:07", fOntSize= 14.sp, color = Color.Gray ) } val images = listOf("1","2","3","4") LazyVerticalGrid( columns = GridCells.Fixed(3), horizOntalArrangement= Arrangement.spacedBy(6.dp), verticalArrangement = Arrangement.spacedBy(6.dp), modifier = Modifier.heightIn( max = 1000.dp) ) { items(images) { pic -> Box( modifier = Modifier .aspectRatio(1f) .background(Color.Gray) ) { Text( text = pic ) } } } } } Spacer(Modifier.height(8.dp)) } } } } } @Preview @Composable fun ListDemoPreview() { ListDemo() }

Jetpack Compose

布局问题

绿线

18 条回复 2025-03-14 09:56:13 +08:00

vigroid

281 天前

Column( weight = 1f ) , 不要加上 fillMaxWidth()。占据剩余的空间应该用 weight = 1f

rrubick

281 天前

@vigroid
不行，右侧 Column 用 weight(1) 或者 fillMaxWidth() 这里是同样的效果

qwell

281 天前

Row(modifier = Modifier.height(IntrinsicSize.Min)) {
Box(modifier = Modifier
.width(24.dp)
.fillMaxHeight(),
cOntentAlignment= Alignment.Center){
Box(modifier = Modifier
.fillMaxHeight()
.width(1.dp)
.background(Color.Green))
}
Spacer(Modifier.width(8.dp)) Column(modifier = Modifier
.weight(1f),
verticalArrangement = Arrangement.spacedBy(8.dp)) {...}
}
这样，有一点是两个 LazyLayout 滑动冲突了

rrubick

281 天前

@qwell #3
不行，还是会报错
```shell
java. lang. IllegalStateException: Asking for intrinsic measurements of SubcomposeLayout layouts is not supported. This includes components that are built on top of SubcomposeLayout, such as lazy lists, BoxWithConstraints, TabRow, etc. To mitigate this: - if intrinsic measurements are used to achieve 'match parent' sizing, consider replacing the parent of the component with a custom layout which controls the order in which children are measured, making intrinsic measurement not needed - adding a size modifier to the component, in order to fast return the queried intrinsic measurement.
```

jojo0830

281 天前

动态获取 Column 的高度吧。
Column(
modifier = Modifier
.fillMaxWidth()
.onSizeChanged {
sizeInDp = with(density) {
it.width.toDp() to it.height.toDp()
}
},
verticalArrangement = Arrangement.spacedBy(8.dp)
)，
然后把高度给到 box 。
Box(
modifier = Modifier
.width(24.dp)
.height(sizeInDp.second)
.background(Color.Red),
cOntentAlignment= Alignment.Center
)

jojo0830

281 天前

@jojo0830 但是你这样绿色也没跟红色方块接触，不好看，重新调整布局吧

qwell

281 天前 via Android

@magic3584 因为你嵌套了两个 lazylayout ，你把里面的 lazyverticalgrid 设个固定高度

od66666666

281 天前

遇 size 不决，直接 onGloballyPositioned

Row(modifier = Modifier.fillMaxWidth()) {
val density = LocalDensity.current
var columnHeight by remember { mutableStateOf(0.dp) }
Box(
modifier = Modifier
.height(columnHeight)
.width(24.dp),
cOntentAlignment= Alignment.Center
) {
...
}
Spacer(Modifier.width(8.dp))
Column(modifier = Modifier
.onGloballyPositioned { layoutCoordinates ->
columnHeight =
with(density) { layoutCoordinates.size.height.toDp() }
}
.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(8.dp)) {
...
}
}

lisongeee

281 天前

上面报错已经说得很明白了，你的子布局有无法确定 size 的组件 LazyVerticalGrid

LazyXXX 就是前端概念里的虚拟列表，必须要一个容器高度才能计算虚拟滚动

或者换成自定义 Column{Row{}}

zeropercenthappy

281 天前

从你的布局来看，内部的列表应该没有必要使用 LazyVerticalGrid ，这里应该是 Lazy 控件导致的高度计算问题。考虑直接换成 FlowRow 吧。

leiiiooo

281 天前

使用 Canvas 自定义吧，我也试了半天

lisongeee

281 天前

https://gist.github.com/lisonge/b689ea150c7df8ae2618c4f73203ad9e

整了半天，发现在外面套个 box 就行，代码和运行截图都在上面的 gist 里了

rrubick

280 天前

@jojo0830 #5
您这个 density 从哪来的？
import androidx.compose.ui.draw.EmptyBuildDrawCacheParams.density
一直报错，`Cannot access 'EmptyBuildDrawCacheParams': it is private in file`

rrubick

280 天前

@qwell #7
图片是宽高比 1:1 ，想让它自动去布局。如果设置固定高度的话需要去计算

jojo0830

280 天前

@magic3584 #13
顶层创建一个呗：
val density = LocalDensity.current
var sizeInDp by remember { mutableStateOf(0.dp to 0.dp) }

rrubick

280 天前

@jojo0830 #5
感谢，可以了。请忽略 13 楼回复

rrubick

280 天前

@od66666666 #8
感谢，您这个跟 5 楼的差不多

rrubick

280 天前

@lisongeee #12
您的布局方式跟我的不太一样，我学一下