Jetpack Compose中boxHeight更新后Image未重组问题咨询

不需要手动触发重组，你的问题根源在于手动同步高度的逻辑存在布局时机冲突，而且完全可以用Compose原生的布局Modifier直接实现需求。

问题分析 #

你通过onGloballyPositioned获取Box高度并赋值给boxHeight，虽然mutableStateOf状态更新理论上会触发重组，但这里存在布局依赖循环：Box的高度由Column和Image共同决定，而Image的高度又依赖Box的计算高度，可能导致Compose布局系统没有正确响应这次状态变化。更重要的是，这个需求根本不需要手动获取高度。

解决方案 #

直接给Image添加.fillMaxHeight() modifier，替代手动设置.height(boxHeight)，同时删除所有和boxHeight相关的冗余代码。修改后的完整代码如下：

@Composable
fun BadgesCardView(
    modifier: Modifier = Modifier,
    onClick: () -> Unit
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .background(color = Colors.blue30, shape = RoundedCornerShape(size = 8.dp))
            .noRippleClickable { onClick() },
    ) {
        Column(
            modifier = Modifier
                .wrapContentHeight()
                .wrapContentWidth(),
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                modifier = Modifier
                    .padding(
                        horizontal = dimensionResource(id = R.dimen.spacing_24),
                        vertical = dimensionResource(id = R.dimen.spacing_16)
                    ),
                text = stringResource(id = R.string.badges_mepage_card_header),
                textAlign = TextAlign.Start,
                style = TextStyle(
                    fontSize = 32.sp,
                    fontFamily = Typography.konga,
                    color = Colors.primary30
                )
            )
            Text(
                modifier = Modifier
                    .padding(
                        start = dimensionResource(id = R.dimen.spacing_24),
                        top = dimensionResource(id = R.dimen.spacing_0),
                        end = dimensionResource(id = R.dimen.spacing_16),
                        bottom = dimensionResource(id = R.dimen.spacing_16)
                    ),
                text = stringResource(id = R.string.badges_mepage_card_body),
                textAlign = TextAlign.Start,
                style = Typography.heading5.copy(
                    textAlign = TextAlign.Start,
                    color = Colors.neutral80
                )
            )
        }
        Image(
            modifier = Modifier
                .fillMaxHeight()
                .padding(horizontal = dimensionResource(id = R.dimen.spacing_16))
                .align(Alignment.CenterEnd),
            painter = painterResource(R.drawable.gfx_falling_badges),
            contentDescription = null,
            contentScale = ContentScale.Fit
        )
    }
}

方案说明 #

• .fillMaxHeight()会让Image自动匹配父容器（Box）的高度，而Box的高度由Column的内容自然撑开，完美实现Image与Box同高的设计要求。
• 这种方式彻底避免了状态更新带来的布局时机问题，代码更简洁，完全符合Compose的声明式布局思想。

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