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嵌入到列中，您需要使用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-alpha01，您可以使用ScrollableColumn。
像这样：

ScrollableColumn(Modifier.fillMaxSize().padding(8.dp) ) {
    (1..100).forEach {
            Text(text = "Name $it")
        }
    }

注意：如果要显示的元素很少，此方法效果很好。替代方法是LazyColumnFor。

val items = listOf(0.100)
LazyColumnFor(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在“列”小部件中不起作用

3 个答案: