Material Design 3

源：Compose 中的 Material Design 3

Jetpack Compose 提供了对 Material Design 3 (M3) 的一流支持。M3 是 Google 的最新设计系统，引入了动态配色、新的组件和增强的视觉效果。

依赖项

请确保在 build.gradle 中引入了 M3 库，而不是旧版的 androidx.compose.material。

implementation("androidx.compose.material3:material3")

MaterialTheme

MaterialTheme 是 Compose 中应用样式系统的入口点。它包含三个主要子系统：颜色 (Color)、排版 (Typography) 和 形状 (Shape)。

@Composable
fun AppTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colorScheme = if (useDarkTheme) DarkColorScheme else LightColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
    )
}

1. 颜色 (ColorScheme)

M3 引入了基于色调的配色方案。

定义配色

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    onPrimary = Color.White,
    secondary = PurpleGrey40,
    onSecondary = Color.White,
    tertiary = Pink40
    // ... 其他颜色槽位
)

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    onPrimary = Purple20,
    // ...
)

动态取色 (Android 12+)

@Composable
fun DynamicTheme(content: @Composable () -> Unit) {
    val context = LocalContext.current
    // 检查是否支持动态取色
    val colorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        val dark = isSystemInDarkTheme()
        if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
    } else {
        // 回退方案
        if (isSystemInDarkTheme()) DarkColorScheme else LightColorScheme
    }
    
    MaterialTheme(colorScheme = colorScheme, content = content)
}

2. 排版 (Typography)

M3 更新了排版缩放阶梯（Type Scale），使用了如 Display、Headline、Title、Body 和 Label 等新命名。

val AppTypography = Typography(
    displayLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 57.sp,
        lineHeight = 64.sp
    ),
    bodyLarge = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    // ...
)

// 使用排版
Text(
    text = "Hello World",
    style = MaterialTheme.typography.headlineMedium
)

3. 形状 (Shapes)

val AppShapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(16.dp)
)

// 使用形状
Surface(
    shape = MaterialTheme.shapes.medium,
    // ...
) { }

常用组件

M3 更新了许多核心组件的外观和 API。

Surface (表面)

Surface 是大多数布局的基础，它自动处理背景色、内容颜色、边框和阴影。

Surface(
    modifier = Modifier.padding(8.dp),
    shadowElevation = 4.dp, // M3 中阴影更柔和
    tonalElevation = 4.dp,  // M3 新增：根据 Elevation 改变表面颜色的色调
    shape = MaterialTheme.shapes.medium
) {
    Text("This is a card-like surface")
}

Scaffold (脚手架)

Scaffold 提供了一个槽位 API，用于组装复杂的 Material 结构。

注意 Padding

在使用 Scaffold 时，必须将 innerPadding 应用到内容容器上，否则内容可能会被 TopBar 或 BottomBar 遮挡。

Scaffold(
    topBar = {
        CenterAlignedTopAppBar(
            title = { Text("My App") },
            colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                containerColor = MaterialTheme.colorScheme.primaryContainer
            )
        )
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) {
            Icon(Icons.Default.Add, contentDescription = "Add")
        }
    }
) { innerPadding ->
    Box(modifier = Modifier.padding(innerPadding)) {
        // 主要内容
    }
}

按钮 (Buttons)

M3 提供了多种类型的按钮，用于不同的强调级别。

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    // 1. Filled Button (高强调)
    Button(onClick = {}) { Text("Filled") }
    
    // 2. Filled Tonal Button (中强调)
    FilledTonalButton(onClick = {}) { Text("Tonal") }
    
    // 3. Outlined Button (低强调，带边框)
    OutlinedButton(onClick = {}) { Text("Outlined") }
    
    // 4. Text Button (最低强调，仅文本)
    TextButton(onClick = {}) { Text("Text") }
}