在Android Compose中,如何使按钮与屏幕底部对齐,但仍保持在可滚动内容的底部?

tvz2xvvm  于 2023-05-21  发布在  Android
关注(0)|答案(2)|浏览(360)

我在一个可滚动的列中有我的内容。如果没有足够的内容可以滚动,我想在屏幕底部放置一些按钮,同时在可滚动内容的底部。我试过太空人和举重器,但似乎都不管用。
这是我的测试代码。

@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这显示了当没有足够的内容可滚动时,按钮粘在底部,如果有足够的内容可滚动,则按钮被向下推到可滚动内容的底部。

wyyhbhjk

wyyhbhjk1#

更新答案:

明白了,当有很多项目时,按钮不应该是可见的。然后我想你可以简单地使用一个Space来填充项目和按钮之间的可用空间。我试过了,它对我有效。:)

@Composable
fun TestScrollableContentWithButton() {
    var numItems by remember { mutableStateOf(20) }

    Column(
        modifier = Modifier
            .fillMaxSize()  // Add fill max size
            .verticalScroll(rememberScrollState())
    ) {
        ScrollableContent(numItems = numItems)

        // Spacer to fill up the available space
        Spacer(modifier = Modifier.weight(1f))

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

原始答案-无效:

我不认为你需要把按钮的容器放在可滚动的内容中,因为它总是位于底部:)
我们可以解决这个问题,但是只将文本项放入可滚动列中,并有一个常规的父列,其中也包括按钮的容器。希望能说得通。
下面是应该工作的代码。我把可组合的东西分开了,所以它们是可重复使用的,更具可读性,但这要由你来决定。:)

@Composable
private fun ExampleContent() {
    var numItems by remember { mutableStateOf(20) }

    // This could also be box, if you want the content to scroll behind the buttons
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        // Weight is essential here so the scrollable content is filling all the available space
        ScrollableContent(
            numItems = numItems,
            modifier = Modifier.weight(1f),
        )

        ButtonsContainer(
            onAddClicked = { numItems++ },
            onClearItemsClicked = { numItems = 0 },
        )
    }
}

@Composable
private fun ButtonsContainer(
    onAddClicked: () -> Unit,
    onClearItemsClicked: () -> Unit,
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 20.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = onAddClicked) {
            Text("Add Item")
        }

        Button(onClick = onClearItemsClicked) {
            Text("Clear Items")
        }
    }
}

@Composable
private fun ScrollableContent(
    numItems: Int,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .verticalScroll(rememberScrollState()),
    ) {
        repeat(numItems) {
            Text(
                modifier = Modifier.padding(20.dp),
                text = "Test Text $it",
            )
        }
    }
}
db2dz4w8

db2dz4w82#

使用Jetpack Compose中的Box和Column组合项来创建您想要的布局,包括一个可滚动的Column和当没有足够的信息可滚动时显示在屏幕底部的按钮。

import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ScrollableContent() {
    Box(modifier = Modifier.fillMaxSize()) {
        ScrollableColumn(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            // Add your scrollable content here
            Text("Content 1")
            Text("Content 2")
            Text("Content 3")
        }
    }

        Button(
           modifier = Modifier.align(Alignment.BottomCenter),
           onClick = { /* Handle button click */ }
        ) {
            Text("Button")
        }
    }
}

本图中的ScrollableColumn包括一个符号化可滚动信息的Column。Text可组合对象可以与您自己的内容交换。
ScrollableColumn和Button被放置在Box组合组件中,后者充当容器。使用对齐修改器,按钮将位于屏幕的底部中心。
通过这种布局结构,当有足够的材料可以滚动时,按钮将始终位于可滚动内容的底部,而不管屏幕上是否有足够的内容可以滚动。

相关问题