1

我正在尝试使浮动操作按钮向上移动以为 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"
}
4

1 回答 1

4

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

以下是谷歌员工 Ian Lak 的回答:

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

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

(略有修改,因为有一些措辞问题)

于 2021-08-01T16:02:39.393 回答