Compose SnackbarHost

RelinRan

已于 2024-12-20 14:25:37 修改

阅读量271

点赞数 3

分类专栏： Android Compose 文章标签： Compose SnackbarHost Snackbar

于 2024-12-14 15:15:52 首次发布

本文链接：https://blog.csdn.net/u012127961/article/details/144470807

版权

Android Compose 专栏收录该内容

35 篇文章

订阅专栏

预览

类似Toast的SnackBar提示
在这里插入图片描述

Composable

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Scaffold
import androidx.compose.material.Snackbar
import androidx.compose.material.SnackbarHost
import androidx.compose.material.SnackbarHostState
import androidx.compose.material.SnackbarResult
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
@Preview
fun SnackBarHostExample() {
    val topHostState = remember { SnackbarHostState() }
    val bottomHostState = remember { SnackbarHostState() }
    val customHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()
    Scaffold(snackbarHost = {
        //底部SnackBar
        SnackbarHost(hostState = bottomHostState)
    }) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 15.dp, end = 15.dp, top = 100.dp)
        ) {
            //显示顶部SnackBar
            Button(onClick = {
                scope.launch {
                    topHostState.showSnackbar(
                        message = "Top SnackBar Message",
                        actionLabel = "Close"
                    )
                }
            }) { Text(text = "Top SnackBar", Modifier.padding(paddingValues)) }
            //显示底部SnackBar
            Button(modifier = Modifier, onClick = {
                scope.launch {
                    val result = bottomHostState.showSnackbar(
                        message = "Bottom SnackBar Message",
                        actionLabel = "Close"
                    )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            //ActionLabel点击
                        }

                        SnackbarResult.Dismissed -> {
                            //消失逻辑
                        }
                    }
                }

            }) { Text(text = "Bottom SnackBar", Modifier.padding(paddingValues)) }
            //显示自定义底部SnackBar
            Button(modifier = Modifier, onClick = {
                scope.launch {
                    customHostState.showSnackbar(
                        message = "Custom SnackBar Message",
                        actionLabel = "Close"
                    )
                }

            }) { Text(text = "Custom SnackBar", Modifier.padding(paddingValues)) }
        }
        //顶部SnackBar
        SnackbarHost(hostState = topHostState)
        //自定义SnackBar
        PagerSnackBarHost(modifier = Modifier, hostState = customHostState)
    }
}

/**
 * 自定义SnackBarHost
 */
@Composable
fun PagerSnackBarHost(modifier: Modifier, hostState: SnackbarHostState) {
    Box(modifier = Modifier.fillMaxSize()) {
        SnackbarHost(modifier = modifier.align(Alignment.Center), hostState = hostState) { data ->
            Snackbar(
                modifier = Modifier,
                backgroundColor = Color(0XFF6750A4),//背景颜色
                contentColor = Color.White,//message文字颜色
                actionColor = Color.LightGray,//action文字颜色
                elevation = 5.dp,//边缘阴影大小
                snackbarData = data
            )
        }
    }

}