一、Material Design

直接把任何Composable函数用 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，可以直接将颜色设为primarySurfacecolor = 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()}
}

四、自定义

创建项目之后，就会生成一个项目名称+Theme 的 @Compose 方法，我们可以通过更改其中的颜色来完成对主题的修改。硬编码在配置的地方把值写死会无法支持主题切换，应该从主题中引用对应值，由于每个值都是实例还能通过 copy() 修改。

@Composable
fun MyTheme(darkMode: Boolean = isSystemInDarkTheme(),  //是否是暗黑模式，默认根据系统设置content: @Composable () -> Unit //传入子容器
) {MaterialTheme(//将自定义的色值传入同理 shapes、tygraphycolors = if (darkMode) darkColors else lightColors) {content()   //被包裹的子容器会默认设置为该主题}
}//自定义浅色模式
private val lightColors = lightColors(//以下都是系统默认值primary = Color(0xFF6200EE),primaryVariant = Color(0xFF3700B3),secondary = Color(0xFF03DAC6),secondaryVariant = Color(0xFF018786),background = Color.White,surface = Color.White,error = Color(0xFFB00020),onPrimary = Color.White,onSecondary = Color.Black,onBackground = Color.Black,onSurface = Color.Black,onError = Color.White
)//自定义深色模式
private val darkColors = darkColors(//以下都是系统默认值primary = Color(0xFFBB86FC),primaryVariant = Color(0xFF3700B3),secondary = Color(0xFF03DAC6),secondaryVariant = Color(0xFF03DAC6),background = Color(0xFF121212),surface = Color(0xFF121212),error = Color(0xFFCF6679),onPrimary = Color.Black,onSecondary = Color.Black,onBackground = Color.White,onSurface = Color.White,onError = Color.Black
)