如何将按钮正确放置在可组合屏幕下方？

Question

如何在 AnimatedScreen 下方放置一个按钮？目前，该按钮是隐藏的，不可见。 column中的元素不应该是顺序排列的，还是AnimatedScreen中的参数fillMaxSize的问题？

Surface {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AnimatedScreen(Modifier, rawId = R.raw.onboarding)
        Button(onClick = onContinueClicked) {
            Text(stringResource(R.string.continue_text))
        }
    }
}

这是我的 AnimatedScreen 的代码：

@Composable
fun AnimatedScreen(
    modifier: Modifier = Modifier,
    rawId: Int
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.fillMaxSize()
    ) {
        val compositionResult: LottieCompositionResult = rememberLottieComposition(
            spec = LottieCompositionSpec.RawRes(rawId)
        )
        ScreenAnimation(compositionResult = compositionResult)
    }
}

@Composable
fun ScreenAnimation(compositionResult: LottieCompositionResult) {

    val progress by animateLottieCompositionAsState(composition = compositionResult.value)

    LottieAnimation(
        composition = compositionResult.value,
        progress = progress,
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.FillBounds
    )
}

Answer 1

将 weight 修饰符添加到 AnimatedScreen 可组合项：

    Column(
       //..
    ) {
        AnimatedScreen(Modifier.weight(1f, false))
        Button(onClick = {  }) { }
    }

如何将按钮正确放置在可组合屏幕下方？

How can I place a button under the composable screen correctly?

android

kotlin

android-jetpack-compose

composable