android - ConstraintLayout 不太适用于 Jetpack Compose 中的 LazyRow
问题描述
我想将 a 的高度限制Image
为 a 的高度,LazyRow
并将每一个彼此相邻对齐。我可以用这段代码实现这个布局:
package com.example.test
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.ConstraintLayout
import androidx.compose.foundation.layout.Dimension
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.unit.dp
@Composable
fun Test() {
ConstraintLayout {
val (image, row) = createRefs()
createVerticalChain(image, row)
ARow(modifier = Modifier.constrainAs(row) {
start.linkTo(image.end)
width = Dimension.fillToConstraints
})
AImage(modifier = Modifier.constrainAs(image) {
top.linkTo(row.top)
bottom.linkTo(row.bottom)
height = Dimension.fillToConstraints
})
}
}
@Composable
fun AImage(modifier: Modifier = Modifier) {
Image(
modifier = modifier,
bitmap = imageResource(id = R.drawable.sample_ic),
)
}
@Composable
fun ARow(modifier: Modifier = Modifier) {
LazyRow(modifier = modifier) {
items((0..10).toList()) {
Text(modifier = Modifier.padding(8.dp), text = "Item: $it")
}
}
}
但我有一个小问题。LazyRow
切断最后一个元素:
尽管使用了width = Dimension.fillToConstraints
和链,但仍会出现此问题。如果你想克隆,这是 repo
解决方案
将您设置ConstraintLayout
为最大宽度,并为您添加一个结束约束ARow
:
ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
val (image, row) = createRefs()
createVerticalChain(image, row)
ARow(modifier = Modifier.constrainAs(row) {
start.linkTo(image.end)
end.linkTo(parent.end)
width = Dimension.fillToConstraints
})
AImage(modifier = Modifier.constrainAs(image) {
top.linkTo(row.top)
bottom.linkTo(row.bottom)
height = Dimension.fillToConstraints
})
}
推荐阅读
- kentico - 如何在 Kentico Kontent Management Api v2 上创建组选项卡
- python - 标签显示不正确
- xamarin - 如何使用 FFImageLoading 通过 Xamarin Forms 5 成功缓存和加载 svg 资源
- javascript - MongoDB 仅部分更新
- java - 如何在 Android 中执行一项任务,而无需打开该活动或离开该活动?
- c# - 让子弹在 TModLoader 中造成减益
- python - 如何缩小图像(matplotlib)
- reactjs - 如何在反应固定数据表中显示动态选项、行和列
- nlog - NLog 禁用特定记录器 - 真实
- c - 如何在 VSCode 内的终端中调试 c 代码?