VerticalScroller 在 Column 小部件中不起作用

Question

我正在尝试将 VerticalScroller 嵌入到列小部件中，但滚动行为不起作用。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        Container(alignment = Alignment.TopCenter) {
            Column {
                Padding(padding = 16.dp) {
                    Text(text = "Names")
                }
                VerticalScroller {
                    Column(crossAxisAlignment = CrossAxisAlignment.Center) {
                        (1..100).forEach {
                            Padding(padding = 8.dp) {
                                Text(text = "Name $it")
                            }
                        }
                    }
                }
            }
        }

    }
}

Answer 1

要在 Column 中嵌入 VerticalScroller，您需要使用 FlexColumn，然后在 flexible 函数中嵌入 VerticalScroller。对于 "Name List" Text 使用 inflexible

什么是 FlexColumn？

A composable that places its children in a vertical sequence, assigning children heights according to their flex weights.

要实现滚动行为，您需要尝试以下代码

 Container(alignment = Alignment.TopCenter) {
        FlexColumn {
            inflexible {
                Padding(padding = 16.dp) {
                    Text(text = "Names List")
                }
            }
            flexible(flex = 1f) {
                VerticalScroller {
                    Column {
                        (1..100).forEach {
                            Padding(padding = 8.dp) {
                                Text(text = "Name $it")
                            }
                        }
                    }
                }
            }
        }
    }

检查下面的gif

Answer 2

有了 1.0.0-beta02 你可以使用 LazyColumn.
类似于：

val items = listOf(0.100)
LazyColumn(items) { item ->
    Text(text = "Name $item")
}

Answer 3

对于发布版本 1.0.0 你可以使用 verticalScroll 修饰符：

val scrollState = rememberScrollState()
Column(
    modifier = Modifier.verticalScroll(scrollState)
) {
    Text("Test 1")
    Text("Test 2")
    Text("Test 3")
}

VerticalScroller 在 Column 小部件中不起作用

VerticalScroller is not working inside Column widget

android

android-jetpack-compose