告别XML，使用Compose Theme为你的app轻松换皮

最新推荐文章于 2024-05-13 16:15:43 发布

QY’UniverseSpace

最新推荐文章于 2024-05-13 16:15:43 发布

阅读量465

点赞数 1

分类专栏：转发资源安卓文章标签： android 移动开发 themes

本文介绍了Android Compose Challenge第三周的比赛，强调了Compose Theme在快速开发中的优势。Compose Theme使得创建和切换主题变得简单，相比XML更加高效。通过Kotlin定义全局样式，结合MaterialTheme，开发者可以轻松实现App的视觉一致性。文章还分享了实战中如何定义和使用Theme，并展示了@Preview功能在优化UI开发体验上的帮助。

摘要由CSDN通过智能技术生成

1. Compose挑战赛第三周
关注过我前面文章的朋友应该对最近举行的Compose挑战赛有所了解，本周挑战赛进入到第三轮。#AndroidDevChallenge Week 3

与前两轮规则不同，本轮主要是比拼速度。只有第一个按要求完成并提交的人能胜出，奖品是Pixel 5手机一台。题目要求基于Compose完成以下三个页面，Google会提供完成页面必须的一些资源以及视觉设计稿。

题目本身难度不高，主要是拼手速。自从结婚后老夫的手速退化严重，top1出线就不指望了，但本着重在参与的精神仍然坚持完成了项目，主要是希望从中找到一些可与大家分享的东西。

整个开发过程中，除了会使用到Layout、Modifier等基本技巧以外，最大的体会就是Compose的Theme太好用了！，这也是Google想在这个题目中考察和传达的重点。虽然不使用Theme也可以完成上面三个页面，但是开发效率会大大折扣。

2. Compose Theme
传统Android开发中也需要配置Theme，即主题。Theme可以为UI控件提供统一的颜色和样式等，保证App视觉的一致性。主要区别在与：传统Theme依赖xml，而Compose完全基于Kotlin，类型更安全、性能更优秀、使用更简单！

Kotlin的优势
当我们在AndroidStudio新建一个Compose模板工程时，IDE会自动创建theme文件夹
Color.kt、Shape.kt、Type.kt中通过Kotlin的常量分别定义全局样式，
Theme.kt中将这些样式应用到全局主题：

//Thmem.kt
private val DarkColorPalette = darkColors(
primary = purple200,
primaryVariant = purple700,
secondary = teal200
)

private val LightColorPalette = lightColors(
primary = purple500,
primaryVariant = purple700,
secondary = teal200
)

@Composable
fun MyAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
//根据theme的不同设置不同颜色
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}

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

如上，使用Kotlin定义和切换theme都是如此简单，在Composable中基于if的语句更新配置，然后静等下次composition生效就可以了。

Theme工作原理
每个app都会默认提供${app name}Theme，进行自定义主题，例如MyAppTheme，最终会调用MaterialTheme，通过一些列Provider将配置映射为环境变量：

@Composable
fun MaterialTheme(
colors: Colors = MaterialTheme.colors,
typography: Typography = MaterialTheme.typography,
shapes: Shapes = Mate