android - 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

要嵌入VerticalScroller到 Column 中，您需要使用FlexColumn然后嵌入VerticalScroller到flexible函数中。对于“名单”Text使用inflexible

什么是 FlexColumn？

将其子项按垂直顺序放置的可组合项，根据其弹性权重分配子项高度。

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

 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，您可以使用verticalScroll修饰符：

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

Answer 3

与1.0.0-beta02您一起可以使用LazyColumn.
就像是：

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