Oluşturma değiştiriciler

Değiştiriciler, bir bileşeni süslemenize veya geliştirmenize olanak tanır. Değiştiriciler şunları yapmanıza olanak tanır: bir şeyler var:

• Bileşenin boyutunu, düzenini, davranışını ve görünümünü değiştirme
• Erişilebilirlik etiketleri gibi bilgiler ekleme
• Kullanıcı girişini işleme
• Bir öğeyi tıklanabilir, kaydırılabilir, sürüklenebilir veya yakınlaştırabilir hale getirme gibi üst düzey etkileşimler ekleyin

Değiştiriciler, standart Kotlin nesneleridir. Aşağıdaki Modifier sınıf işlevlerinden birini çağırarak bir değiştirici oluşturun:

@Composable
private fun Greeting(name: String) {
    Column(modifier = Modifier.padding(24.dp)) {
        Text(text = "Hello,")
        Text(text = name)
    }
}
ModifierSnippets.kt

İşlevleri birbirine bağlayarak oluşturmak için şu zincirleri kullanabilirsiniz:

@Composable
private fun Greeting(name: String) {
    Column(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxWidth()
    ) {
        Text(text = "Hello,")
        Text(text = name)
    }
}
ModifierSnippets.kt

Yukarıdaki kodda, farklı değiştirici işlevlerinin birlikte kullanıldığına dikkat edin.

• padding, bir öğenin etrafına boşluk bırakır.
• fillMaxWidth, composable'ın, kendisine verilen maksimum genişliği doldurmasını sağlar üst öğesi olabilir.

Kompozit öğelerinizin tümünün bir modifier parametresi kabul etmesi ve bu değiştiriciyi kullanıcı arayüzü yayınlayan ilk alt öğesine iletmesi en iyi uygulamadır. Böylece, ve davranışını daha öngörülebilir ve sezgisel hale getirir. Örneğin, daha fazla bilgi için Compose API yönergelerine bakın, Öğeler, bir öğeyi Değiştirici parametre.

Değiştiricilerin sırası önemlidir

Değiştirici işlevlerin sırası önemlidir. Her fonksiyon Modifier işlevindeki değişiklikler, önceki işlev tarafından döndürülen dizi nihai sonucu etkiler. Şimdi bir örnek inceleyelim:

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}
ModifierSnippets.kt

Yukarıdaki kodda, padding değiştiricisi clickable değiştiricisinden sonra uygulandığı için çevreleyen dolgu dahil olmak üzere alanın tamamı tıklanabilir. Değiştiricilerin sırası tersine çevrilirse padding tarafından eklenen boşluk kullanıcı girişine tepki vermez:

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}
ModifierSnippets.kt

Not: Açık sıra sıra, farklı değiştiricilerin ne kadar etkili olacağına karar vermenize yardımcı olur. etkileşimde bulunur. Bunu, kutu modelini öğrenmeniz gereken, kenar boşluklarının öğenin "dışarına", dolgunun ise "içerisine" uygulandığı ve arka plan öğesinin buna göre boyutlandırıldığı görünüme dayalı sistemle karşılaştırın. Değiştirici tasarımı, bu tür davranışları açık ve tahmin edilebilir hale getirir ve tam olarak istediğiniz davranışı elde etmek için size daha fazla kontrol sağlar. Ayrıca, bir marj düzenleyicinin neden yalnızca padding olanı.

Yerleşik değiştiriciler

Jetpack Compose, bir bileşeni süslemenize veya geliştirmenize yardımcı olacak yerleşik değiştiricilerin bir listesini sağlar. Reklam öğelerinizi ayarlamak için kullanacağınız düzenler.

Not: Bu değiştiricilerin çoğu, kullanıcı arayüzünüzün düzenini tam istediğiniz şekilde düzenlemenize yardımcı olmak için tasarlanmıştır. Değiştiricilerin Google Analytics 4'te Oluşturma düzeni hakkında temel bilgiler belgelerden biri.

padding ve size

Oluşturma bölümünde sağlanan düzenler varsayılan olarak alt öğelerini sarmalar. Ancak, size değiştiricisini kullanarak bir boyut ayarlayabilirsiniz:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(/*...*/)
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

Bu boyutun karşılanmaması durumunda, belirttiğiniz boyuta uyulmayabileceğini unutmayın düzenin üst öğesinden gelen kısıtlamalarla ilgilidir. composable'a ihtiyacınız varsa, gelen kısıtlamalardan bağımsız olarak sabitlenecek boyutu değiştirmek için requiredSize değiştirici:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            /*...*/
            modifier = Modifier.requiredSize(150.dp)
        )
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

