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

Question

我的内容位于可滚动的列中。如果没有足够的内容可以滚动，我想在屏幕底部放置一些按钮，同时位于可滚动内容的底部。我一直在尝试垫片和重物，但似乎没有任何效果。

这是我的测试代码。

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

这里有一些示例图像，显示了代码的行为方式。在第一张图片中，红色轮廓是我想要发生的情况。如果没有足够的内容可供滚动，按钮应粘在屏幕底部。第二张图片显示，如果用户一直滚动到底部，按钮是可见的。

编辑：为了清楚起见，这是第三张图像，显示按钮在用户一直滚动到底部之前不可见。

第二张和第三张图片是代码的正确且当前的行为。只有第一张图片包含我想要发生的事情。

我用常规 xml 重新制作了它以显示我想要的内容。 https://i.imgur.com/k30A4mj.mp4 这显示了当没有足够的内容可以滚动时按钮粘在底部，如果有足够的内容可以滚动则按钮被推到可滚动内容的底部。

Answer 1

更新的答案：

明白了，当有很多项目时，按钮不应该是可见的。然后我认为您可以简单地使用 aSpace来填充项目和按钮之间的可用空间。我尝试过，它对我有用。:)

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