Android Jetpack Compose - BadgedBox、Card、ModalBottomSheet、Button（5 种类型）

一、BadgedBox

1、基本介绍

• BadgedBox 用于在图标、头像等元素右上角添加小型标志（Badge），常用于显示通知计数、状态提示等

2、演示

Box(modifier=Modifier.fillMaxSize()){BadgedBox(modifier=Modifier.align(Alignment.Center),badge={Badge()}){Icon(imageVector=Icons.Filled.Email,contentDescription="Email")}}

varcountbyremember{mutableIntStateOf(0)}Box(modifier=Modifier.fillMaxSize()){BadgedBox(modifier=Modifier.align(Alignment.Center),badge={Badge(containerColor=Color.Red,contentColor=Color.White){Text("$count")}}){Icon(imageVector=Icons.Filled.Email,contentDescription="Email")}Button(modifier=Modifier.align(Alignment.BottomCenter),onClick={count++}){Text("Add")}}

二、Card

1、基本介绍

• Card 用于创建有视觉层次的交互式内容块，通过形状和阴影突出内容

2、演示

Card(modifier=Modifier.size(width=240.dp,height=100.dp)){Text("Hello Card")}

Card(modifier=Modifier.size(width=240.dp,height=100.dp),colors=CardDefaults.cardColors(containerColor=MaterialTheme.colorScheme.primary,),){Text("Hello Card")}

Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){Card(modifier=Modifier.size(width=240.dp,height=100.dp),elevation=CardDefaults.elevatedCardElevation(defaultElevation=5.dp,),){Text("Hello Card")}}

Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center){Card(modifier=Modifier.size(width=240.dp,height=100.dp),shape=RoundedCornerShape(topStart=16.dp,topEnd=0.dp,bottomEnd=16.dp,bottomStart=0.dp),border=BorderStroke(width=2.dp,color=Color.Blue),){Text("Hello Card")}}

• Card 中子元素的排列

Card(modifier=Modifier.size(width=240.dp,height=100.dp)){Text("test1",modifier=Modifier.align(Alignment.Start))Text("test2",modifier=Modifier.align(Alignment.CenterHorizontally))Text("test3",modifier=Modifier.align(Alignment.End))}

三、ModalBottomSheet

1、基本介绍

• ModalBottomSheet 可以创建一个从屏幕底部滑出的对话框，会遮挡下层内容并要求用户交互

2、演示

var showModalBottomSheet by remember { mutableStateOf(false) } val sheetState = rememberModalBottomSheetState() Button(onClick = { showModalBottomSheet = true }) { Text("显示底部页") } if (showModalBottomSheet) { ModalBottomSheet( modifier = Modifier.fillMaxHeight(), // 点击外部触发的回调 onDismissRequest = { showModalBottomSheet = false }, sheetState = sheetState ) { Text("test content") } }

• 设置跳过部分展开状态

valsheetState=rememberModalBottomSheetState(skipPartiallyExpanded=true)

四、Button

1、基本介绍

• 按钮有 5 种类型，每种类型都有不同的外观

2、演示

val context = LocalContext.current Column(modifier = Modifier.fillMaxSize()) { Button( onClick = { Toast.makeText(context, "Button Clicked", Toast.LENGTH_SHORT).show() } ) { Text("Button") } FilledTonalButton( modifier = Modifier.padding(top = 16.dp), onClick = { Toast.makeText(context, "FilledTonalButton Clicked", Toast.LENGTH_SHORT).show() } ) { Text("FilledTonalButton") } OutlinedButton( modifier = Modifier.padding(top = 16.dp), onClick = { Toast.makeText(context, "OutlinedButton Clicked", Toast.LENGTH_SHORT).show() } ) { Text("OutlinedButton") } ElevatedButton( modifier = Modifier.padding(top = 16.dp), onClick = { Toast.makeText(context, "ElevatedButton Clicked", Toast.LENGTH_SHORT).show() } ) { Text("ElevatedButton") } TextButton( modifier = Modifier.padding(top = 16.dp), onClick = { Toast.makeText(context, "TextButton Clicked", Toast.LENGTH_SHORT).show() } ) { Text("TextButton") } }