Dasar-Dasar Gaya

Ada tiga cara untuk menerapkan Gaya di seluruh aplikasi Anda:

  1. Gunakan langsung pada komponen yang ada yang mengekspos parameter Style.
  2. Terapkan gaya dengan Modifier.styleable pada composable tata letak yang tidak menerima parameter Style.
  3. Dalam sistem desain kustom Anda sendiri, gunakan Modifier.styleable{} dan ekspos parameter gaya pada komponen Anda sendiri.

Properti yang tersedia di Styles

Gaya mendukung banyak properti yang sama dengan yang didukung pengubah; namun, tidak semua yang merupakan pengubah dapat direplikasi dengan Gaya. Anda tetap memerlukan pengubah untuk perilaku tertentu, seperti interaksi, gambar kustom, atau penumpukan properti.

Pengelompokan Properti Diwarisi oleh turunan
Tata letak dan ukuran
Padding contentPadding (dalam) dan externalPadding (luar). Tersedia dalam varian satu arah, horizontal, vertikal, dan semua sisi. Tidak
Dimensi fillWidth/Height/Size() dan width, height, dan size (mendukung pecahan Dp, DpSize, atau Float). Tidak
Positioning left/top/right/bottom offset. Tidak
Tampilan Visual
Terisi background dan foreground (mendukung Color atau Brush). Tidak
Batas borderWidth, borderColor, dan borderBrush. Tidak
Bentuk shape Tidak - tetapi digunakan bersama dengan properti lain. clip dan border menggunakan bentuk yang ditentukan ini.
Bayangan dropShadow, innerShadow Tidak
Transformasi
Pergerakan spasial lapisan grafis translationX, translationY, scaleX/Y, rotationX/Y/Z Tidak
Mengontrol alpha, zIndex (urutan penumpukan), dan transformOrigin (titik poros) Tidak
Tipografi
Penataan gaya textStyle, fontSize, fontWeight, fontStyle, dan fontFamily Ya
Pewarnaan contentColor dan contentBrush. Ini juga digunakan untuk gaya Ikon. Ya
Paragraf lineHeight, letterSpacing, textAlign, textDirection, lineBreak, dan hyphens. Ya
Dekorasi textDecoration, textIndent, dan baselineShift. Ya

Menggunakan Gaya langsung pada komponen dengan parameter Gaya

Komponen yang mengekspos parameter Style memungkinkan Anda menyetel gaya:

BaseButton(
    onClick = { },
    style = { }
) {
    BaseText("Click me")
}
StylesSnippets.kt

Dalam lambda gaya, Anda dapat menetapkan berbagai properti, seperti externalPadding atau background:

BaseButton(
    onClick = { },
    style = { background(Color.Blue) }
) {
    BaseText("Click me")
}
StylesSnippets.kt

Untuk mengetahui daftar lengkap properti yang didukung, lihat Properti yang tersedia di Gaya.

Menerapkan Gaya menggunakan pengubah untuk komponen tanpa parameter yang ada

Untuk komponen yang tidak memiliki parameter gaya bawaan, Anda tetap dapat menerapkan gaya dengan pengubah styleable. Pendekatan ini juga berguna saat mengembangkan komponen kustom Anda sendiri.

Row(
    modifier = Modifier.styleable { }
) {
    BaseText("Content")
}
StylesSnippets.kt

Mirip dengan parameter style, Anda dapat menyertakan properti seperti background atau padding di dalam lambda.

Row(
    modifier = Modifier.styleable {
        background(Color.Blue)
    }
) {
    BaseText("Content")
}
StylesSnippets.kt

Beberapa pengubah Modifier.styleable yang dirangkai bersifat aditif dengan properti yang tidak diwarisi pada composable yang diterapkan, berperilaku serupa dengan beberapa pengubah yang menentukan properti yang sama. Untuk properti yang diwariskan, properti ini diganti, dan pengubah styleable terakhir dalam rantai menetapkan nilai.

Saat menggunakan Modifier.styleable, Anda juga dapat membuat dan menyediakan StyleState untuk digunakan dengan pengubah guna menerapkan gaya berbasis status. Untuk mengetahui detail selengkapnya, lihat Status dan animasi dengan Gaya.

Menentukan Gaya mandiri

Anda dapat menentukan Gaya mandiri untuk tujuan penggunaan ulang:

val style = Style { background(Color.Blue) }
StylesSnippets.kt

Kemudian, Anda dapat meneruskan gaya yang ditentukan tersebut ke parameter gaya composable atau dengan Modifier.styleable. Saat menggunakan Modifier.styleable, Anda juga perlu membuat objek StyleState. StyleState dibahas secara mendetail dalam dokumentasi Status dan animasi dengan Gaya.

Contoh berikut menunjukkan cara menerapkan Gaya baik secara langsung melalui parameter bawaan komponen, atau melalui Modifier.styleable:

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}

// modifier styleable
val styleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(styleState, style)
) {
    BaseText("Column content")
}
StylesSnippets.kt

Anda juga dapat meneruskan Gaya tersebut ke beberapa komponen:

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}
BaseText("Different text that uses the same style parameter", style = style)

// modifier styleable
val columnStyleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(columnStyleState, style)
) {
    BaseText("Column")
}
val rowStyleState = remember { MutableStyleState(null) }
Row(
    Modifier.styleable(rowStyleState, style)
) {
    BaseText("Row")
}
StylesSnippets.kt

Menambahkan beberapa properti Gaya

Anda dapat menambahkan beberapa properti Gaya dengan menetapkan properti yang berbeda pada setiap baris:

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}
StylesSnippets.kt

