Modifier'lar

Bir Modifier bir composable'ı süsler ya da ona yeni bir şey katar: boyutunu ve iç boşluğunu, arka planını, tıklanınca ne olacağını, erişilebilirlik servislerine ne söyleyeceğini. Modifier'lar zincirlenir ve zincirin sırası önemlidir.

#Modifier kullanmak

Çoğu composable parametre olarak bir Modifier alır. Zincir Modifier() ile başlar ve her çağrı bir öğe ekler:

void ArtistCard(const std::string& name) {
Row(Modifier()
.fillMaxWidth()
.clickable([] { /* sanatçıyı aç */ })
.padding(16),
[&] {
Icon(Icons::Filled::Person, "", Modifier().size(40));
Spacer(Modifier().width(12));
Text(name, {.font = typography().titleMedium});
});
}

Modifier'lar düz değerlerdir: onları değişkenlerde saklayabilir, bir yerden bir yere aktarabilir, koşula göre kurabilirsiniz.

Modifier base = Modifier().fillMaxWidth().padding(8);
Box(selected ? base.background(colorScheme().secondaryContainer, 12) : base);

#Sıra önemlidir

Her öğe, zincirde kendinden sonra gelen her şeyi sarar. İlk öğe en dıştakidir: ilk o ölçülür ve geri kalanın çevresine çizilir. Bu yüzden aynı öğeler farklı sırada farklı sonuç verir:

// 72 dp'lik alanın tamamı tıklanabilir ve iç boşluk tıklama alanının içindedir.
Box(Modifier().clickable([] {}).padding(16).size(40));

// Yalnız 40 dp'lik kutu tıklanabilir; iç boşluk onun dışındadır.
Box(Modifier().padding(16).clickable([] {}).size(40));

Arka planlar için de aynısı geçerli:

Box(Modifier().background(colorScheme().primaryContainer).padding(16).size(40));   // iç boşluk boyanır
Box(Modifier().padding(16).background(colorScheme().primaryContainer).size(40));   // iç boşluk boyanmaz

Bir zinciri soldan sağa, "dıştan içe" diye okuyun.

#Sık kullanılan modifier'lar

#Boyut

Tüm uzunluklar dp cinsindendir.

#İç boşluk ve konum

#Çizim

#Etkileşim

#Erişilebilirlik ve testler

#Yerleşim geri çağrıları

#Scope modifier'ları

Bazı modifier'lar, Compose'un scope'a bağlı modifier'ları (RowScope.weight) gibi, yalnız belirli bir ebeveynin içinde anlam taşır:

C++'ta bunlar sıradan Modifier metotlarıdır: derleyici weight'i bir Row ya da Column dışında kullanmanıza engel olmaz, yalnızca orada bir etkisi olmaz.

Row(Modifier().fillMaxWidth(), [&] {
Text("Left", Modifier().weight(1));
Text("Right");
});

#Kendi modifier'ınızı yazmak

#Modifier'ları birleştirmek

C++'ta extension fonksiyonlar yok, bu yüzden kendi modifier'ınız bir zincir döndüren bir fonksiyondur. Onu başka bir zincire then ile ekleyin:

Modifier cardSurface() {
return Modifier().shadow(2, RoundedCornerShape(16)).background(colorScheme().surfaceContainerLow, RoundedCornerShape(16)).padding(16);
}

void Note(const std::string& text) {
Box(Modifier().fillMaxWidth().then(cardSurface()), [&] { Text(text); });
}

Genişleteceği zinciri parametre olarak alan bir fonksiyon da doğal okunur: Modifier card(const Modifier& m = {}) { return m.padding(…); }.

#Ölçümü değiştirmek

layout, içeriği sizin seçtiğiniz kısıtlarla measure üzerinden ölçer ve bu düğümün boyutunu döndürür; placeAt içeriğin bu düğüm içinde nereye gideceğini söyler:

// İçerik, uzun kenarı kadar büyük bir karenin ortasında.
Modifier squareAround() {
return Modifier().layout([](const MeasureNext& measure, const Constraints& c, Offset& placeAt) {
Size content = measure(c.loosen());
float side = std::max(content.width, content.height);
placeAt = {(side - content.width) / 2, (side - content.height) / 2};
return c.constrain(Size{side, side});
});
}

#Özel çizim

drawBehind içeriğin arkasına, drawWithContent çevresine çizer. Bkz. Grafik.

Modifier underline(Color color) {
return Modifier().drawBehind([color](DrawScope& d) {
d.drawLine(color, {0, d.size().height}, {d.size().width, d.size().height}, 2);
});
}

#Modifier öğeleri

Perde arkasında bir modifier, ModifierElement'lerden oluşan bir listedir. Bir öğe ölçüme, çizime ve girdiye katılabilir; then(std::make_shared<MyElement>(…)) bir tane ekler. Bu, kütüphanenin kendi modifier'larının kullandığı daha alt düzey bir API'dir; ihtiyaçların çoğunu yukarıdaki fonksiyonlar karşılar. Bir öğe yazarsanız equals'ı da yazın ki eşit bir modifier'la çağrılan bir composable yine atlanabilsin.

#Ayrıca bakın

• Yerleşimler: scope modifier'larının çalıştığı ebeveynler.
• Aşamalar: yerleşim ya da çizim sırasında durum okuyan modifier'lar.
• Etkileşim ve çizim modifier'ları için Hareketler ve Grafik.