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

问题描述

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

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

请在 Compose for desktop 上找到我的代码（但在 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"
}

解决方法

我在 compose 的 slack 频道 (kotlinlang.slack.com,https://kotlinlang.slack.com/archives/CJLTWPH7S/p1627831971210600) 中问了同样的问题。

这是 Google 员工 Ian Lak 的回答：

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

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

（略有修改，因为有一些措辞问题）