Compose学习之旅：揭开主题、字体和形状的秘密

2023-11-19 19:25:20

Compose中的主题

在Compose中，主题负责定义应用程序中所有组件的视觉外观。它控制颜色、字体、形状和其他样式设置。要创建自定义主题，可以使用MaterialTheme组件：

@Composable
fun MyTheme(content: @Composable() -> Unit) {
    val colors = lightColors(
        primary = Color(0xFF009688),
        secondary = Color(0xFF43A047),
        background = Color.White,
        surface = Color.White,
        error = Color(0xFFD32F2F),
    )
    
    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = shapes,
        content = content
    )
}

在这里，我们定义了一个名为MyTheme的自定义主题，它设置了颜色、字体和形状。

Compose中的字体

字体用于定义文本的外观，包括字体系列、大小和样式。在Compose中，可以使用Text组件来设置字体：

@Composable
fun MyText(text: String) {
    Text(
        text = text,
        fontFamily = FontFamily.SansSerif,
        fontSize = 16.sp,
        fontStyle = FontStyle.Italic
    )
}

在这个例子中，我们创建了一个MyText可组合函数，它使用Text组件设置字体系列、大小和样式。

Compose中的形状

形状用于定义组件的视觉边界。在Compose中，可以使用Shape接口来定义形状：

object RoundedShape : Shape {
    override fun createOutline(path: Path, size: Size): Outline {
        val radius = size.minDimension / 2
        path.addRoundRect(Rect(0f, 0f, size.width, size.height), radius, radius)
        return Outline.Generic(path)
    }
}