如何在使用Jetpack撰写添加新元素后调整大小?

Question

我写了下面的可组合(如图对话框所示)。当视图状态。= 0，则显示另一个可组合。这一切都很好，但是当新的可组合内容变得可见时，框的高度不会调整。这将导致"不可见溢出"，即许多项目不再可见。是否有一种方法可以使框动态，以便在新元素变为可见时调整高度?

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

有。您可以在方框修饰符上使用animateContentSize然后像下面这样声明一个animationSpec:

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

现在，如果AlertMessage出现，它将动画框的大小。您还可以使用这种方法创建可扩展的卡。

这个视频可能对你也有帮助。