我在一个可滚动的列中有我的内容。如果没有足够的内容可以滚动,我想在屏幕底部放置一些按钮,同时在可滚动内容的底部。我试过太空人和举重器,但似乎都不管用。
这是我的测试代码。
@Composable
fun TestScrollableContentWithButton() {
var numItems by remember { mutableStateOf(20) }
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
ScrollableContent(numItems = numItems)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 20.dp),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Button(onClick = { numItems++ }) { Text("Add Item") }
Button(onClick = { numItems = 0 }) { Text("Clear Items") }
}
}
}
@Composable
fun ScrollableContent(modifier: Modifier = Modifier, numItems: Int) {
repeat(numItems) {
Text(modifier = Modifier.padding(20.dp), text = "Test Text $it")
}
}
这里有一些示例图像显示代码的行为。在第一幅图中,红色的轮廓是我想要发生的。如果没有足够的内容可供滚动,则按钮应粘在屏幕底部。第二幅图显示,如果用户一直滚动到底部,按钮是可见的。
编辑:为了清楚起见,这是第3张图像,显示按钮在用户一直滚动到底部之前不可见。
第二个和第三个图像是代码的正确和当前行为。只有第一个图像包含了我想要发生的事情。
我用普通的xml重新制作了这个来显示我想要的。https://i.imgur.com/k30A4mj.mp4这显示了当没有足够的内容可滚动时,按钮粘在底部,如果有足够的内容可滚动,则按钮被向下推到可滚动内容的底部。
2条答案
按热度按时间wyyhbhjk1#
更新答案:
明白了,当有很多项目时,按钮不应该是可见的。然后我想你可以简单地使用一个
Space
来填充项目和按钮之间的可用空间。我试过了,它对我有效。:)原始答案-无效:
我不认为你需要把按钮的容器放在可滚动的内容中,因为它总是位于底部:)
我们可以解决这个问题,但是只将文本项放入可滚动列中,并有一个常规的父列,其中也包括按钮的容器。希望能说得通。
下面是应该工作的代码。我把可组合的东西分开了,所以它们是可重复使用的,更具可读性,但这要由你来决定。:)
db2dz4w82#
使用Jetpack Compose中的Box和Column组合项来创建您想要的布局,包括一个可滚动的Column和当没有足够的信息可滚动时显示在屏幕底部的按钮。
本图中的ScrollableColumn包括一个符号化可滚动信息的Column。Text可组合对象可以与您自己的内容交换。
ScrollableColumn和Button被放置在Box组合组件中,后者充当容器。使用对齐修改器,按钮将位于屏幕的底部中心。
通过这种布局结构,当有足够的材料可以滚动时,按钮将始终位于可滚动内容的底部,而不管屏幕上是否有足够的内容可以滚动。