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"
)
}
}

var count by remember { 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")
}
}

• 设置跳过部分展开状态

val sheetState = 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")
}
}