Bu örnekte, üst öğe height 100.dp olarak ayarlanmış olsa bile requiredSize değiştiricisi öncelikli olduğundan Image öğesinin yüksekliği 150.dp olur.

Not: İçerikler, kısıtlamalara dayanır ve genellikle üst öğe bu kısıtlamaları alt öğelere iletir. Çocuk, kısıtlamalara uymalı. Ancak kullanıcı arayüzü her zaman bu şekilde çalışmayabilir. Paydaşlarla iletişime geçmenin atlanır. Örneğin, requiredSize gibi değiştiricileri doğrudan alt öğeye ileterek alt öğenin üst öğeden aldığı kısıtlamaları geçersiz kılabilirsiniz veya farklı davranışa sahip özel bir düzen kullanabilirsiniz. Bir alt öğe kısıtlamalarına uymazsa düzen sistemi bunu ebeveynden gizleyebilirsiniz. Ebeveyn, alt öğenin width ve height değerlerini ebeveyn tarafından sağlanan kısıtlamalara göre zorunlu kılınmış gibi görür. Ardından, düzen sistemi, çocuğun kısıtlamalara uyduğu varsayılarak alt öğeyi üst öğe tarafından ayrılan alanda ortalar. Geliştiriciler, wrapContentSize alt öğeye değiştirici uygulayarak bu merkezleme davranışını geçersiz kılabilir.

Bir alt düzenin, üst öğe tarafından izin verilen tüm yüksekliği doldurmasını istiyorsanız fillMaxHeight değiştiricisini ekleyin (Oluşturma'da fillMaxSize ve fillMaxWidth de sağlanır):

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            /*...*/
            modifier = Modifier.fillMaxHeight()
        )
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

Bir öğenin etrafına dolgu eklemek için padding değiştiricisini ayarlayın.

Metin referansının üstüne dolgu eklemek isterseniz düzenin üst kısmından temel çizgisine kadar belirli bir mesafeyi görmek için paddingFromBaseline değiştirici:

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(
                text = artist.name,
                modifier = Modifier.paddingFromBaseline(top = 50.dp)
            )
            Text(artist.lastSeenOnline)
        }
    }
}
ModifierSnippets.kt

Zaman farkı

Bir düzeni orijinal konumuna göre konumlandırmak için offset değiştiricisini ekleyin ve x ile y ekseninde ofseti ayarlayın. Ofsetler pozitif veya pozitif olmayan olabilir. padding ile offset arasındaki fark, bir bileşiğe offset eklendiğinde ölçümlerinin değişmemesidir:

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(artist.name)
            Text(
                text = artist.lastSeenOnline,
                modifier = Modifier.offset(x = 4.dp)
            )
        }
    }
}
ModifierSnippets.kt

offset değiştiricisi, düzen yönüne göre yatay olarak uygulanır. Soldan sağa bir bağlamda pozitif bir offset, öğeyi ise sağdan sola bağlamda öğeyi sola kaydırır. Sayfa düzeni yönünü dikkate almadan bir ofset ayarlamanız gerekiyorsa pozitif bir ofset değerinin öğeyi her zaman sağa kaydırdığı absoluteOffset değiştiriciye bakın.

offset değiştirici, iki aşırı yükleme sağlar: Ofsetleri parametre olarak alan offset ve lambda alan offset. Bunlardan her birinin ne zaman kullanılacağı ve daha fazla bilgi edinmek için Performans oluşturma - Okumaları mümkün olduğunca uzun ertele bölümü.

Oluşturma'da kapsam güvenliği

Oluşturma'da yalnızca çocuklara uygulandığında kullanılabilen değiştiriciler vardır belirli composable'ların Compose, bunu özel kapsamlar aracılığıyla uygular.

Örneğin, Box boyutunu etkilemeden bir alt öğeyi Box öğesi kadar büyük yapmak istiyorsanız matchParentSize değiştiricisini kullanın. matchParentSize yalnızca şuralarda kullanılabilmektedir: BoxScope Bu nedenle, yalnızca Box üst öğesi altındaki bir alt öğede kullanılabilir.

Kapsam güvenliği, diğer bileşimlerde ve kapsamlarda çalışmayacak değiştiriciler eklemenizi önler ve deneme yanılma sürecinden tasarruf etmenizi sağlar.

Not: Android View sisteminde kapsam güvenliği yoktur. Geliştiriciler genellikle hangilerinin dikkate alındığını ve belirli bir üst öğe bağlamında anlamlarını öğrenmek için farklı düzen parametrelerini denemektedir.

