Jetpack Compose 内のテーマは、多数の下位構造と関連 API で構成されています。これらは MaterialTheme のソースコードで参照でき、カスタム デザイン システムに適用することもできます。
テーマのシステムのクラス
テーマは通常、一般的な視覚的および行動的な概念をグループ化する多数のシステムで構成されます。これらのシステムは、テーマ値を持つクラスを使用してモデル化できます。
たとえば、MaterialTheme には Colors（カラーシステム）、Typography（タイポグラフィ システム）、Shapes（シェイプ システム）などがあります。
@Immutable
data class ColorSystem(
val color: Color,
val gradient: List<Color>
/* ... */
)
@Immutable
data class TypographySystem(
val fontFamily: FontFamily,
val textStyle: TextStyle
)
/* ... */
@Immutable
data class CustomSystem(
val value1: Int,
val value2: String
/* ... */
)
/* ... */
テーマのシステムのコンポジション ローカル
テーマのシステムのクラスは、CompositionLocal インスタンスとしてコンポジション ツリーに暗黙的に提供されます。これにより、コンポーズ可能な関数でテーマ値を静的に参照できるようになります。
CompositionLocal の詳細については、CompositionLocal でローカルにスコープ設定されたデータについてのガイドをご覧ください。
val LocalColorSystem = staticCompositionLocalOf {
ColorSystem(
color = Color.Unspecified,
gradient = emptyList()
)
}
val LocalTypographySystem = staticCompositionLocalOf {
TypographySystem(
fontFamily = FontFamily.Default,
textStyle = TextStyle.Default
)
}
val LocalCustomSystem = staticCompositionLocalOf {
CustomSystem(
value1 = 0,
value2 = ""
)
}
/* ... */
テーマの関数
テーマの関数はエントリ ポイントであり、メイン API です。この関数は、ロジックに必要な実際の値を使用してテーマのシステムの CompositionLocal のインスタンスを作成します。これらのインスタンスは CompositionLocalProvider でコンポジション ツリーに提供されます。content パラメータを使用すると、ネストされたコンポーザブルは階層に関連するテーマ値にアクセスできます。
@Composable
fun Theme(
/* ... */
content: @Composable () -> Unit
) {
val colorSystem = ColorSystem(
color = Color(0xFF3DDC84),
gradient = listOf(Color.White, Color(0xFFD7EFFF))
)
val typographySystem = TypographySystem(
fontFamily = FontFamily.Monospace,
textStyle = TextStyle(fontSize = 18.sp)
)
val customSystem = CustomSystem(
value1 = 1000,
value2 = "Custom system"
)
/* ... */
CompositionLocalProvider(
LocalColorSystem provides colorSystem,
LocalTypographySystem provides typographySystem,
LocalCustomSystem provides customSystem,
/* ... */
content = content
)
}
テーマのオブジェクト
テーマのシステムへのアクセスは、コンビニエンス プロパティを持つオブジェクトを介して行われます。一貫性を保つため、オブジェクトにはテーマの関数と同じ名前が付けられることが多いです。プロパティは現在のコンポジション ローカルのみを取得します。
// Use with eg. Theme.colorSystem.color
object Theme {
val colorSystem: ColorSystem
@Composable
get() = LocalColorSystem.current
val typographySystem: TypographySystem
@Composable
get() = LocalTypographySystem.current
val customSystem: CustomSystem
@Composable
get() = LocalCustomSystem.current
/* ... */
}