Compose主题切换，让你的APP也能一键换肤

来自 | Zhujiang的博客地址：

https://juejin.cn/user/3913917127985240

/ 开端 /

应用换肤，这真的是一个老生常谈的问题，从原生安卓开始、到后来的 Flutter ，再到现在的 Compose ，虽说老生常谈，但其实还是新瓶装旧酒。

安卓原生的主题切换这里不再说了，这不是本文的重点，况且那个一篇文章估计也说不清😂。

Flutter 的主题切换主要依赖于 provider 状态管理，其实在 Compose 中也差不多，且听娓娓道来！

GitHub 地址在文章末尾。先来看看实现效果吧：

/ 经过 /

其实 Compose 虽说换肤实现很简单，但是这也需要在你遵守 Compose 开发规范的前提下，比如定义颜色的时候不使用硬编码，而使用 MaterialTheme 中的颜色，当然还有 Shape 、Typography 等。

Compose 中的主题大家应该都很熟悉了，但应该还有不是很熟悉的，这里先来简单说下吧。

Compose 中的主题

当你创建一个新的 Compose 项目之后，系统会自动帮你创建下面的结构：

可以看到系统一共创建了四个文件，顾名思义，分别为：颜色、形状、主题、类型，本文咱们主要看颜色及主题。

先来看看 Color 文件默认是什么样子的吧：

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

上面就是 Color 文件中的代码，只是简单定义了四种颜色。下面再来看看 Theme 文件吧。

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200
)

@Composable
fun PlayAndroidTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

可以看到 Theme 中先是定义了深色和浅色两个颜色，然后通过判断是否为夜间模式来动态适配。

下面来看看 lightColors 方法吧：

fun lightColors(
    primary: Color = Color(0xFF6200EE),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = Color(0xFF018786),
    background: Color = Color.White,
    surface: Color = Color.White,
    error: Color = Color(0xFFB00020),
    onPrimary: Color = Color.White,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.Black,
    onSurface: Color = Color.Black,
    onError: Color = Color.White
): Colors

通过上面代码可以得知，可以在这里设置每种颜色值，深浅模式都类似，都可以进行设置。

使用主题

上面简单说了下 Compose 中的主题，那么主题写好之后应该如何进行使用呢？来看代码：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        // 使用主题
        PlayAndroidTheme {
            NavGraph()
        }
    }
}

没错，就这么简单，只需要在页面外层嵌套下刚才设置的主题即可。。现在主题是设置上了，那应该如何使用刚才设置到主题中的那些颜色呢？亦或是别的资源？上代码：

// 颜色使用
MaterialTheme.colors.primary
// 形状使用
MaterialTheme.shapes.large
// 字体类型使用
MaterialTheme.typography.body1

还记得上面所说的需要遵守 Compose 的开发规范吧，所说的其实就是使用这些资源的时候尽量使用咱们定义好的。



/   解决   /


如何切换主题



首先需要思考如何来进行主题的切换，整个主题肯定使用在项目的开始——启动 Activity 中，但切换主题的页面肯定不在一块，那这个时候应该如何在切换主题页面切换了之后让 Activity 知道呢？


最开始的时候我的想法还是不够 Compose ，我想的是使用广播，在切换主题页面点击之后发送一个广播，然后在 Activity 中进行接收，然后接收到之后刷新。我确实这样做了，功能也确实实现了，但是总感觉哪里不对，感觉 Compose 中不应该这样才对。


中午在食堂吃饭的时候突然想到：Compose 中全部都是以状态驱动 UI 改变的，我直接将主题切换设置成一个状态不得了！


开搞


说干就干，首先先来设置下咱们默认的几套主题吧。



// 天蓝色
const val SKY_BLUE_THEME = 0

// 灰色
const val GRAY_THEME = 1

// 深蓝色
const val DEEP_BLUE_THEME = 2

// 绿色
const val GREEN_THEME = 3

// 紫色
const val PURPLE_THEME = 4

// 橘黄色
const val ORANGE_THEME = 5

// 棕色
const val BROWN_THEME = 6

