kotlin Jetpack合成snackbar未显示在屏幕底部

gmxoilav 于 2023-03-03 发布在 Kotlin

关注(0)|答案(2)|浏览(171)

我尝试了下面的代码，发现屏幕底部没有显示snackbar。我的任务是在单击按钮时显示snackbar。我在函数DisplaySnackBarOnClik（）的列中编写了与显示按钮相关的代码。显示snackbar的代码在MySnackBar（）中编写。有人能通过观察下面的代码帮助我在屏幕底部显示snackbar吗？

@Composable 
fun DisplaySnackBarOnClik() {

    var canShowSnackBar by remember {
        mutableStateOf(false)
    }

Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(5.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

Button(
              onClick = { canShowSnackBar = ! canShowSnackBar },
              modifier = modifier,
              enabled = isEnabled,
              elevation =  ButtonDefaults.elevation(
                       defaultElevation = 10.dp,
                       pressedElevation = 15.dp,
                       disabledElevation = 0.dp
             ),
             colors = ButtonDefaults.buttonColors(
             backgroundColor = colorResource(R.color.cgux_primary_700),
             contentColor = colorResource(R.color.white)
        )
            ) {
        Text(text = "Show Snack Bar")
    }

 if (canShowSnackBar) {
            MySnackbar("Hello, Snackbar!", "Dismiss")
        }

}

@Composable fun MySnackbar(
    message: String, actionLabel: String, duration: SnackbarDuration = SnackbarDuration.Short
) {
    val snackbarHostState = remember { SnackbarHostState() }

    LaunchedEffect(snackbarHostState) {
        snackbarHostState.showSnackbar(message, actionLabel, duration = duration)
    }
    Box(
        Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter
    ) {
        SnackbarHost(
            hostState = snackbarHostState
        )
    }
}

kotlin

来源：https://stackoverflow.com/questions/75584780/jetpack-compose-snackbar-not-displayed-at-bottom-of-screen

2条答案

按热度按时间

bzzcjhmw1#

发生这种情况是因为Box和SnackbarHost位于Column和verticalScroll内部。
您必须将Box移到可滚动列之外。

Column() {

    var canShowSnackBar by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(5.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button()
    }

    if (canShowSnackBar) {
        MySnackbar("Hello, Snackbar!", "Dismiss")
    }

}

赞(0）回复(0）举报 2023-03-03

dxxyhpgq2#

你必须像这样把你的东西 Package 在盒子里。它的基本结构如下

Box {
   Column {
      Button()
    }
    MySnackbar()
}

最重要的是，你可以把盒子从你的MySnackbar组合中移开。

详细答案

@Composable
fun DisplaySnackBarOnClik() {
    var canShowSnackBar by remember {
        mutableStateOf(false)
    }

    Box(
        Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomCenter,
    ) {
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .fillMaxWidth().padding(bottom = 60.dp),
            verticalArrangement = Arrangement.spacedBy(5.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Button(
                onClick = { canShowSnackBar = !canShowSnackBar },
                enabled = true,
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 10.dp,
                    pressedElevation = 15.dp,
                    disabledElevation = 0.dp,
                ),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = colorResource(R.color.purple_200),
                    contentColor = colorResource(R.color.white),
                ),
            ) {
                Text(text = "Show Snack Bar")
            }
        }
        if (canShowSnackBar) {
            MySnackbar("Hello, Snackbar!", "Dismiss")
        }
    }
}

@Composable
fun MySnackbar(
    message: String,
    actionLabel: String,
    duration: SnackbarDuration = SnackbarDuration.Short,
) {
    val snackbarHostState = remember { SnackbarHostState() }

    LaunchedEffect(snackbarHostState) {
        snackbarHostState.showSnackbar(message, actionLabel, duration = duration)
    }

    SnackbarHost(
        hostState = snackbarHostState,
    )
}

赞(0）回复(0）举报 2023-03-03

我来回答

kotlin Jetpack合成snackbar未显示在屏幕底部

2条答案

相关问题

热门标签

最新问答