如何创建一个 Jetpack Compose Column,其中中间的子项可滚动,但所有其他子项始终可见?

Eug*_*ene 63 android android-jetpack-compose

我正在创建一个 Jetpack Compose 对话框,其中包含一个列,其中所有元素都应始终可见,但第三个元素除外,第三个元素是一个文本,如果文本不适合屏幕空间,则该文本应该是可滚动的。我几乎通过仅用于该文本元素的辅助可滚动列实现了这一点。但是,如果有大量文本,此实现会将底部子项(按钮)推到视图之外。这是我的代码:

@Composable
fun WelcomeView(
    viewModel: WelcomeViewModel,
    onDismiss: () -> Unit
) {
    Dialog(onDismissRequest = onDismiss) {
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(Spacing.extraLarge))
                .background(Colors.backgroundBase)
                .padding(all = Spacing.medium)
        ) {
            Column {
                IconView(
                    name = IconViewNames.RUNNING_SHOE,
                    size = IconViewSizes.LARGE,
                    color = Colors.primaryBase
                )

                Text(
                    viewModel.title,
                    style = Text.themeBillboard,
                    modifier = Modifier.padding(bottom = Spacing.medium)
                )

                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                ) {
                    Text(
                        viewModel.message,
                        style = Text.themeHeadline,
                        modifier = Modifier.padding(bottom = Spacing.medium)
                    )
                }

                Button(
                    onClick = onDismiss,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(Spacing.medium))
                        .background(Colors.primaryBase)
                ) {
                    Text(
                        "Continue",
                        style = Text.themeHeadline.copy(color = textExtraLight),
                        modifier = Modifier.padding(all = Spacing.extraSmall)
                    )
                }
            }
        }
    }
}

@Preview
@Composable
fun PreviewWelcomeView() {
    WelcomeView(
        viewModel = WelcomeViewModel(
            firstName = "Wendy",
            htmlWelcomeMessage = PreviewTextFixtures.threeParagraphs
        ),
        onDismiss = {}
    )
}
Run Code Online (Sandbox Code Playgroud)

当只有一段文本时,它(正确地)看起来是这样的:

在此输入图像描述

但这就是当有三个段落时的样子。文本正确滚动,但请注意缺少“继续”按钮:

在此输入图像描述

Fra*_*esc 137

将其用于您的中间(可滚动)可组合项

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .weight(weight = 1f, fill = false)
) {
     Text("Your text here")
}
Run Code Online (Sandbox Code Playgroud)

关键是要用fill = false

  • 当然可以,该列位于另一列内,因此它有一个 ColumnScope 接收器。 (13认同)
  • “Column”修饰符下的属性“weight”不存在! (5认同)

Gab*_*tti 43

只需应用于可滚动Column修饰符即可weight
就像是:

    Column (verticalArrangement= Arrangement.SpaceBetween) {
            Text(
                "viewModel.title",
            )

            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .weight(1f, false)

            ) {
                Text("...")
            }

            Button() 
            
        }
Run Code Online (Sandbox Code Playgroud)

  • 哦,哇,这正是我正在寻找的,谢谢! (2认同)