Kapsamlı değiştiriciler, üst öğeyi bazı bilgiler hakkında ebeveyne bildirir düşünmesi gerekir. Bunlara genellikle üst veri değiştiriciler denir. Bu işlevlerin iç yapısı, genel amaçlı değiştiricilerden farklıdır ancak kullanım açısından bu farklılıklar önemli değildir.

matchParentSize Box içinde başlıyor

Yukarıda belirtildiği gibi, bir alt düzenin üst öğe ile aynı boyutta olmasını istiyorsanız Box boyutunu etkilemeden Box için matchParentSize değiştiriciyi kullanın.

matchParentSize'ün yalnızca Box kapsamında kullanılabildiğini unutmayın. Yani yalnızca Box bileşenlerinin doğrudan alt öğeleri için geçerlidir.

Aşağıdaki örnekte Spacer alt öğesi, boyutunu Box olan üst öğesinden alıyor. Bu da, boyutunu en büyük çocuklara göre alır. Bu örnekte ArtistCard.

@Composable
fun MatchParentSizeComposable() {
    Box {
        Spacer(
            Modifier
                .matchParentSize()
                .background(Color.LightGray)
        )
        ArtistCard()
    }
}
ModifierSnippets.kt

matchParentSize yerine fillMaxSize kullanılsaydı Spacer ebeveyn için izin verilen kullanılabilir alanın tamamını oluşturur; bu da, genişletip mevcut alanı doldurun.

Row ve Column içinde weight

Önceki bölümde gördüğünüz gibi Dolgu ve boyut, bir composable'ın varsayılan olarak emin olun. Bir composable'ın bu boyutun yalnızca RowScope içinde mevcut olan weight Değiştiriciyi kullanan ve ColumnScope.

İki Box composable içeren bir Row düşünelim. İlk kutu, ikincinin weight oranının iki katı olduğundan bu kutuya iki kat daha fazla dokunun. Row, 210.dp genişliğinde olduğundan ilk Box genişliği 140.dp ve ikincisi 70.dp:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            /*...*/
            modifier = Modifier.weight(2f)
        )
        Column(
            modifier = Modifier.weight(1f)
        ) {
            /*...*/
        }
    }
}
ModifierSnippets.kt

Değiştiricileri çıkarma ve yeniden kullanma

Birden fazla değiştiriciyi süslemek veya süslemek için birbirine zincirlenebilir composable'ı güçlendiriyor. Bu zincir, tek Modifier.Elements öğelerinin sıralı ve değiştirilemez bir listesini temsil eden Modifier arayüzü aracılığıyla oluşturulur.

Her Modifier.Element, düzen, çizim gibi bireysel bir davranışı temsil eder ve grafik davranışları, hareketle ilgili tüm, odaklanma ve anlamsal davranışlar ve cihaz giriş etkinlikleri. Bunların sıralaması önemlidir: etkili değiştirici önce eklenenler uygulanır.

Bazen aynı değiştirici zinciri örneklerini birden fazla bileşimde yeniden kullanmak yararlı olabilir. Bunun için örnekleri değişkenlere ayıklayıp daha yüksek kapsamlara taşıyabilirsiniz. Kod okunabilirliğini iyileştirebilir veya uygulamanızın birkaç nedenden dolayı:

• Değiştiricilerin yeniden alımı, bunları kullanan kompozisyonlar için yeniden kompozisyon oluştuğunda tekrarlanmaz.
• Değiştirici zincirleri çok uzun ve karmaşık olabilir. Bu nedenle, aynı zincir örneğini yeniden kullanmak, Compose çalışma zamanında zincirleri karşılaştırırken yapması gereken iş yükünü azaltabilir.
• Bu ayıklama işlemi kodun temizliğini, tutarlılığını ve sürdürülebilirliğini teşvik eder kod tabanı boyunca

Değiştiricileri yeniden kullanmak için en iyi uygulamalar

Kendi Modifier zincirlerinizi oluşturun ve bunları birden fazla birleştirilebilir bileşende yeniden kullanmak için ayıklayın. Veri benzeri nesneler oldukları için değiştiricileri yalnızca kaydetmenizde herhangi bir sakınca yoktur:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)
ModifierSnippets.kt

Sık sık değişen durumu gözlemlerken değiştiricileri çıkarma ve yeniden kullanma

Animasyon durumları veya scrollState gibi, bileşenler içinde sık sık değişen durumlar gözlemlendiğinde önemli miktarda yeniden kompozisyon yapılabilir. Bu durumda, değiştiricileriniz her yeniden oluşturmada ayrılacaktır her karede izlemesi gerekir:

