Stillerle İlgili Temel Bilgiler

Uygulamanızda stilleri kullanmanın üç yolu vardır:

1. Style parametresi sunan mevcut bileşenlerde doğrudan kullanın.
2. Style parametresini kabul etmeyen düzenlenebilir düzenlere Modifier.styleable ile stil uygulayın.
3. Kendi özel tasarım sisteminizde Modifier.styleable{} kullanın ve kendi bileşenlerinizde bir stil parametresi gösterin.

Stillerde kullanılabilen özellikler

Stiller, değiştiricilerin desteklediği özelliklerin çoğunu destekler. Ancak değiştirici olan her şey bir stille kopyalanamaz. Etkileşimler, özel çizim veya özelliklerin yığılması gibi belirli davranışlar için değiştiricilere ihtiyacınız vardır.

Stilleri doğrudan stil parametreleri içeren bileşenlerde kullanma

Style parametresini gösteren bileşenler, stillerini ayarlamanıza olanak tanır:

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

Stil lambda'sında externalPadding veya background gibi çeşitli özellikleri ayarlayabilirsiniz:

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

Desteklenen özelliklerin tam listesi için Stiller'de kullanılabilen özellikler başlıklı makaleye bakın.

Mevcut parametresi olmayan bileşenler için değiştiriciler kullanarak stiller uygulama

Yerleşik stil parametresi olmayan bileşenlerde styleable değiştiricisini kullanarak stiller uygulayabilirsiniz. Bu yaklaşım, kendi özel bileşenlerinizi geliştirirken de faydalıdır.

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

style parametresine benzer şekilde, lambda'ya background veya padding gibi özellikler ekleyebilirsiniz.

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

Birden fazla zincirlenmiş Modifier.styleable değiştirici, uygulanan composable'daki devralınmamış özelliklerle birlikte eklenir ve aynı özellikleri tanımlayan birden fazla değiştiriciye benzer şekilde davranır. Devralınan özellikler geçersiz kılınır ve zincirdeki son styleable değiştiricisi değerleri ayarlar.

Modifier.styleable kullanırken eyalet tabanlı stil uygulamak için değiştiriciyle birlikte kullanılacak bir StyleState oluşturup sağlamak da isteyebilirsiniz. Daha fazla bilgi için Stillerle durum ve animasyonlar başlıklı makaleyi inceleyin.

Bağımsız bir stil tanımlama

Yeniden kullanılabilirlik amacıyla bağımsız bir stil tanımlayabilirsiniz:

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

Daha sonra, tanımlanan stili bir composable'ın stil parametresine veya Modifier.styleable ile iletebilirsiniz. Modifier.styleable kullanırken bir StyleState nesnesi de oluşturmanız gerekir. StyleState, Stillerle Durum ve Animasyonlar dokümanında ayrıntılı olarak ele alınmıştır.

Aşağıdaki örnekte, bir stili doğrudan bir bileşenin yerleşik parametreleri aracılığıyla veya Modifier.styleable aracılığıyla nasıl uygulayabileceğiniz gösterilmektedir:

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

Bu stili birden fazla bileşene de aktarabilirsiniz:

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

Birden çok stil özelliği ekleme

Her satırda farklı özellikler ayarlayarak birden fazla Stil özelliği ekleyebilirsiniz:

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

Stillerdeki özellikler, değiştirici tabanlı stilin aksine eklenmez. Stiller, bir stil bloğundaki özellikler listesinde ayarlanan son değeri alır. Aşağıdaki örnekte, arka plan iki kez ayarlandığında TealColor uygulanan arka plandır. Dolgu için contentPaddingTop, contentPadding tarafından ayarlanan üst dolguyu geçersiz kılar ve değerleri birleştirmez.

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

içeren düğme.

Birden fazla stil nesnesini birleştirme

Birden fazla Stil nesnesi oluşturabilir ve bunları composable'ınızın stil parametresine iletebilirsiniz.

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

BaseButton(
    style = style1 then style2,
    onClick = {

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

Birden fazla stil aynı özelliği belirttiğinde son ayarlanan özellik seçilir. Özellikler stillerde toplama işlemine tabi olmadığından, son iletilen dolgu, ilk contentPadding tarafından ayarlanan contentPaddingHorizontal değerini geçersiz kılar. Ayrıca, son arka plan rengi, başlangıçta iletilen stil tarafından ayarlanan arka plan rengini geçersiz kılar.

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

Bu durumda, uygulanan stilin açık gri bir arka planı ve 32.dp dolgusu vardır. Sol ve sağ dolgu ise 8.dp değerine sahiptir.

Stil devralma

contentColor ve metin stiliyle ilgili özellikler gibi belirli stil özellikleri, alt composable'lara yayılır. Bir alt composable'da ayarlanan stil, söz konusu alt öğe için devralınan üst stili geçersiz kılar.

Üst öğe stili

Üst composable'dan metin özellikleri (ör. contentColor) ayarlayabilir ve bunları tüm alt Text composable'lara yayabilirsiniz.

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

Özelliklerin alt öğe tarafından geçersiz kılınması

Ayrıca belirli bir Text composable'da stil de ayarlayabilirsiniz. Üst composable'da stil ayarlanmışsa alt composable'da ayarlanan stil, üst composable'ın stilini geçersiz kılar.

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

Özel stil özellikleri uygulama

Aşağıdaki örnekte gösterildiği gibi, StyleScope üzerinde uzantı işlevlerini kullanarak mevcut Stil tanımlarıyla eşlenen özel özellikler oluşturabilirsiniz:

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

Bu yeni özelliği bir stil tanımında uygulayın:

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

Yeni stil verilebilir özellikler oluşturma desteklenmez. Kullanım alanınızda bu tür bir destek gerekiyorsa özellik isteği gönderin.

CompositionLocal değerlerini okuma

Tasarım sistemi jetonlarını CompositionLocal içinde depolamak, değişkenlere parametre olarak iletmeye gerek kalmadan erişmek için yaygın bir yöntemdir. Stiller, stil içinde sistem genelindeki değerleri almak için CompositionLocal'ye erişebilir:

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