Jetpack Compose中获取子元素尺寸并动态设置背景图片高度

我有一个布局，内部设置了一张图片作为背景，该布局的高度会随内部内容的增加而增高。我想了解是否有办法在运行时计算布局尺寸并设置图片高度，当前图片尺寸设为matchParentSize。

布局代码如下：

ConstraintLayout(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(scrollState)
        .weight(1f)
) {

    val (qrArea, details) = createRefs()

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .background(red)
            .constrainAs(qrArea) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
    ) {
        Image(
            painter = painterResource(id = R.drawable.mes),
            contentDescription = "null",
            modifier = Modifier.fillMaxWidth().height(columnHeight.value.dp),
            contentScale = ContentScale.FillBounds
        )

        Box(
            modifier = Modifier
                .background(brush = destinationImageGradient)
                .matchParentSize()
        )

        Column(
            modifier = Modifier.onGloballyPositioned {
                columnHeight.value = it.size.height
            }
        ) {
            AppBar(
                startIcon = R.drawable.ic_back,
                backgroundColor = Color.Transparent,
                startIconClick = {}
            )

            Column(
                modifier = Modifier
                    .padding(start = 62.dp, top = 0.dp, end = 62.dp, bottom = 66.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Image(
                    painter = painterResource(id = R.drawable.qr),
                    contentDescription = null,
                    modifier = Modifier.size(qrCodeImageSize),
                    contentScale = ContentScale.Crop
                )

                Column(
                    modifier = Modifier.fillMaxWidth(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        text = ("A Random Text").uppercase(),
                        textAlign = TextAlign.Center
                    )
                    Text(
                        text = ("Random Text Two Sub").uppercase(),
                        textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}

我尝试使用onGloballyPositioned方法获取尺寸，但图片却占据了整个屏幕高度，而非包含图片和文本的Box内部内容的尺寸。对应的代码片段：

.onGloballyPositioned { layoutCoordinates ->
    columnHeight.value = layoutCoordinates.size.height
}

问题出在你监听的是内部Column的尺寸——Column默认会尽可能占据可用空间，再加上外层ConstraintLayout是fillMaxSize且可滚动，导致Column的高度被拉伸到屏幕高度。以下是两种可靠的解决方式：

方法一：直接让背景图匹配Box尺寸（推荐） #

不需要手动计算高度，直接给背景图设置matchParentSize()，它会自动匹配Box的实际高度（Box的高度由内部内容决定）：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Red)
        .constrainAs(qrArea) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
) {
    // 背景图用matchParentSize自动匹配Box尺寸
    Image(
        painter = painterResource(id = R.drawable.mes),
        contentDescription = "背景图",
        modifier = Modifier.matchParentSize(),
        contentScale = ContentScale.FillBounds
    )

    Box(
        modifier = Modifier
            .background(brush = destinationImageGradient)
            .matchParentSize()
    )

    // 内部Column不需要监听尺寸，Box会自动根据内容调整高度
    Column {
        AppBar(
            startIcon = R.drawable.ic_back,
            backgroundColor = Color.Transparent,
            startIconClick = {}
        )

        Column(
            modifier = Modifier
                .padding(start = 62.dp, top = 0.dp, end = 62.dp, bottom = 66.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.drawable.qr),
                contentDescription = null,
                modifier = Modifier.size(qrCodeImageSize),
                contentScale = ContentScale.Crop
            )

            Column(
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = ("A Random Text").uppercase(),
                    textAlign = TextAlign.Center
                )
                Text(
                    text = ("Random Text Two Sub").uppercase(),
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

方法二：监听Box的尺寸（手动设置场景） #

如果确实需要手动获取尺寸，应该监听外层Box的onGloballyPositioned，而不是内部Column：

// 定义状态存储Box高度
val boxHeight = remember { mutableStateOf(0) }

Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Red)
        .onGloballyPositioned {
            boxHeight.value = it.size.height
        }
        .constrainAs(qrArea) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
) {
    Image(
        painter = painterResource(id = R.drawable.mes),
        contentDescription = "背景图",
        modifier = Modifier.fillMaxWidth().height(boxHeight.value.dp),
        contentScale = ContentScale.FillBounds
    )

    // 其余代码保持不变...
}

关键说明 #

• 外层ConstraintLayout的fillMaxSize+verticalScroll会让子元素有无限拉伸的可能，因此必须让Box由内部内容决定高度，避免Column无限制扩展。
• matchParentSize()是Box子元素的专用Modifier，它会匹配父Box的已有尺寸，而非主动抢占空间，比手动设置高度更可靠。

内容的提问来源于stack exchange，提问作者pepperlove