使用 Jetpack compose 添加新元素后如何调整大小？

Question

I wrote the composable below (shown as dialog). When viewState.errorCode != 0, another composable is shown. This all works fine, but the height of the box doesn't adjust when the new composable becomes visible.This results in an 'invisible overflow' whereby a number of items are no longer visible. Is there a way to make the box dynamic so that it adjusts in height when a new element becomes visible?

Box(modifier = Modifier
    .clip(RoundedCornerShape(4.dp))) {
    Column(
        modifier = Modifier
            .background(MaterialTheme.colors.onPrimary, MaterialTheme.shapes.large)
            .padding(12.dp)
    ) {
        Text(stringResource(R.string.verify_hint, user.email).parseBold(), fontSize = 18.textDp, fontFamily = SourceSans)

        if (viewState.errorCode != 0) {

            AlertMessage(message = stringResource(id = viewState.errorCode), color = errorColor, padding = PaddingValues(top = 12.dp))
        }

        TextField(
            value = code,
            onValueChange = { code = it },
            label = { Text(stringResource(R.string.verification_code)) },
            colors = TextFieldDefaults.textFieldColors(backgroundColor = textFieldColor),
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 12.dp, bottom = 12.dp)
        )

        NMButton(
            onClick = { viewModel.verify(user, code, verifyLogin, language = context.getLanguageBasedOnConfiguration()) },
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 0.dp, end = 0.dp),
            icon = R.drawable.ic_badge_check_solid,
            label = stringResource(R.string.verify)
        )
    }
    if (viewState.loading) {
        Loader()
    }
}

Answer 1

Yes there is. You can use animateContentSize on your box modifier then you declare an animationSpec like below:

Box(modifier = Modifier
    .animateContentSize(
        animationSpec = tween(
            durationMillis = 300,
            easing = LinearOutSlowInEasing
        )
    ).clip(RoundedCornerShape(4.dp))
)

Now if the AlertMessage appears it will animate the size of the box. You can also create expandable cards with this approach.

This video may help you too.