Compose 基础 - MaterialTheme

原创已于 2026-01-31 16:30:23 修改 · 911 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android

于 2023-04-01 23:44:00 首次发布

Compose 专栏收录该内容

69 篇文章

订阅专栏

文章介绍了如何在Android的JetpackCompose中应用MaterialDesign，包括颜色系统的使用，如primary、secondary和背景色等，排版Typography的各种样式，以及Shape的不同形状。文章还展示了如何在Composable函数中应用这些设计原则，创建可自定义的主题，并通过Container函数进行组件配置。

一、Material Design

直接把任何组合函数用 MaterialTheme{ } 包裹起来，就可以使用相关属性了。也可以单独将某个属性拿出来使用。

1.1 颜色 Color

primary	主色，屏幕和元素都用这个颜色。
primaryVariant	用于区分主色，比如app bar和system bar。
secondary	次要色提供强调和区分。适合于悬浮按钮、单选/复选框按钮、高亮选定的文本、链接和标题。
secondaryVariant	用于区分次要色。
background	背景色出现在可滚动的内容后面。
surface	表面色用于组件的表面，如CardView、SheetLayout、Menu。
error	错误色用于表示组件内的错误，如TextField的提示信息。
onPrimary	用于显示在主色之上的文本和图标的颜色。
onSecondary	用于显示在次要色之上的文本和图标的颜色。
onBackground	显示在背景色之上的文本和图标的颜色。
onSurface	显示在表面色之上的文本和图标所使用的颜色。
onError	显示在错误色之上的文本和图标所用的颜色。
isLight	是否是浅色模式。

@Composable
fun Show() {
    Text(
        text = "",
//        color = Color(0xffff00ff)   //硬编码在配置的地方把值写死会无法支持主题切换
//        color = MaterialTheme.colors.primary    //应该从主题中引用对应颜色（不是具体值，而是名称，关注点分离，相当于换肤功能，不同主题显示不同的颜色）
        color = MaterialTheme.colors.primary.copy(alpha = 0.5F), //每个值都是Color实例还能通过copy()修改ARGB参数
    )
    Surface(   //指定颜色更多的是在外部用一层Surface包裹来指定
        //避免在深色主题中大面积使用明亮颜色，一般是浅色主题使用primary深色主题使用surface，可以直接将颜色设为primarySurface
        color = MaterialTheme.colors.primarySurface, contentColor = contentColorFor(backgroundColor = MaterialTheme.colors.primary)
    ) { }
}

1.2 排版 Typography

h1 ~ h6	标题，字号1最大6最小。
subtitle1、subtitle2	副标题，字号1大2小。
body1、body2	正文，字号1大2小。
button	按钮文本。
caption	图片说明。
overline	上划线。

@Composable
fun Show() {
    Text(
        text = buildAnnotatedString {
            append("以下不同样式的文字：\n")
            withStyle(SpanStyle(color = Color.Red)){
                append("红色，")
            }
            withStyle(SpanStyle(fontSize = 24.sp)){
                append("大字，")
            }
            val myStyle = MaterialTheme.typography.overline.toSpanStyle().copy(
                background = MaterialTheme.colors.primary.copy(alpha = 0.5F)
            )
            withStyle(myStyle) {
                append("自定义，")
            }
        }
    )
}

1.3 形状 Shape

small	小组件使用的形状，例如Button、SnackBar、悬浮按钮...
medium	中组件使用的形状，例如CardView、AlertDialog...
large	大组件使用的形状，例如ModalDrawer、ModalBottomSheetLayout...

@Composable
fun Show() = MaterialTheme{...}

@Composable
fun Show() {
    val colors = MaterialTheme.colors   //获取颜色
    val typography = MaterialTheme.typography   //获取排版
    val shapes = MaterialTheme.shapes   //获取形状
    Surface(
        shape = shapes.large,
        elevation = 10.dp
    ) {
        Text(
            text = "Hello Word!",
            color = colors.primary,
            style = typography.body2
        )
    }

二、复制并改写

可以通过 copy( ) 复制主题然后改写属性。

@Composable
fun Counter() {
    val myStyle = MaterialTheme.typography.h3.copy(color = Color.Red)
    Text(
        text = "Hello Word!",
        style = myStyle
    )
}

三、容器函数

可以将基础配置设置到容器中，这样容器中的所有Composable函数都会默认带上该配置。

@Preview
@Composable
fun Show() {
    Container{
        Text(text = "你好")
    }
}

@Composable
fun Container(content: @Composable () -> Unit){
    Surface(color = Color.Yellow, modifier = Modifier.padding(10.dp)) {
        content()
    }
}