Compose（6）主题和样式

在 Jetpack Compose 中，主题和样式用于定义应用的外观和视觉风格。

一、主题（Theme）

1.主题的概念

主题是一组定义应用整体外观的属性，包括颜色、字体、形状等。通过定义主题，可以为应用提供一致的视觉风格，提高用户体验。

2.创建主题

在 Compose 中，可以使用 MaterialTheme 函数来创建一个主题。MaterialTheme 提供了一系列默认的颜色、字体和形状，可以根据需要进行定制。

例如：

   @Composable
   fun MyApp() {
       MaterialTheme(
           colors = lightColors(
               primary = Color.Blue,
               onPrimary = Color.White,
               background = Color.White
           )
       ) {
           // 应用的内容
       }
   }

在这个例子中，创建了一个主题，将主颜色设置为蓝色，主文本颜色设置为白色，背景颜色设置为白色。

3.应用主题

主题可以在整个应用中应用，通过将内容包裹在 MaterialTheme 函数中，所有的子组件都可以访问主题中的属性。

例如：

   @Composable
   fun MyApp() {
       MaterialTheme {
           Scaffold(
               topBar = {
                   TopAppBar(
                       title = { Text(text = "My App") },
                       backgroundColor = MaterialTheme.colors.primary
                   )
               }
           ) {
               // 应用的内容
           }
       }
   }

在这个例子中，TopAppBar 的背景颜色使用了主题中的主颜色。

二、样式（Style）

1.样式的概念

样式是用于定义单个组件外观的属性，如字体大小、颜色、边距等。通过定义样式，可以为不同的组件提供不同的外观，实现更加丰富的视觉效果。

2.创建样式

可以使用 Modifier 函数来创建样式。Modifier 提供了一系列方法，可以用于设置组件的外观和行为。

例如：

   @Composable
   fun TextWithStyle() {
       Text(
           text = "Styled Text",
           modifier = Modifier
              .background(Color.Gray)
              .padding(16.dp)
              .fontSize(18.sp)
       )
   }

在这个例子中，为 Text 组件设置了背景颜色、内边距和字体大小。

3.组合样式

可以使用 Modifier.combine 方法来组合多个样式。

例如：

   val style1 = Modifier.background(Color.Gray)
   val style2 = Modifier.padding(16.dp)
   val style3 = Modifier.fontSize(18.sp)

   @Composable
   fun TextWithCombinedStyle() {
       Text(
           text = "Styled Text",
           modifier = style1.combine(style2).combine(style3)
       )
   }

在这个例子中，将三个样式组合在一起应用到 Text 组件上。

三、自定义主题和样式

1.自定义主题

可以通过继承 Theme 类来创建自定义主题。在自定义主题中，可以定义自己的颜色、字体、形状等属性。

例如：

   object MyTheme : Theme {
       val primaryColor = Color.Blue
       val secondaryColor = Color.Green
       val textColor = Color.White

       override val colors: Colors
           get() = lightColors(
               primary = primaryColor,
               onPrimary = textColor,
               background = Color.Black
           )
   }

在这个例子中，创建了一个自定义主题，定义了主颜色、副颜色和文本颜色。然后，在 colors 属性中使用自定义的颜色创建了一个轻主题。

2.自定义样式

可以通过创建自定义的 Modifier 扩展函数来定义自定义样式。

例如：

   fun Modifier.myCustomStyle(): Modifier = this
      .background(Color.Red)
      .padding(8.dp)

在这个例子中，创建了一个自定义样式，为组件设置了红色背景和内边距。

通过使用主题和样式，可以为 Jetpack Compose 应用提供丰富的视觉效果和一致的用户体验。可以根据应用的需求自定义主题和样式，以满足不同的设计要求。