【Jetpack Compose】 如何让snackbar 显示在键盘之上

634 阅读1分钟

当键盘显示时,在Jetpack Compose 中showSnackbar 发现Snackbar被键盘给盖住了,怎么在键盘显示的时候让Snackbar显示在键盘之上呢?

注意:这里Compose 版本是1.2.0-rc3

1. 在Activity的onCreate设置 setDecorFitsSystemWindows

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
        MyAppTheme {
            SnackbarExample()
        }
    }
}

2. 给SnackbarHost设置imePadding

@Composable
fun SnackbarExample() {
    val scope = rememberCoroutineScope()
    val scaffoldState: ScaffoldState = rememberScaffoldState()
    Scaffold(
        modifier = Modifier.statusBarsPadding(),
        scaffoldState = scaffoldState,
        snackbarHost = {
            SnackbarHost(
                hostState = it,
                modifier = Modifier
                    .navigationBarsPadding()
                    .imePadding()
            )
        },
        topBar = {
            CenterTopAppBar(title = "SnackbarExample")
        }) {
        Row(
            Modifier
                .padding(it)
                .padding(10.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            val (text, setText) = remember {
                mutableStateOf("")
            }

            OutlinedTextField(value = text, onValueChange = setText)

            Button(onClick = {
                scope.launch {
                    scaffoldState.snackbarHostState.showSnackbar("SnackbarExample")
                }
            }) {
                Text("Button")
            }
        }
    }
}

最后如图,改好了,让Snackbar显示在键盘之上。

image.png image.png

后来发现在模拟器上可以,在我自己的华为手机上又不行

最后在AndroidManifest.xml 加入

android:windowSoftInputMode="adjustResize"

就好了