kotlin 在lazyRow中重新组合时,图像对齐和大小正在更改,

rjee0c15  于 2023-04-12  发布在  Kotlin
关注(0)|答案(1)|浏览(119)

所有我想要的是创建一个具有一定高度的图像.自动改变宽度,而不打破的宽度/高度比的图像,我从网址.然后对齐它开始.当我运行此代码的第一个图像显示在屏幕上对齐到右边.滚动后图像对齐正确的左边.当我回来的第一个,他们也是正确的.首先出现的图像没有向左对齐的原因是什么?我使用implementation(“io.coil-kt:coil-compose:2.2.2”)x1c 0d1x

LazyRow(
            modifier = Modifier

                .wrapContentHeight()
                .fillMaxWidth()
        ) {
            items(favoriteBooks.size, key = { index ->
                favoriteBooks[index].id
            }) {

            val  painter = remember {
                mutableStateOf<AsyncImagePainter?>(null)
            }
                Column(
                    modifier = Modifier
                        .wrapContentWidth()
                        .wrapContentHeight()
                        .padding(end = 16.dp)
                        .border(2.dp, color = Color.Magenta),
                    horizontalAlignment = Alignment.Start
                ) {

                    painter.value = rememberAsyncImagePainter(
                        model = ImageRequest.Builder(context)
                            .data(
                                if (favoriteBooks.get(it).thumbnail.isNullOrEmpty())
                                    R.drawable.placeholder
                                else
                                    favoriteBooks.get(it).thumbnail
                            )
                            .crossfade(true)
                            .placeholder(R.drawable.placeholder)
                            //.transformations(RoundedCornersTransformation(1f))
                            .size(Size.ORIGINAL)
                            .build()
                    )
                    Image(
                        painter = painter.value as AsyncImagePainter,
                        contentDescription = null,
                        contentScale = ContentScale.FillHeight,
                        alignment =Alignment.BottomStart,
                        modifier = Modifier
                            .fillMaxHeight(0.3f)
                            .aspectRatio(1f)
                            .width(IntrinsicSize.Min)
                        //.wrapContentWidth()
                    )


                    Text(text = favoriteBooks[it].categories[0], color = Color.Green)
                    Text(text = favoriteBooks[it].title, color = MaterialTheme.colors.onSurface)
                }

            }
        }
qxsslcnc

qxsslcnc1#

这个问题似乎与第一次加载图像时LazyRow的初始化方式有关。可能有几个原因导致对齐最初无法按预期工作:

  • LazyRow在第一次呈现过程中可能没有足够的项目宽度信息,导致初始对齐不正确。
  • 首次绘制布局时,AsyncImagePainter可能没有准备好图像数据,从而导致未对齐。

要解决此问题,您可以尝试使用onSizeChanged修饰符在已知图像大小后强制重新组合。以下是如何修改代码:

Image(
    painter = painter.value as AsyncImagePainter,
    contentDescription = null,
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.BottomStart,
    modifier = Modifier
        .fillMaxHeight(0.3f)
        .aspectRatio(1f)
        .width(IntrinsicSize.Min)
        .onSizeChanged { size ->
            if (size.width > 0) {
                painter.value?.requestRedraw()
            }
        }
)

相关问题