容器与卡片 (Container)

1. 卡片 (Card)

M3 提供了三种样式的卡片，常用于展示包含相关信息的内容块。

Card (Filled)

Card(
    onClick = { /* ... */ },
    modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
    Box(Modifier.fillMaxSize()) {
        Text("Filled Card", Modifier.align(Alignment.Center))
    }
}

OutlinedCard

OutlinedCard(
    modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
    // 内容
}

ElevatedCard

ElevatedCard(
    modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
    // 内容
}

2. 标签 (Chip)

Chip 用于显示过滤选项、输入标签或操作建议。

// 1. 辅助 Chip (AssistChip)
AssistChip(
    onClick = { },
    label = { Text("添加到日历") },
    leadingIcon = { Icon(Icons.Filled.Event, null) }
)

// 2. 过滤 Chip (FilterChip)
var selected by remember { mutableStateOf(false) }
FilterChip(
    onClick = { selected = !selected },
    label = { Text("仅看未读") },
    selected = selected,
    leadingIcon = if (selected) {
        { Icon(Icons.Filled.Done, null) }
    } else null
)

// 3. 输入 Chip (InputChip)
InputChip(
    onClick = { },
    label = { Text("Android") },
    selected = true,
    avatar = { /* ... */ },
    trailingIcon = { Icon(Icons.Filled.Close, null) }
)

3. 徽章 (Badge)

通常与图标一起使用，用于显示通知数量。

BadgedBox(
    badge = {
        Badge { Text("8") }
    }
) {
    Icon(
        imageVector = Icons.Filled.Email,
        contentDescription = "邮件"
    )
}

4. 分割线 (Divider)

M3 中分为水平和垂直两种。

HorizontalDivider(thickness = 1.dp, color = Color.Gray)
VerticalDivider()