Düğme

keywords: AiAssisted, product:JetpackCompose

Düğmeler, kullanıcının tanımlanmış bir işlemi tetiklemesine olanak tanıyan temel bileşenlerdir. Beş tür düğme vardır. Bu tabloda, beş düğme türünün her birinin görünümü ve bunları nerede kullanmanız gerektiği açıklanmaktadır:

Tür Görünüm Amaç
Doldurulmuş Kontrastlı metin içeren düz arka plan. Yüksek vurgulu düğmeler. Bunlar, bir uygulamadaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti, düğmenin önemini vurgular.
Dolu tonal Arka plan rengi, yüzeyle eşleşecek şekilde değişir. Birincil veya önemli işlemler için de geçerlidir. Dolu tonlu düğmeler daha fazla görsel ağırlık sağlar ve "alışveriş sepetine ekle" ile "oturum aç" gibi işlevlere uygundur.
Normalden yüksek Gölgesi sayesinde öne çıkar. Ton düğmelerine benzer bir amaca hizmet eder. Düğmenin daha da belirgin görünmesi için yüksekliği artırın.
Dış çizgili İçi boş bir kenarlığa sahiptir. Önemli ancak birincil olmayan işlemleri içeren orta vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi eşleşirler.
Metin Arka planı veya kenarlığı olmayan metinleri gösterir. Gezinme bağlantıları veya "Daha fazla bilgi" ya da "Ayrıntıları görüntüle" gibi ikincil işlevler gibi daha az kritik işlemler için ideal olan düşük vurgulu düğmeler.

Bu resimde, Material Design'daki beş düğme türü gösterilmektedir:

Beş düğme bileşeninin her birine ait, kendine özgü özelliklerinin vurgulandığı bir örnek.
Şekil 1. Beş düğme bileşeni.

API yüzeyi

onClick
Kullanıcı düğmeye bastığında sistemin çağırdığı işlev.
enabled
Bu parametre false olduğunda düğme kullanılamaz ve etkin değil olarak görünür.
colors
Düğmede kullanılan renkleri belirleyen bir ButtonColors örneği.
contentPadding
Düğme içindeki dolgu.

Doldurulmuş düğme

Dolu düğme bileşeni, temel Button composable'ını kullanır. Varsayılan olarak düz bir renkle doldurulur. Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

Arka planı mor olan ve üzerinde "Dolu" yazan doldurulmuş bir düğme.
Şekil 2. Dolu düğme.

Dolu tonal düğme

Dolu tonlu düğme bileşeni, FilledTonalButton composable'ını kullanır. Varsayılan olarak tonal bir renkle doldurulur.

Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

"Tonal" yazan, açık mor arka planlı bir ton düğmesi.
Şekil 3. Tonlu düğme.

Dış çizgili düğme

Anahatlı düğme bileşeni, OutlinedButton composable'ını kullanır. Varsayılan olarak ana hatlı görünür.

Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

"Dış çizgili" yazan, koyu kenarlıklı, şeffaf bir düğme.
4. şekil Dış çizgili düğme.

Yükseltilmiş düğme

Yükseltilmiş düğme bileşeni, ElevatedButton composable'ını kullanır. Varsayılan olarak, yüksekliği temsil eden bir gölgeye sahiptir. Gölge içeren dolu bir düğmedir.

Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

"Yükseltilmiş" yazan gri arka planlı bir yükseltilmiş düğme.
Şekil 5. Yükseltilmiş düğme.

Metin düğmesi

Metin düğmesi bileşeni, TextButton composable'ını kullanır. Basılana kadar yalnızca metin olarak görünür. Varsayılan olarak düz dolgusu veya ana hattı yoktur.

Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

"Metin Düğmesi" yazan bir metin düğmesi
Şekil 6. Metin düğmesi.

Ek kaynaklar