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

Question

我想構建一個下拉菜單，其中的項目不僅包含文本，還包含圖像。 圖像應從 url 加載。 我正在使用下拉菜單和伴奏來加載圖像。 但是當我嘗試打開下拉菜單時，我得到 java.lang.IllegalStateException：SubcomposeLayout 當前不支持內部測量。

我曾嘗試在我的可組合物中使用 Intrinsics，例如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

CoilImage 現在已棄用，

用這個

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

Answer 2

正如您在錯誤中提到的，這已經在 Accompanist 的 v0.8.0 中修復。 不過，您需要使用新的rememberCoilPainter() ，而不是已棄用的CoilImage() 。