Jetpack Compose - MaterialExpressiveTheme 与 MaterialTheme、ColorScheme

MaterialExpressiveTheme 与 MaterialTheme

这两个函数都是 Jetpack Compose 的主题包装器，MaterialExpressiveTheme 是 MaterialTheme 的升级版

kotlin 复制代码

fun MaterialExpressiveTheme(
    colorScheme: ColorScheme? = null,
    motionScheme: MotionScheme? = null,
    shapes: Shapes? = null,
    typography: Typography? = null,
    content: @Composable () -> Unit,
)

参数	说明
colorScheme	定义应用的颜色体系
motionScheme	定义动画和过渡的运动方案
shapes	定义组件（例如，按钮、卡片、对话框）的形状
typography	定义全局的字体样式系统
content	内容

kotlin 复制代码

fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit,
)

参数	说明
colorScheme	定义应用的颜色体系
shapes	定义组件（例如，按钮、卡片、对话框）的形状
typography	定义全局的字体样式系统
content	内容

自定义主题包装器，它接收 content 并传递给 MaterialTheme，在主题中集中管理颜色、字体和形状

kotlin 复制代码

@Composable
fun MyTheme(
    ...
    content: @Composable () -> Unit
) {
	...

    MaterialTheme(
        ...
        content = content
    )
}

ColorScheme

ColorScheme 定义了 Material Design 3 中完整的颜色系统，它是 Compose 主题的核心

kotlin 复制代码

class ColorScheme(
    val primary: Color,
    val onPrimary: Color,
    val primaryContainer: Color,
    val onPrimaryContainer: Color,
    val inversePrimary: Color,

    val secondary: Color,
    val onSecondary: Color,
    val secondaryContainer: Color,
    val onSecondaryContainer: Color,

    val tertiary: Color,
    val onTertiary: Color,
    val tertiaryContainer: Color,
    val onTertiaryContainer: Color,

    val background: Color,
    val onBackground: Color,

    val surface: Color,
    val onSurface: Color,
    val surfaceVariant: Color,
    val onSurfaceVariant: Color,
    val surfaceTint: Color,
    val inverseSurface: Color,
    val inverseOnSurface: Color,

    val error: Color,
    val onError: Color,
    val errorContainer: Color,
    val onErrorContainer: Color,

    val outline: Color,
    val outlineVariant: Color,

    val scrim: Color,

    val surfaceBright: Color,
    val surfaceDim: Color,
    val surfaceContainer: Color,
    val surfaceContainerHigh: Color,
    val surfaceContainerHighest: Color,
    val surfaceContainerLow: Color,
    val surfaceContainerLowest: Color,
    
    val primaryFixed: Color,
    val primaryFixedDim: Color,
    val onPrimaryFixed: Color,
    val onPrimaryFixedVariant: Color,
    val secondaryFixed: Color,
    val secondaryFixedDim: Color,
    val onSecondaryFixed: Color,
    val onSecondaryFixedVariant: Color,
    val tertiaryFixed: Color,
    val tertiaryFixedDim: Color,
    val onTertiaryFixed: Color,
    val onTertiaryFixedVariant: Color,
)

主色系：Primary

属性	说明
primary	主色
onPrimary	位于主色之上的颜色，例如，按钮上的文字
primaryContainer	主色的容器版本，更浅或更深，用于背景色块
onPrimaryContainer	容器上的内容颜色
inversePrimary	反色主题下的主色，用于深色模式下的强调

副色系：Secondary、Tertiary

属性	说明
secondary	次级配色
onSecondary	位于次级配色之上的颜色
secondaryContainer	次级配色的容器版本
onSecondaryContainer	容器上的内容颜色

属性	说明
tertiary	三级配色
onTertiary	位于三级配色之上的颜色
tertiaryContainer	三级配色的容器版本
onTertiaryContainer	容器上的内容颜色

背景与表面：Background、Surface
状态反馈：Error
轮廓与遮罩：Outline、Scrim
扩展表面层级
固定色系