拓冰建站拓冰建站
首页 / 资讯中心 / 正文

Jetpack Compose - MaterialExpressiveTheme 与 MaterialTheme、ColorScheme

MaterialExpressiveTheme 与 MaterialTheme这两个函数都是 Jetpack Compose 的主题包装器MaterialExpressiveTheme 是 MaterialTheme 的升级版funMaterialExpressiveTheme(colorScheme:ColorScheme?null,motionScheme:MotionScheme?null,shapes:Shapes?null,typography:Typography?null,content:Composable()-Unit,)参数说明colorScheme定义应用的颜色体系motionScheme定义动画和过渡的运动方案shapes定义组件例如按钮、卡片、对话框的形状typography定义全局的字体样式系统content内容funMaterialTheme(colorScheme:ColorSchemeMaterialTheme.colorScheme,shapes:ShapesMaterialTheme.shapes,typography:TypographyMaterialTheme.typography,content:Composable()-Unit,)参数说明colorScheme定义应用的颜色体系shapes定义组件例如按钮、卡片、对话框的形状typography定义全局的字体样式系统content内容自定义主题包装器它接收 content 并传递给 MaterialTheme在主题中集中管理颜色、字体和形状ComposablefunMyTheme(...content:Composable()-Unit){...MaterialTheme(...contentcontent)}ColorSchemeColorScheme 定义了 Material Design 3 中完整的颜色系统它是 Compose 主题的核心classColorScheme(valprimary:Color,valonPrimary:Color,valprimaryContainer:Color,valonPrimaryContainer:Color,valinversePrimary:Color,valsecondary:Color,valonSecondary:Color,valsecondaryContainer:Color,valonSecondaryContainer:Color,valtertiary:Color,valonTertiary:Color,valtertiaryContainer:Color,valonTertiaryContainer:Color,valbackground:Color,valonBackground:Color,valsurface:Color,valonSurface:Color,valsurfaceVariant:Color,valonSurfaceVariant:Color,valsurfaceTint:Color,valinverseSurface:Color,valinverseOnSurface:Color,valerror:Color,valonError:Color,valerrorContainer:Color,valonErrorContainer:Color,valoutline:Color,valoutlineVariant:Color,valscrim:Color,valsurfaceBright:Color,valsurfaceDim:Color,valsurfaceContainer:Color,valsurfaceContainerHigh:Color,valsurfaceContainerHighest:Color,valsurfaceContainerLow:Color,valsurfaceContainerLowest:Color,valprimaryFixed:Color,valprimaryFixedDim:Color,valonPrimaryFixed:Color,valonPrimaryFixedVariant:Color,valsecondaryFixed:Color,valsecondaryFixedDim:Color,valonSecondaryFixed:Color,valonSecondaryFixedVariant:Color,valtertiaryFixed:Color,valtertiaryFixedDim:Color,valonTertiaryFixed:Color,valonTertiaryFixedVariant:Color,)主色系Primary属性说明primary主色onPrimary位于主色之上的颜色例如按钮上的文字primaryContainer主色的容器版本更浅或更深用于背景色块onPrimaryContainer容器上的内容颜色inversePrimary反色主题下的主色用于深色模式下的强调副色系Secondary、Tertiary属性说明secondary次级配色onSecondary位于次级配色之上的颜色secondaryContainer次级配色的容器版本onSecondaryContainer容器上的内容颜色属性说明tertiary三级配色onTertiary位于三级配色之上的颜色tertiaryContainer三级配色的容器版本onTertiaryContainer容器上的内容颜色背景与表面Background、Surface状态反馈Error轮廓与遮罩Outline、Scrim扩展表面层级固定色系
分享:

看完干货,该让你的企业上线了

免费需求沟通 · 48 小时内出具建站方案 · 河南本地可上门