@Composable
fun LoadingWheelAnimation() {
    val animatedState = animateFloatAsState(/*...*/)

    LoadingWheel(
        // Creation and allocation of this modifier will happen on every frame of the animation!
        modifier = Modifier
            .padding(12.dp)
            .background(Color.Gray),
        animatedState = animatedState
    )
}
ModifierSnippets.kt

Bunun yerine, değiştiricinin aynı örneğini oluşturup ayıklayabilir, yeniden kullanabilir ve aşağıdaki gibi birleştirilebilir öğeye iletebilirsiniz:

// Now, the allocation of the modifier happens here:
val reusableModifier = Modifier
    .padding(12.dp)
    .background(Color.Gray)

@Composable
fun LoadingWheelAnimation() {
    val animatedState = animateFloatAsState(/*...*/)

    LoadingWheel(
        // No allocation, as we're just reusing the same instance
        modifier = reusableModifier,
        animatedState = animatedState
    )
}
ModifierSnippets.kt

Kapsamsız değiştiricileri ayıklayıp yeniden kullanma

Değiştiricilerin kapsamı kaldırılabilir veya belirli bir bileşiğe göre belirlenebilir. Kapsamlı olmayan değiştiriciler söz konusu olduğunda bunları kolayca ayıklayabilirsiniz dışında basit bir değişken oluşturun:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)

@Composable
fun AuthorField() {
    HeaderText(
        // ...
        modifier = reusableModifier
    )
    SubtitleText(
        // ...
        modifier = reusableModifier
    )
}
ModifierSnippets.kt

Bu, özellikle Tembel düzenlerle birleştirildiğinde yararlı olabilir. Çoğu zaman olması durumunda, potansiyel olarak önemli miktarda öğelerinizin tümünün tam olarak aynı değiştiricileri kullanın:

val reusableItemModifier = Modifier
    .padding(bottom = 12.dp)
    .size(216.dp)
    .clip(CircleShape)

@Composable
private fun AuthorList(authors: List<Author>) {
    LazyColumn {
        items(authors) {
            AsyncImage(
                // ...
                modifier = reusableItemModifier,
            )
        }
    }
}
ModifierSnippets.kt

Kapsamlı değiştiricileri ayıklayıp yeniden kullanma

Kapsamı belirli composable'lara ayarlanmış değiştiricilerle çalışırken, Bu dosyaları mümkün olan en üst düzeye çıkarın ve uygun olduğunda tekrar kullanın:

Column(/*...*/) {
    val reusableItemModifier = Modifier
        .padding(bottom = 12.dp)
        // Align Modifier.Element requires a ColumnScope
        .align(Alignment.CenterHorizontally)
        .weight(1f)
    Text1(
        modifier = reusableItemModifier,
        // ...
    )
    Text2(
        modifier = reusableItemModifier
        // ...
    )
    // ...
}
ModifierSnippets.kt

Çıkarılan, kapsamlı değiştiricileri yalnızca doğrudan etkili çocuklardır. Bunun neden önemli olduğu hakkında daha fazla bilgi için Oluşturma'da kapsam güvenliği bölümüne bakın:

Column(modifier = Modifier.fillMaxWidth()) {
    // Weight modifier is scoped to the Column composable
    val reusableItemModifier = Modifier.weight(1f)

    // Weight will be properly assigned here since this Text is a direct child of Column
    Text1(
        modifier = reusableItemModifier
        // ...
    )

    Box {
        Text2(
            // Weight won't do anything here since the Text composable is not a direct child of Column
            modifier = reusableItemModifier
            // ...
        )
    }
}
ModifierSnippets.kt

Çıkarılan değiştiricilerde daha fazla zincirleme

Ayıklanan değiştirici zincirlerinizi daha fazla zincir haline getirmek veya ekleyebilirsiniz. Bunun için .then() işlevi:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)

// Append to your reusableModifier
reusableModifier.clickable { /*...*/ }

// Append your reusableModifier
otherModifier.then(reusableModifier)
ModifierSnippets.kt

Değiştiricilerin sırasının önemli olduğunu unutmayın.

Daha fazla bilgi

Parametreleri ve kapsamlarıyla birlikte değişkenler için tam bir liste sunuyoruz.

Değiştiricileri kullanmayla ilgili daha fazla alıştırma yapmak için Compose codelab'deki temel düzenler başlıklı makaleyi inceleyebilir veya Artık Android deposunda başlıklı makaleyi inceleyebilirsiniz.

Özel değiştiriciler ve bunların nasıl oluşturulacağı hakkında daha fazla bilgi için Özel düzenler - Düzen değiştiriciyi kullanma başlıklı dokümanları inceleyin.