如何在 Jetpack Compose 材料 3 中显示小吃栏

Question

我开始学习 Jetpack Compose，如何使用 Material3 依赖项实现一个简单的小吃栏看起来令人困惑。

文档显示我需要一个脚手架，并且它需要带有填充的内容（？）。我需要将屏幕可组合放在 lambda 脚手架中吗？如何将消息文本传递到 Snackbar？我有一个简单的流收集器，用于来自视图模型的事件，我想将错误文本传递到小吃栏。

Test()
LaunchedEffect(Unit) {
    viewModel.loginEvent.collect {
        when (it) {
            is LoginViewModel.LoginEvent.Error -> {
             // show snackbar with it.error
            }
       
            is LoginViewModel.LoginEvent.Success -> {
              // 
            }
        }
    }
}

@Composable
fun Test() {
    Box(modifier = Modifier.fillMaxSize()) {
//my composable screen
}

Answer 1

您可以使用scaffoldHostState在脚手架内显示小吃栏，是的，您应该使用scaffoldPadding作为topAppBar、navigationBar等的填充...

你能试试这个吗？

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Screen() {
    val snackbarHostState = remember { SnackbarHostState() }

    val localCoroutineScope = rememberCoroutineScope()

    LaunchedEffect(Unit) {
        viewModel.loginEvent.collect {
            when (it) {
                is LoginViewModel.LoginEvent.Error -> {
                    // show snackbar with it.error
                    localCoroutineScope.launch {
                        snackbarHostState.showSnackbar(
                            message = "Error message"
                        )
                    }
                }
                // ...
            }
        }
    }

    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) }
    ) { scaffoldPadding ->
        Box(
            modifier = Modifier
                .padding(scaffoldPadding)
                .fillMaxSize()
        ) {
            // your composables ...
        }
    }
}