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

Catatan: Saat menggunakan Modifier.styleable, composable turunan tidak akan memiliki properti tersebut yang diterapkan padanya, kecuali jika properti tersebut adalah properti yang diwarisi. Hanya penampung dengan pengubah styleable yang memiliki properti tersebut yang diterapkan.

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

Penting: Tidak seperti gaya berbasis pengubah, properti di Gaya saling mengganti; properti terakhir yang ditentukan akan diutamakan.

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

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

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.

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.

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.

Catatan: Beberapa pengubah Modifier.styleable yang dirangkai bersifat aditif dengan properti yang tidak diwarisi pada composable yang diterapkan, mirip dengan memiliki beberapa pengubah yang menentukan properti yang sama. Untuk properti yang diwarisi, properti ini diganti; pengubah styleable terakhir dalam rantai menetapkan nilai.

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

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

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