Dasar-Dasar Gaya

Ada tiga cara untuk menerapkan Gaya di seluruh aplikasi Anda:

  1. Gunakan langsung pada komponen yang ada yang mengekspos Style parameter.
  2. Terapkan gaya dengan Modifier.styleable pada tata letak composable 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 Gaya

Gaya mendukung banyak properti yang sama dengan yang didukung pengubah; namun, tidak semua yang merupakan pengubah dapat direplikasi dengan Gaya. Anda masih 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 terarah, horizontal, vertikal, dan semua sisi. Tidak
Dimensi fillWidth/Height/Size() dan width, height, dan size (mendukung pecahan Dp, DpSize, atau Float). Tidak
Positioning Offset left/top/right/bottom. 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 lainnya. clip dan border menggunakan bentuk yang ditentukan ini.
Bayangan dropShadow, innerShadow Tidak
Transformations
Pergerakan spasial lapisan grafis translationX, translationY, scaleX/Y, rotationX/Y/Z Tidak
Kontrol alpha, zIndex (urutan penumpukan), dan transformOrigin (titik pivot) Tidak
Tipografi
Gaya visual textStyle, fontSize, fontWeight, fontStyle, dan fontFamily Ya
Pewarnaan contentColor dan contentBrush. Hal 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 menetapkan 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 mirip dengan beberapa pengubah yang menentukan properti yang sama. Untuk properti yang diwarisi, properti ini diganti, dan pengubah styleable terakhir dalam rantai menetapkan nilai.

Saat menggunakan Modifier.styleable, Anda mungkin juga ingin 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 kembali:

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 di setiap baris:

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

Properti di 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 mengganti 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.

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 contentPaddingTop yang ditetapkan.

Jika beberapa Gaya menentukan properti yang sama, properti yang ditetapkan terakhir akan dipilih. Karena properti tidak bersifat aditif di Gaya, padding terakhir yang diteruskan akan mengganti contentPaddingHorizontal yang ditetapkan oleh contentPaddingawal. Selain itu, warna latar belakang terakhir akan mengganti 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 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, disebarkan ke composable turunan. Gaya yang ditetapkan pada composable turunan akan mengganti 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 diteruskan dari induk.

Gaya induk

Anda dapat menetapkan properti teks (seperti contentColor) dari composable induk, dan properti tersebut akan disebarkan 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 composable turunan.

Penggantian properti turunan

Anda juga dapat menetapkan gaya pada composable Text tertentu. Jika composable induk memiliki gaya yang ditetapkan, gaya yang ditetapkan pada composable turunan akan mengganti 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.

Mengimplementasikan properti Gaya kustom

Anda dapat membuat properti kustom yang dipetakan ke definisi Gaya yang ada dengan 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

Pembuatan properti styleable baru tidak didukung. Jika kasus penggunaan Anda memerlukan dukungan tersebut, kirimkan permintaan fitur.

Membaca nilai CompositionLocal

Pola umum untuk menyimpan token sistem desain dalam CompositionLocal adalah 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

Sebelumnya
Ringkasan
Berikutnya
Status dan animasi dalam Gaya