// 红色
const val RED_THEME = 7

// 青色
const val CYAN_THEME = 8

// 品红色
const val MAGENTA_THEME = 9



这里为了之后代码简单点没有使用枚举，其实都差不多的。


然后添加一个主题的状态：



/**
 * 主题状态
 */
val themeTypeState: MutableState<Int> by lazy(mode = LazyThreadSafetyMode.SYNCHRONIZED) {
    mutableStateOf(getDefaultThemeId())
}




可以看到主题状态中有一个名为 getDefaultThemeId 的方法，用来获取默认主题 ID，来看下吧。



/**
 * 获取当前默认主题
 */
fun getDefaultThemeId(): Int = DataStoreUtils.getSyncData(CHANGED_THEME, SKY_BLUE_THEME)




这里使用了 DataStore 来进行数据的存取，DataStore 也是 Jetpack 中的一员。然后修改下主题方法：



@Composable
fun PlayAndroidTheme(
    themeId: Int = 0,
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        playDarkColors()
    } else {
        getThemeForThemeId(themeId)
    }

    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = Shapes,
        content = content
    )
}




可以看到上面添加了一个参数 themeId 用来表示当前需要使用的主题 id，getThemeForThemeId 方法用来通过主题 ID 来获取需要的主题颜色集，来看下实现吧。



/**
 * 通过主题 ID 来获取需要的主题
 */
private fun getThemeForThemeId(themeId: Int) = when (themeId) {
    SKY_BLUE_THEME -> {
        playLightColors(
            primary = primaryLight
        )
    }
    GRAY_THEME -> {
        playLightColors(
            primary = gray_theme
        )
    }
    // 别的主题类似，篇幅原因省略
}




接下来修改下 Activity 中的调用吧。



PlayAndroidTheme(themeTypeState.value) {
    NavGraph()
}




由于 themeTypeState是一个State，所以当它的值改变的时候，就会自动刷新UI。



/   收尾   /


创建主题列表



先做下准备工作，先来创建一个用来存放主题信息的实体类吧。

data class ThemeModel(val color: Color, val colorId: Int, val colorName: String)




接下来将咱们添加的主题放到一个 List 中。



// 主题model列表
private val themeList = arrayListOf(
    ThemeModel(primaryLight, SKY_BLUE_THEME, "天蓝色"),
    ThemeModel(gray_theme, GRAY_THEME, "灰色"),
    ThemeModel(deep_blue_theme, DEEP_BLUE_THEME, "深蓝色"),
    ThemeModel(green_theme, GREEN_THEME, "绿色"),
    ThemeModel(purple_theme, PURPLE_THEME, "紫色"),
    ThemeModel(orange_theme, ORANGE_THEME, "橘黄色"),
    ThemeModel(brown_theme, BROWN_THEME, "棕色"),
    ThemeModel(red_theme, RED_THEME, "红色"),
    ThemeModel(cyan_theme, CYAN_THEME, "青色"),
    ThemeModel(magenta_theme, MAGENTA_THEME, "品红色"),
)









创建主题切换页面


万事具备，只欠东风。现在主题这块已经全部准备好了，只需要再创建一个主题切换的页面，点击的时候保存下来主题 ID 并刷新下 themeTypeState 的值即可。





由上图可以看出这个布局最好使用 LazyVerticalGrid，然后设置下一行放 5 个 item 即可。



LazyVerticalGrid(
    cells = GridCells.Fixed(5),
    modifier = Modifier.padding(horizontal = 10.dp)
) {
    items(themeList) { item: ThemeModel ->
        ThemeItem(playTheme, item) {
            val playTheme = item.colorId
            themeTypeState.value = playTheme
            DataStoreUtils.putSyncData(CHANGED_THEME, playTheme)
        }
    }
}


OK了，结束了，这样就可以了，已经可以实现文章开头 Gif 图的那种效果了。

/   结局   /

这么快就到结局了，还有点不舍，哈哈哈。光顾着写实现了，还没放 Github 地址呢，在这里：
https://github.com/zhujiang521/PlayAndroid