Блог

Главная - Вопросы по программированию - Jetpack Compose: как переместить вверх кнопку FloatingActionButton для snackbar?

Jetpack Compose: как переместить вверх кнопку FloatingActionButton для snackbar?

#kotlin #android-jetpack-compose #floating-action-button #android-snackbar #compose-desktop

#kotlin #android-jetpack-compose #плавающая кнопка действия #android-snackbar #compose-рабочий стол

Вопрос:

Я пытаюсь заставить плавающую кнопку действия переместиться вверх, чтобы освободить место для появления Snackbar, что является нормальным поведением при использовании файлов пользовательского интерфейса Android xml.

Похоже, что это не реализовано в 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"
}

Комментарии:

1. Вы можете использовать Modifier::offset функцию и перемещать ее вручную, в зависимости от состояния.

2. @u2gilles предлагает решение?

Ответ №1:

Я задавал тот же вопрос в канале slack compose (kotlinlang.slack.com , https://kotlinlang.slack.com/archives/CJLTWPH7S/p1627831971210600 ).

Вот ответ Яна Лака, сотрудника Google:

Это, в частности, один из примеров «Не делать» из руководства по материалам: https://material.io/components/snackbars#behavior

Обеспечение того, чтобы визуальные элементы не выдвигались снизу (скажем, когда пользователи собираются нажать на FAB), является одним из ключевых моментов для создания предсказуемого пользовательского интерфейса

(немного изменено, поскольку были некоторые проблемы с формулировкой)

Метки: