写点什么

Compose 中的主题

用户头像
Changing Lin
关注
发布于: 4 小时前
Compose 中的主题

1.应用范围的主题

Jetpack Compose 提供了 Material Design 的实现,后者是一个用于创建数字化界面的综合设计系统。Material Design 组件(按钮、卡片、开关等)在 Material Theming 的基础上构建而成,Material Theming 是一种系统化的方法,用于自定义 Material Design 以更好地反映您产品的品牌。一个 Material Theme 由颜色、排版和形状属性组成。当您自定义这些属性时,您所做的更改会自动反映在您用来构建应用的组件中。

Jetpack Compose 使用 MaterialTheme 可组合项实现这些概念:

MaterialTheme(    colors = …,    typography = …,    shapes = …) {    // app content}
复制代码

1.1 颜色

颜色在 Compose 中使用 Color 类(一个简单的数据存放类)进行建模。虽然您可以按照自己喜欢的方式随意组织这些颜色(作为顶级常量、在单例中或以内嵌方式定义),但我们强烈建议您在主题中指定颜色并从中检索颜色。

Compose 提供了 Colors 类来对 Material 颜色系统进行建模。Colors 提供了构建器函数来创建成套的浅色或深色:

private val Yellow200 = Color(0xffffeb46)private val Blue200 = Color(0xff91a4fc)// ...
private val DarkColors = darkColors(    primary = Yellow200,    secondary = Blue200,    // ...)private val LightColors = lightColors(    primary = Yellow500,    primaryVariant = Yellow400,    secondary = Blue700,    // ...)
// 定义 Colors 后,您可以将其传递给 MaterialTheme:MaterialTheme( colors = if (darkTheme) DarkColors else LightColors) { // app content}
复制代码
  • 使用主题颜色

  • 表面和内容颜色

  • 内容 Alpha 值

  • 深色主题

  • 扩展 Material 颜色

1.2 字体排版

Material 定义了一个字型系统,鼓励您使用少量从语义上命名的样式。Compose 使用 Typography、TextStyle 和字体相关类来实现字型系统。Typography 构造函数可以提供每种样式的默认值,因此您可以省略不希望自定义的任何样式:

val Rubik = FontFamily(    Font(R.font.rubik_regular),    Font(R.font.rubik_medium, FontWeight.W500),    Font(R.font.rubik_bold, FontWeight.Bold))
val MyTypography = Typography(    h1 = TextStyle(        fontFamily = Rubik,        fontWeight = FontWeight.W300,        fontSize = 96.sp    ),    body1 = TextStyle(        fontFamily = Rubik,        fontWeight = FontWeight.W600,        fontSize = 16.sp    )    /*...*/)MaterialTheme(typography = MyTypography, /*...*/)
复制代码

如果您希望自始至终使用同一字体,请指定 defaultFontFamily 参数,并省略所有 TextStyle 元素的 fontFamily:

val typography = Typography(defaultFontFamily = Rubik)MaterialTheme(typography = typography, /*...*/)
复制代码
  • 使用文本样式

您可以从主题检索 TextStyle,如以下示例所示:

Text(    text = "Subtitle2 styled",    style = MaterialTheme.typography.subtitle2)
复制代码


1.3 形状

Compose 使用 Shapes 类来实现形状系统,该类可让您为每个类别指定一个 CornerBasedShape:

val Shapes = Shapes(    small = RoundedCornerShape(percent = 50),    medium = RoundedCornerShape(0f),    large = CutCornerShape(        topStart = 16.dp,        topEnd = 0.dp,        bottomEnd = 0.dp,        bottomStart = 16.dp    ))
MaterialTheme(shapes = Shapes, /*...*/)
复制代码

默认情况下,许多组件使用这些形状。例如,Button、TextField 和 FloatingActionButton 默认为“小”,AlertDialog 默认为“中”,而 ModalDrawer 默认为“大”。

  • 使用形状,您可以从主题检索形状:

Surface(    shape = MaterialTheme.shapes.medium, /*...*/) {    /*...*/}
复制代码

2.组件样式

在 Compose 中,没有关于组件样式的明确概念,因为您可以通过创建自己的可组合项来提供此功能。例如,如需创建按钮的样式,请将一个按钮封装在您自己的可组合函数中,直接设置您希望更改的参数,并将其他参数以参数形式提供给包含该按钮的可组合项。

@Composablefun LoginButton(    onClick: () -> Unit,    modifier: Modifier = Modifier,    content: @Composable RowScope.() -> Unit) {    Button(        colors = ButtonDefaults.buttonColors(            backgroundColor = MaterialTheme.colors.secondary        ),        onClick = onClick,        modifier = modifier,        content = content    )}
复制代码

3.自定义设计系统

虽然 Material 是我们推荐的设计系统并且 Jetpack Compose 附带了 Material 的实现,但您并非只能使用它。您完全可以采用同样的方式创建自己的设计系统;Material 完全基于公共 API,您可以使用这些 API 来实现此目的。

发布于: 4 小时前阅读数: 3
用户头像

Changing Lin

关注

获得机遇的手段远超于固有常规之上~ 2020.04.29 加入

我能做的,就是调整好自己的精神状态,以最佳的面貌去面对那些未曾经历过得事情,对生活充满热情和希望。

评论

发布
暂无评论
Compose 中的主题