このページは Cloud Translation API によって翻訳されました。

Compose 内のテーマの構造

Jetpack Compose 内のテーマは、多数の下位構造と関連 API で構成されています。これらは MaterialTheme のソースコードで参照でき、カスタムデザインシステムに適用することもできます。

テーマのシステムのクラス

テーマは通常複数のサブシステムで構成されており、それらが理解することが重要です。これらのシステムは、テーマ値を持つクラスを使用してモデル化できます。

たとえば、MaterialTheme には ColorScheme（カラーシステム）、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
    /* ... */
)

/* ... */ThemeAnatomySnippets.kt

テーマのシステムのコンポジションローカル

テーマのシステムのクラスは、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 = ""
    )
}

/* ... */ThemeAnatomySnippets.kt

テーマの関数

テーマの関数はエントリポイントであり、メイン 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
    )
}ThemeAnatomySnippets.kt

テーマのオブジェクト

テーマのシステムへのアクセスは、コンビニエンスプロパティを持つオブジェクトを使用して行われます。一貫性を保つため、オブジェクトにはテーマの関数と同じ名前が付けられることが多いです。プロパティは現在のコンポジションローカルのみを取得します。

// 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
    /* ... */
}ThemeAnatomySnippets.kt

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
CompositionLocal でローカルにスコープ設定されたデータ
Compose のカスタムデザインシステム
Compose のマテリアルデザイン 3