融会贯通Android Jetpack Compose中的Snackbar
我是绿色大米呀 人气:0正文
开始写Compose的时候,真的有点不习惯。思考方式和以前完全不同,有点类似ReactNative。 写习惯了之后,还真有点欲罢不能,行云流水~
Snackbar感觉就是Toast Plus版,可以自定义视图,还可以进行交互,可以用在很多地方实现意想不到的效果。
主要的实现思路
主要的实现思路有两部步:
- 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函数,要在协成调用 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 = "关注点一波~下次不迷路哦!", 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一直出现在屏幕顶部,如果想让它出现在底部应该如何实现?更多关于Android Jetpack Compose Snackbar的资料请关注其它相关文章!
加载全部内容