Compose 中的主题

关注

发布于: 4 小时前

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

原文链接:【http://xie.infoq.cn/article/decca4a75143e3372f105f0f5】。文章转载请联系作者。

Changing Lin

关注

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

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

发布

暂无评论

创作场景

Compose 中的主题

1.应用范围的主题

1.1 颜色

1.2 字体排版

1.3 形状

2.组件样式

3.自定义设计系统

Changing Lin

评论