Anjuran dan larangan penggunaan Gaya

Halaman ini menjelaskan praktik terbaik untuk menggunakan gaya yang mencapai konsistensi di seluruh codebase Anda, serta prinsip yang kami ikuti saat mendesain API.

Anjuran

Ikuti praktik terbaik berikut:

Lakukan: Gunakan Gaya untuk visual dan pengubah untuk perilaku

Gunakan Styles API untuk konfigurasi visual (latar belakang, padding, batas), dan cadangkan pengubah untuk perilaku seperti logika klik, deteksi gestur, atau aksesibilitas.

Lakukan: Menampilkan parameter Gaya dalam sistem desain

Untuk komponen sistem desain kustom Anda sendiri, Anda harus mengekspos objek Style setelah parameter pengubah.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

Lakukan: Mengganti parameter berbasis visual dengan Gaya

Pertimbangkan untuk mengganti parameter pada composable Anda dengan satu parameter Style. Contoh:

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

Lakukan: Memprioritaskan Gaya untuk animasi

Gunakan blok animate bawaan untuk gaya berbasis status dengan animasi untuk peningkatan performa dibandingkan pengubah.

Lakukan: Manfaatkan "Penulisan terakhir menang"

Manfaatkan fakta bahwa properti style menimpa, bukan menumpuk. Gunakan ini untuk mengganti batas atau latar belakang komponen default tanpa memerlukan beberapa parameter.

Larangan

Pola berikut tidak disarankan:

Jangan: Menggunakan Gaya untuk logika interaksi

Jangan mencoba menangani deteksi onClick atau gestur dalam gaya. Gaya terbatas pada konfigurasi visual berdasarkan status, sehingga tidak boleh menangani logika bisnis; sebagai gantinya, gaya hanya boleh memiliki visual yang berbeda berdasarkan status.

Jangan: Menyediakan gaya default sebagai parameter default

Parameter gaya harus selalu dideklarasikan menggunakan style: Style = Style:

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

Untuk menyertakan parameter "default", gabungkan gaya parameter masuk dengan default yang ditentukan:

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

Jangan: Berikan parameter gaya ke composable berbasis tata letak

Meskipun Anda dapat memberikan gaya ke composable apa pun, composable berbasis tata letak, atau composable tingkat layar, tidak diharapkan untuk menerima gaya. Dari sudut pandang konsumen, tidak jelas apa yang akan dilakukan gaya di tingkat ini. Gaya dirancang untuk komponen, bukan tata letak.