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")
                            }
                        }
                    }
                }
            }
        }

    }
}

标签： androidandroid-jetpack-compose

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