Jetpack Compose：如何向上移动小吃店的 floatingActionButton？答案

【问题标题】：Jetpack Compose : How to move up the floatingActionButton for snackbar?Jetpack Compose：如何向上移动小吃店的 floatingActionButton？
【发布时间】：2021-04-16 17:41:32
【问题描述】：

我正在尝试使浮动操作按钮向上移动以腾出空间让 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"
}

【问题讨论】：

您可以使用Modifier::offset 函数并根据状态手动将其向上移动。
@u2gilles 想出一个解决方案？

标签： kotlin android-jetpack-compose floating-action-button android-snackbar compose-desktop

【解决方案1】：

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

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

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

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

（因措辞问题略有修改）

【讨论】：