Properti dalam Gaya tidak bersifat aditif, tidak seperti gaya berbasis pengubah. Gaya mengambil nilai yang ditetapkan terakhir dalam daftar properti dalam satu blok gaya. Dalam contoh berikut, dengan latar belakang yang ditetapkan dua kali, TealColor adalah latar belakang yang diterapkan. Untuk padding, contentPaddingTop menggantikan padding atas yang ditetapkan oleh contentPadding dan tidak menggabungkan nilai.

BaseButton(
    style = {
        background(Color.Red)
        // Background of Red is now overridden with TealColor instead
        background(TealColor)
        // All directions of padding are set to 64.dp (top, start, end, bottom)
        contentPadding(64.dp)
        // Top padding is now set to 16.dp, all other paddings remain at 64.dp
        contentPaddingTop(16.dp)
    },
    onClick = {
        //
    }
) {
    BaseText("Click me!")
}
StylesSnippets.kt

Tombol dengan dua warna latar belakang yang ditetapkan, dan dua penggantian contentPadding
Gambar 1. Tombol dengan dua warna latar belakang yang ditetapkan dan dua penggantian contentPadding.

Menggabungkan beberapa objek gaya

Anda dapat membuat beberapa objek Gaya dan meneruskannya ke parameter gaya composable Anda.

val style1 = Style { background(TealColor) }
val style2 = Style { contentPaddingTop(16.dp) }

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

Tombol dengan warna latar belakang dan contentPaddingTop ditetapkan
Gambar 2. Tombol dengan warna latar belakang dan setelan contentPaddingTop.

Jika beberapa Gaya menentukan properti yang sama, properti yang ditetapkan terakhir akan dipilih. Karena properti tidak bersifat aditif dalam Gaya, padding terakhir yang diteruskan akan menggantikan contentPaddingHorizontal yang ditetapkan oleh contentPadding awal. Selain itu, warna latar belakang terakhir akan menggantikan warna latar belakang yang ditetapkan oleh gaya awal yang diteruskan.

val style1 = Style {
    background(Color.Red)
    contentPadding(32.dp)
}

val style2 = Style {
    contentPaddingHorizontal(8.dp)
    background(Color.LightGray)
}

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

Dalam hal ini, gaya visual yang diterapkan memiliki latar belakang abu-abu muda dan padding 32.dp, kecuali padding kiri dan kanan, yang memiliki nilai 8.dp.

Tombol dengan contentPadding yang diganti oleh Style yang berbeda
Gambar 3. Tombol dengan contentPadding yang diganti oleh Gaya yang berbeda.

Pewarisan gaya

Properti gaya tertentu, seperti contentColor dan properti terkait gaya teks, di-propagasikan ke composable turunan. Setelan gaya pada composable turunan akan menggantikan gaya induk yang diwarisi untuk turunan tertentu tersebut.

Penyebaran gaya dengan parameter Style, styleable, dan direct
Gambar 4. Penyebaran gaya dengan parameter Style, styleable, dan langsung.
Prioritas Metode Efek
1 (Tertinggi) Argumen langsung pada composable Mengganti semuanya; misalnya, Text(color = Color.Red)
2 Parameter gaya Penggantian gaya lokal Text(style = Style { contentColor(Color.Red)}
3 Rantai pengubah Modifier.styleable{ contentColor(Color.Red) pada komponen itu sendiri.
4 (Terendah) Gaya induk Untuk properti yang dapat diwarisi (Tipografi/Warna) yang diturunkan dari induk.

Gaya induk

Anda dapat menetapkan properti teks (seperti contentColor) dari composable induk, dan properti tersebut akan diteruskan ke semua composable Text turunan.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children inherit", style = { width(60.dp) })
    BaseText("certain properties")
    BaseText("from their parents")
}
StylesSnippets.kt

Pewarisan properti composable turunan
Gambar 5. Pewarisan properti komponen turunan.

Penggantian properti turunan

Anda juga dapat menyetel gaya pada composable Text tertentu. Jika composable induk telah menetapkan gaya, gaya yang ditetapkan pada composable turunan akan menggantikan gaya composable induk.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children can ", style = {
        contentBrush(Brush.linearGradient(listOf(Color.Red, Color.Blue)))
    })
    BaseText("override properties")
    BaseText("set by their parents")
}
StylesSnippets.kt

Composable turunan mengganti properti induk
Gambar 6. Composable turunan mengganti properti induk.

Menerapkan properti Gaya kustom

Anda dapat membuat properti kustom yang dipetakan ke definisi Gaya yang ada menggunakan fungsi ekstensi di StyleScope, seperti yang ditunjukkan dalam contoh berikut:

fun StyleScope.outlinedBackground(color: Color) {
    border(1.dp, color)
    background(color)
}
StylesSnippets.kt

Terapkan properti baru ini dalam definisi Gaya:

val customExtensionStyle = Style {
    outlinedBackground(Color.Blue)
}
StylesSnippets.kt

Membuat properti baru yang dapat distilisasi tidak didukung. Jika kasus penggunaan Anda memerlukan dukungan tersebut, kirimkan permintaan fitur.

Baca nilai CompositionLocal

Pola umum untuk menyimpan token sistem desain dalam CompositionLocal, untuk mengakses variabel tanpa perlu meneruskannya sebagai parameter. Gaya dapat mengakses CompositionLocal untuk mengambil nilai di seluruh sistem dalam gaya:

val buttonStyle = Style {
    contentPadding(12.dp)
    shape(RoundedCornerShape(50))
    background(Brush.verticalGradient(LocalCustomColors.currentValue.background))
}
StylesSnippets.kt