Android JetPack Compose之主题的理解与使用

最新推荐文章于 2025-04-05 12:14:54 发布

OpenHarmony_小贾

最新推荐文章于 2025-04-05 12:14:54 发布

阅读量419

点赞数

本文链接：https://blog.youkuaiyun.com/maniuT/article/details/131829868

版权

MaterialTheme是Compose中基于MaterialDesign的主题样式模板，用于设置应用的色彩、字体和形状等。通过配置MaterialTheme，可以轻松切换应用的视觉风格。CompositionLocal是一种在Composable视图树中共享数据的方法，具有层级性并能限制数据的传递范围。文章详细解释了MaterialTheme的使用和CompositionLocal的工作原理，并给出了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：海塔灯

概述

根据百度百科知识，主题可以被定义为：文艺作品中所表现的中心思想。我们的APP就是一个作品，所以它的主题也代表了这个APP想要表达的思想，就比如看到京东APP的红色，我们就能明确的知道这是京东系的购物APP，看到淘宝的橙色我们就可以想到是阿里系旗下的产品……，现在的Android手机还有深色主题和亮色主题。分别代表不同的场景。所以主题可以理解为app的整体对外的一个形象，不同风格的主题会展现给人不同的形象。包括颜色，字体，形状等，当然也包括其他类型的多媒体资源，例如文本，声音，和图像等。这些都可以作为主题进行全局配置，当我们想要换风格形象的时候，直接修改全局配置就可以很方便的实现。

1.什么是MaterialTheme

MaterialTheme是Compose所提供的基于Material Design规范的主题样式模板。通过对主题样式模板配置，整个应用的Composeable组件会随主题的切换实现相应的样式改变。

当我们创建一个新的Compose项目的时候，Android Studio会默认生成一个Theme函数，名称使用的是项目名+Theme的名称，比如假设我们创建了一个名为HelloCompose的项目，那么主题的名称就会是：HelloComposeTheme。我们使用Composable组件创建UI都应该是HelloComposeTheme的子元素，这样才能在全局应用主题的效果。如下所示：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloComposeTheme {
                MessageCard(Message("walt","hello Compose"))
            }
        }
    }

    @Composable
    fun MessageCard(msg:Message){
       Row (modifier = Modifier.padding(all=8.dp).background(MaterialTheme.colors.background)){
           Image(painter = painterResource(id = R.drawable.portrait),
               contentDescription = null,
               modifier = Modifier
                   .size(40.dp)
                   .clip(CircleShape)

           )
           Column {
               Text(text = msg.author)
               Spacer(modifier = Modifier.height(4.dp))
               Text(text = msg.body)
           }
       }
    }

    data class Message(val author:String,val body:String)
}

接下来我们可以看下生成的HelloComposeTheme做了哪些事情，先看下主题的定义，如下所示：

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

    MaterialTheme(
        colors = colors, // 颜色
        typography = Typography, // 字体
        shapes = Shapes, // 形状
        content = content // 视图
    )
}

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    background = Color.Gray
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
    background = Color.White
)

从上面代码中我们可以看出，Android Studio默认生成了两种调色板，DarkColorPalette 和 LightColorPalette ，他们分别对应深色主题和亮色主题，根据传入的布尔值参数选择不同的调色板，然后选择的调色板会被透传到MaterialTheme