Question

我想构建一个下拉菜单，其中的项目不仅包含文本，还包含图像。图像应该从一个 url 加载。我正在使用下拉菜单和伴奏来加载图像。但是当我尝试打开下拉菜单时，我得到 java.lang.IllegalStateException：SubcomposeLayout 目前不支持内部测量。

我曾尝试在我的 Composables 中尝试使用内部函数，例如 https://developer.android.com/codelabs/jetpack-compose-layouts#10，但没有奏效。如果我不使用 CoilImage，而是使用 Image 从资源中获取画家，则一切正常。

有办法解决吗？

@Composable
fun DropdownChildren(
    items: List<ChildUiModel>,
    chosenChild: ChildUiModel?,
    onChildChosen: (ChildUiModel) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }
    var selectedIndex by remember { mutableStateOf(0) }
    Box(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.TopStart)) {
        Row(modifier = Modifier
            .fillMaxSize()
            .clickable(onClick = { expanded = true })) {
            ChildrenDropdownMenuItem(
                imageUrl = "https://oneyearwithjesus.files.wordpress.com/2014/09/shutterstock_20317516.jpg",
                text = items[selectedIndex].name?: "No name",
                chosen = false)
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
                .requiredSizeIn(maxHeight = 500.dp)
        ) {
            items.forEachIndexed { index, child ->
                DropdownMenuItem(
                    modifier = Modifier
                    .background(color = if (child.id == chosenChild?.id) appColors.secondary else appColors.primary),
                    onClick = {
                        expanded = false
                        selectedIndex = index
                        onChildChosen(items[selectedIndex])
                }) {
                    ChildrenDropdownMenuItem(
                        imageUrl = "https://oneyearwithjesus.files.wordpress.com/2014/09/shutterstock_20317516.jpg",
                        text = child.name,
                        chosen = child.id == chosenChild?.id)

                }
            }
        }
    }
}

@Composable
fun ChildrenDropdownMenuItem(
    imageUrl: String,
    text: String,
    chosen: Boolean
){
    Row(){
       Avatar(url = imageUrl)
        Text(text = text,
            style = AppTheme.typography.h4,
            color = if (chosen) appColors.primary else appColors.secondary,
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.CenterVertically))
    }
}

@Composable
fun Avatar(
    url: String
){
    val contentPadding = PaddingValues(8.dp, 8.dp, 12.dp, 8.dp)
    CoilImage(
        data = url,
    ) { imageState ->
        when (imageState) {
            is ImageLoadState.Success -> {
                MaterialLoadingImage(
                    result = imageState,
                    contentDescription = "avatar",
                    modifier = Modifier
                        .padding(contentPadding)
                        .clip(CircleShape)
                        .size(48.dp),
                    contentScale = ContentScale.Crop,
                    fadeInEnabled = true,
                    fadeInDurationMs = 600,
                )
            }
            is ImageLoadState.Error -> CoilImage(
                data = "https://www.padtinc.com/blog/wp-content/uploads/2020/09/plc-errors.jpg",
                contentDescription = "error",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .padding(contentPadding)
                    .clip(CircleShape)
                    .size(48.dp)
            )
            ImageLoadState.Loading -> CircularProgressIndicator()
            ImageLoadState.Empty -> {}
        }
    }
}

Answer 1

正如您在 bug 中提到的，此问题已在 Accompanist 的 v0.8.0 中修复。不过，您需要使用新的 rememberCoilPainter()，而不是已弃用的 CoilImage()。

Answer 2

CoilImage 现已弃用，

使用这个

Image(
    painter = rememberCoilPainter("https://picsum.photos/300/300"),
    contentDescription = stringResource(R.string.image_content_desc),
    previewPlaceholder = R.drawable.placeholder,
)

Jetpack Compose：不支持在 DropdownMenu 中使用 Accompanist CoilImage 加载 IntrinsicMeasurements

2 个答案: