Jetpack Compose：如何向上移动小吃栏的浮动操作按钮？

Question

我试图让浮动操作按钮向上移动，为 Snackbar 的出现腾出空间，这是使用 android xml UI 文件时的正常行为。

看起来它没有在 Scafford 中实现。

请在下面找到我迄今为止在桌面版 Compose 上的代码（但在 Android 上应该类似）：

fun main() = Window(
    title = "Box Demo",
    size = IntSize(600, 500)
) {

    MaterialTheme {

        val snackbarHostState = remember { SnackbarHostState() }

        val scaffoldState = rememberScaffoldState()

        Scaffold(
            scaffoldState = scaffoldState,

            snackbarHost = {scaffoldState.snackbarHostState },

            floatingActionButtonPosition = FabPosition.End,

            floatingActionButton = { FloatingActionButton(onClick = {}) { Text("+") } },

            topBar = { TopAppBar(title = { Text("TopAppBar") }) },

            bottomBar = { BottomAppBar() { Text("BottomAppBar") } }

        ) {
            Column(
                modifier = Modifier.fillMaxSize()
            ) {

                Button(
                    modifier = Modifier.padding(top = 20.dp, start = 20.dp),
                    onClick = {
                        GlobalScope.launch {
                            snackbarHostState.showSnackbar(
                                message = "Hey I am a snackbar",
                                actionLabel = "Hide",
                                duration = SnackbarDuration.Short
                            )
                        }
                    }
                ) {
                    Text("Show snackbar")
                }

                SnackbarHost(
                    modifier = Modifier.padding(top = 180.dp),
                    hostState = snackbarHostState,
                    snackbar = {
                        Snackbar(
                            action = {
                                TextButton(
                                    onClick = {
                                        snackbarHostState.currentSnackbarData?.dismiss()
                                    }
                                ) {
                                    Text(
                                        text = snackbarHostState.currentSnackbarData?.actionLabel ?: "",
                                        style = TextStyle(color = Color.White)
                                    )
                                }
                            }
                        ) {
                            Text(snackbarHostState.currentSnackbarData?.message ?: "")
                        }
                    }
                )
            }
        }
    }
}

我的配置：

plugins {
    kotlin("jvm") version "1.4.21"
    id("org.jetbrains.compose") version "0.2.0-build132"
}

Answer 1

我在 compose 的 slack 频道中问了同样的问题（kotlinlang.slack.com，https://kotlinlang.slack.com/archives/CJLTWPH7S/p1627831971210600）。

以下是 Google 员工 Ian Lak 的回答：

这具体是材料指南中“不要”的示例之一： https: //material.io/components/snackbars#behavior

确保视觉元素不会从下方移出（例如，当用户即将点击 FAB 时）是制作可预测 UI 的关键点之一

（因措辞问题略有修改）