Jetpack Compose学习(12)——Material Theme的主题色切换

原文:Jetpack Compose学习(12)——Material Theme的主题色切换-Stars-One的杂货小窝

闲着无事研究了下Jetpack Compose M3 主题切换效果

本系列以往文章请查看此分类链接Jetpack compose学习

如何生成主题

首先,我们需要知道的是,M3有提供个在线网站供开发者进行快速生成主题,详情可见- Material Theme Builder

不过可能需要点魔法才能访问,页面如下

而右上角,则可以快速导出主题文件(由于我们是Compose,所以选择导出compose即可)

会得到一个名为kt的主题文件,如下图所示

之后我们根据需要设置当前的主题使用即可(通过MaterialTheme的colorScheme参数进行设置)

• lightColorScheme开头的是亮色主题
• darkColorScheme则是暗色主题

代码

我们需要更改亮色或暗色主题,只需要更改colorScheme参数即可

object MyThemeStyle{
    var isDark = mutableStateOf(false)

    val LightColorPalette = lightColorScheme(

    )

    val DarkColorPalette = darkColorScheme(

    )
}

@Composable
fun App() {
    var isDark by remember { MyThemeStyle.isDark }

	//根据当前选择,进行亮色和暗色主题的更改
    MaterialTheme(
        colorScheme = if (isDark) DarkColorPalette else LightColorPalette
    ) {
		Box{
			Button(onClick = {
                MyThemeStyle.isDark.value =MyThemeStyle.isDark.value.not()
            }){
                Text("更改主题")
            }
		}
	}

当然,上面的代码,如果重启软件之后就会还原为默认,我们可以将配置保存起来中,每次启动软件读取即可

• 桌面端: 通过某个文件来进行配置保存,我自己的做法是使用Properties文件
• Android: 通过SharePreference等保存配置即可

说明

需要注意的是,我们在MaterialTheme的组件里的其他Composable,布局得使用Surface,即可触发对应的字体颜色设置,图标颜色设置(更换主题的时候也会自动更换主题),用其他布局的@Composable,则无此自动更改颜色的效果

primary和onPrimary 意思是底部背景色为primary,而onPrimary对应的是背景上的文字或图标icon的颜色,其他几个主题色也是类似原理,不再赘述

上面示例代码中,我们只是设置了主题色,其他形状,排版(字号)我们都还是使用默认的

下面则是补充下MaterialTheme其他几个常用的对象简单使用

设置形状

可以使用此对象 MaterialTheme.shapes来进行设置组件背景为圆角矩形,如下面示例代码

@Composable
Surface(Modifier.background(Color.Black,MaterialTheme.shapes.small)){

}

设置颜色

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ClickText(content: String, onclick: () -> Unit) {
    Text(content, color = MaterialTheme.colorScheme.secondary, modifier = Modifier.onClick {
        onclick.invoke()
    }.pointerHoverIcon(PointerIcon.Hand, false))
}

设置字号

字体的字号大小也可以使用MaterialTheme.typography来设置,如下面代码:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ClickText(content: String, onclick: () -> Unit) {
    Text(content, color = MaterialTheme.typography.titleMedium, modifier = Modifier.onClick {
        onclick.invoke()
    }.pointerHoverIcon(PointerIcon.Hand, false))
}

参考

• Material Theme Builder,生成主题色的工具
• Compose 中的 Material Design 3 | Jetpack Compose | Android Developers