如何创建一个 Jetpack Compose Column，其中中间的孩子是可滚动的，但所有其他孩子总是可见的？答案

【问题标题】：How do I create a Jetpack Compose Column where a middle child is scrollable but all of the other children are always visible?如何创建一个 Jetpack Compose Column，其中中间的孩子是可滚动的，但所有其他孩子总是可见的？
【发布时间】：2021-06-28 14:11:33
【问题描述】：

我正在创建一个 Jetpack 撰写对话框，其中包含一个列，其中所有元素都应该始终可见，除了第三个元素，它是一个文本，如果文本不适合屏幕空间，则应该可以滚动。我几乎通过仅用于该 Text 元素的辅助可滚动列来实现这一点。但是，如果有很多文本，此实现会将底部子项（按钮）推到视野之外。这是我的代码：

@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 = {}
    )
}

当只有一段文本时，它（正确地）看起来是这样的：

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

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

只需将weight 修饰符分配给可滚动的Column。
比如：

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

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

            ) {
                Text("...")
            }

            Button() 
            
        }

【讨论】：

哦，哇，这正是我想要的，谢谢！
实际上当我添加这个时，如果我有大量文本，它看起来是正确的，但是对于少量文本，Column 仍然延伸得太远，将父视图扩展到最大高度和导致可滚动文本底部和按钮之间出现视觉间隙。

【解决方案2】：

将此用于您的中间（可滚动）组合

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

    ) {
        Text("Your text here")
    }

关键是使用fill = false。

【讨论】：

“列”修饰符下的属性“权重”不存在！
没错，这一列在另一列中，所以它有一个 ColumnScope 接收器。