使用 Jetpack Compose 线圈

Question

我正在尝试在 LazyRow 可组合项中加载多个图像，画家状态 总是给我一个 empty状态，我不知道缺少什么。

可组合项的代码

fun NetworkImage(
    url: String,
    contentDescription: String = "",
    modifier: Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    placeholderDrawableRes: Int? = null,
    crossFade: Int? = null,
    transformations: List<Transformation>? = null,
    onLoading: @Composable () -> Unit,
    onError: @Composable () -> Unit
) {
    Box(
       modifier = modifier
    ){
        val painter = rememberImagePainter(
            data = url,
            builder = {
                placeholderDrawableRes?.let {
                    placeholder( drawableResId = it )
                }
                error(
                    R.drawable.ic_warning
                )
                crossFade?.let {
                    crossfade(durationMillis = it)
                }
                transformations?.let {
                    transformations(transformations = it)
                }
            }
        )
        val imageState = painter.state

        if(imageState is ImagePainter.State.Loading){
            onLoading()
        }
        if(imageState is ImagePainter.State.Error){
            onError()
        }
        Image(
            painter = painter,
            contentDescription = contentDescription,
            contentScale = contentScale,
            alignment = alignment,
            alpha = alpha,
            colorFilter = colorFilter
        )
    }
 }

在 LazyRow

里面

LazyRow(modifier = modifier) {
    items(items = urls){ url ->
        NetworkImage(
            url = url,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize(),
            onLoading = {
                ConstraintLayout(
                    modifier = Modifier.fillMaxSize()
                ) {
                    val indicator = createRef()
                    CircularProgressIndicator(
                        modifier = Modifier.constrainAs(indicator) {
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }
                    )
                }
            },
            onError = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_warning),
                    contentDescription = "",
                    tint = Color.Red
                )
            }
        )
    }
}

当我使用 NetworkImage Composable 时，它只能正常工作一次，但是当我在 loop 或 LazyRow ，它呈现一个空框。任何提示。

Answer 1

你最好使用伴奏 Pager(https://google.github.io/accompanist/pager/) 将 Pagers 库添加到应用程序级模块

implementation "com.google.accompanist:accompanist-pager:0.18.0"

然后使用此代码作为示例

Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
    val pagerState = rememberPagerState(pageCount = urls.size)
    HorizontalPager(state = pagerState) { index ->
        NetworkImage(
            url = urls[index],
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            onLoading = {
                ConstraintLayout(
                    modifier = Modifier.fillMaxSize()
                ) {
                    val indicator = createRef()
                    CircularProgressIndicator(
                        modifier = Modifier.constrainAs(indicator) {
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }
                    )
                }
            },
            onError = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_warning),
                    contentDescription = "",
                    tint = Color.Red
                )
            }
        )
    }
}

按原样使用 NetworkImage 可组合。

使用 Jetpack Compose 线圈

Coil using jetpack compose

android

kotlin

android-jetpack-compose

coil