玩轉Jetpack Compose主題：讓你的APP變身時尚達人
作者：Reathin
主題系統是構建統一視覺語言的基礎設施，建議從項目初期就建立規范。可以先從基礎配色開始，逐步完善文字和形狀系統，最終形成完整的設計體系。
主題的魔法衣櫥
什么是主題？
主題就像APP的穿搭指南，包含：
? ?? 顏色搭配（Color Palette）
? ?? 字體排版（Typography）
? ?? 形狀設計（Shapes）
Android Studio貼心地為你準備了主題三件套：
圖片
主題變身咒語
看這段自動生成的代碼，像不像哈利波特的魔法咒語？
@Composable
fun SampleAndroidTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
// ?? 主題模式切換器
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
MaterialTheme(
colorScheme = colorScheme,// 顏色搭配
typography = Typography,// 字體庫
shapes = MaterialTheme.shapes,//形狀大全
content = content
)
}調色大師速成班
官方配色方案
Material Design貼心地準備了顏色全家桶
// ?? 基礎色套餐
private val LightColorScheme = lightColorScheme(
primary = Purple40,
secondary = PurpleGrey40,
tertiary = Pink40
/* Other default colors to override
background = Color(0xFFFFFBFE),
surface = Color(0xFFFFFBFE),
onPrimary = Color.White,
onSecondary = Color.White,
onTertiary = Color.White,
onBackground = Color(0xFF1C1B1F),
onSurface = Color(0xFF1C1B1F),
*/
)
圖片
DIY專屬配色
想加點特別顏色？試試自定義色卡
// ?? 彩虹獨角獸配色
val RainbowColors = lightColorScheme(
primary = Color(0xFFFF6B6B), // 珊瑚粉
secondary = Color(0xFF4ECDC4), // 薄荷綠
background = Color(0xFFFFF5E1) // 香草奶油
)
// ?? 使用方式
MaterialTheme(
colorScheme = RainbowColors,
typography = Typography,
shapes = MaterialTheme.shapes,
content = content
)
圖片
文字排版變變變
官方字體套餐
Compose自帶專業排版配置
val Typography = Typography(
h1 = TextStyle( // 超大標題
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight.Bold,
fontSize = 24.sp
),
body1 = TextStyle( // 正文
fontFamily = FontFamily.Default,
fontSize = 16.sp
),
button = TextStyle( // 按鈕文字
fontWeight = FontWeight.W500,
fontSize = 14.sp
)
)自定義字體秘籍
想用特殊字體？三步搞定：
1. 把字體文件(.ttf)放在 res/font 文件夾
2. 創建字體對象：
val ComicFont = FontFamily(
Font(R.font.comic_neue_regular),
Font(R.font.comic_neue_bold, weight = FontWeight.Bold)
)3. 使用自定義字體：
Text(
text = "我是萌萌噠阿里媽媽豎黑體字體",
style = TextStyle(fontFamily = ComicFont)
)
圖片
形狀改造計劃
官方形狀大全
Compose提供三種預設形狀：
Shapes(
small = RoundedCornerShape(4.dp), // 小圓角（藥丸形狀）
medium = RoundedCornerShape(8.dp), // 中圓角（卡片邊角）
large = RoundedCornerShape(0.dp) // 直角（復古風格）
)腦洞形狀實驗室
試試這些炫酷形狀：
// ?? 蘑菇按鈕
Button(
onClick = { },
modifier = Modifier.size(100.dp),
shape = CircleShape,
colors = ButtonDefaults.buttonColors(containerColor = Color.Red)
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Box(
modifier = Modifier
.size(60.dp, 30.dp)
.background(
color = Color.White,
shape = RoundedCornerShape(50)
)
)
Spacer(modifier = Modifier.height(4.dp))
Text("采蘑菇", color = Color.White)
}
}
// ?? 六邊形頭像
Image(
painter = painterResource(R.drawable.img),
contentDescription = null,
modifier = Modifier.clip(PolygonShape(sides = 6)) // 六邊形裁剪
)
圖片
主題系統核心要點總結
主題三板斧
1. 顏色體系
? 使用MaterialTheme.colors統一管理配色方案
? 支持亮/暗模式自動切換
? 通過擴展屬性添加自定義顏色
2. 文字排版
? 預定義h1-h6等標題樣式
? 通過Typography類管理字體規范
? 支持加載自定義字體文件
3. 形狀系統
? 提供small/medium/large三級圓角配置
? 支持創建異形組件（圓角/切角/多邊形等）
? 通過Modifier.clip()實現形狀裁剪
最佳實踐建議
1. 命名規范
// 好的命名示例
val Colors.success = Color.Green
val Typography.cardTitle = TextStyle(...)
val Shapes.chatBubble = RoundedCornerShape(8.dp)2. 主題繼承
// 創建子主題
@Composable
fun DashboardTheme(content: @Composable () -> Unit) {
MaterialTheme(
colors = MaterialTheme.colors.copy(primary = Blue200),
content = content
)
}3. 響應式適配
// 根據屏幕尺寸調整字體
val typography = Typography(
h1 = TextStyle(fontSize = if (isMobile) 24.sp else 32.sp)
)主題系統是構建統一視覺語言的基礎設施，建議從項目初期就建立規范。可以先從基礎配色開始，逐步完善文字和形狀系統，最終形成完整的設計體系。
源碼https://github.com/Reathin/Sample-Android/tree/master/module_compose_theme
責任編輯：武曉燕
來源：
沐雨花飛碟
