融會貫通Android?Jetpack?Compose中的Snackbar

更新時間：2023年01月11日 11:42:00 作者：我是綠色大米呀

這篇文章主要為大家介紹了融會貫通Android?Jetpack?Compose中的Snackbar方法及使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

開始寫Compose的時候，真的有點不習慣。思考方式和以前完全不同，有點類似ReactNative。寫習慣了之后，還真有點欲罷不能，行云流水~

Snackbar感覺就是Toast Plus版，可以自定義視圖，還可以進行交互，可以用在很多地方實現(xiàn)意想不到的效果。

主要的實現(xiàn)思路

主要的實現(xiàn)思路有兩部步：

1.Snackbar的控制邏輯
2.Snackbar的UI部分

Snackbar UI部分

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        actionBar?.hide()
        setContent {
            ContentView(Modifier.fillMaxSize())
        }
    }
}
@Composable
fun ContentView(modifier: Modifier) {
    val context = LocalContext.current
    val snackBarState = remember {
        SnackbarHostState()
    }
    val coroutineScope = rememberCoroutineScope()
    Surface(
        color = Color.DarkGray,
        modifier = modifier.fillMaxSize()
    ) {
        Box(modifier = modifier.fillMaxSize()) {
            Button(
                modifier = modifier
                    .align(Alignment.Center)
                    .wrapContentSize()
                ,
                onClick = {
                    coroutineScope.launch {//showSnackbar為suspend函數(shù)，要在協(xié)成調(diào)用
                        snackBarState.showSnackbar("")
                    }
                },
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = Color.White,
                    contentColor = Color.Black
                )
            ) {
                Text(text = "顯示SnackBar", fontSize = 16.sp)
            }
            SnackbarHost(
                modifier = modifier.align(Alignment.BottomCenter),
                hostState = snackBarState
            ) {
                // custom snackBar
                CustomSnackBar(
                    title = "我是綠色大米呀",
                    content = "關(guān)注點一波~下次不迷路哦！",
                    profileImageResource = R.drawable.head,
                    actionImageResource = R.drawable.back_black_bg,
                    onAction = {}
                )
            }
        }
    }
}
@Composable
fun CustomSnackBar(
    modifier: Modifier = Modifier,
    title: String,
    content: String,
    profileImageResource: Int,
    actionImageResource: Int,
    onAction: () -> Unit
) {
    Snackbar(
        elevation = 0.dp,//去掉陰影
        backgroundColor = Color.Transparent
    ) {
        Box(
            modifier = modifier
                .fillMaxWidth()
                .wrapContentHeight()
        ) {
            Column(
                modifier = modifier
                    .padding(top = 10.dp)
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(10.dp))
                    .background(
                        Brush.verticalGradient(
                            colors = listOf(
                                Color(android.graphics.Color.parseColor("#0ac1ff")),
                                Color(android.graphics.Color.parseColor("#fb2c38"))
                            )
                        )
                    )
                    .padding(start = 78.dp, top = 8.dp, bottom = 12.dp, end = 8.dp),
                horizontalAlignment = Alignment.Start
            ) {
                Text(
                    modifier = modifier.
                        padding(top = 5.dp),
                    text = title,
                    color = Color.White,
                    fontWeight = FontWeight.Bold,
                    fontSize = 22.sp
                )
                Spacer(modifier = modifier.padding(vertical = 2.dp))
                Text(
                    text = content,
                    color = Color.White,
                    fontStyle = FontStyle.Italic,
                    fontSize = 15.sp
                )
            }
            Column(
                modifier = modifier
                    .padding(start = 16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Card(
                    elevation = 6.dp,
                    shape = RoundedCornerShape(8.dp)
                ) {
                    Image(
                        painter = painterResource(profileImageResource),
                        contentScale = ContentScale.Crop,
                        contentDescription = null,
                        modifier = modifier.size(50.dp)
                    )
                }
            }
            Image(
                painter = painterResource(actionImageResource),
                contentDescription = null,
                contentScale = ContentScale.Fit,
                modifier = modifier
                    .align(Alignment.BottomEnd)
                    .padding(bottom = 10.dp, end = 10.dp)
                    .size(23.dp)
                    .rotate(180f)
                    .clickable(
                        interactionSource = MutableInteractionSource(),
                        indication = null,
                        onClick = onAction
                    )
            )
        }
    }
}

不知道為什么，我的這個Snackbar一直出現(xiàn)在屏幕頂部，如果想讓它出現(xiàn)在底部應(yīng)該如何實現(xiàn)？更多關(guān)于Android Jetpack Compose Snackbar的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: