Bu sayfa, Cloud Translation API ile çevrilmiştir.

Çip

Chip bileşeni, küçük ve etkileşimli bir kullanıcı arayüzü öğesidir. Karmaşık genellikle bir simge ve etiket içeren kişi veya etiket gibi öğeler. Bu, kontrol edilebilir, kapatılabilir veya tıklanabilir.

Dört çip türü ve bunları kullanabileceğiniz yerler aşağıda açıklanmıştır:

Destek: Kullanıcıyı görev sırasında yönlendirir. Genellikle geçici kullanıcı arayüzü olarak görünür öğesine dönüşür.
Filtrele: Kullanıcıların bir dizi seçenek arasından içeriği hassaslaştırmasına olanak tanır. Şunları yapabilirler: seçilebilir veya seçimi kaldırılabilir ve seçildiğinde bir onay işareti simgesi bulunabilir.
Giriş: Kullanıcı tarafından sağlanan bilgileri (ör. bir tıklayın. Bunlar, simge ve metin içerip "X" işareti içerebilir gerekir.
Öneri: Kullanıcıya son zamanlarına dayalı olarak öneriler sunar olabilir. Genellikle kullanıcıya istem göndermek için giriş alanının altında görünür işlemlerdir.

ziyaret edin.

Dört çip bileşeninden oluşan, benzersiz özellikleri vurgulanmış halde bir örnek. — **Şekil 1.** Bu dört çip bileşeninden bahsedelim.

API yüzeyi

Dört çip türüne karşılık gelen dört composable vardır. İlgili içeriği oluşturmak için kullanılan aşağıdaki bölümlerde, bu composable'lar ve farklılıkları ayrıntılı olarak açıklanmaktadır. Bununla birlikte, bunlar aşağıdaki parametreleri paylaşır:

label: Çipte görünen dize.
icon: Çipin başında gösterilen simge. Bazı belirli composable'ların ayrı bir leadingIcon ve trailingIcon'sı var parametresinden sonra bir değer girin.
onClick: Kullanıcı bastığında çipin çağırdığı lambda.

Destek çipi

AssistChip composable, bir yardım çipidir. Ayırt edici tek bir Bu özellik, sol tarafta bir simge görüntülemenize olanak sağlayan leadingIcon parametresidir yer alır. Aşağıdaki örnekte bu özelliği nasıl uygulayabileceğiniz gösterilmektedir:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}Chip.kt

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

Basit bir yardım çipi. — **Şekil 2.** Destek çipi.

Filtre çipi

FilterChip composable, çipin bulunup bulunmadığını takip etmenizi gerektirir seçili olduğundan emin olun. Aşağıdaki örnekte, başarılı bir reklamı nasıl gösterebileceğiniz "işaretli" simgesi yalnızca kullanıcı çipi seçtiğinde:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}Chip.kt

Bu uygulama, seçim kaldırıldığında aşağıdaki gibi görünür:

İşaretlenmemiş ve plan arka planı olmayan, seçili olmayan bir filtre çipi. — **Şekil 3.** Filtre çipi seçili değil.

Ayrıca seçildiğinde aşağıdaki gibi görünür:

Onay işareti ve renkli arka plan içeren filtre çipi. — **Şekil 4.** Filtre çipi seçildi.

Giriş çipi

Aşağıdakilerden elde edilen çipler oluşturmak için InputChip composable'ı kullanabilirsiniz: kullanıcı etkileşimi. Örneğin, bir e-posta istemcisinde kullanıcı giriş çipi, kullanıcının adresini girdiği bir kişiyi temsil edebilir. alanına "to:" girin.

Aşağıdaki uygulamada, zaten durumu belirtir. Kullanıcı çipe bastığında çipi kapatır.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}Chip.kt

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

Şekil 5. Giriş çipi.

Öneri çipi

SuggestionChip composable, listelenen composable'lar arasında en temel olanıdır API tanımında ve yaygın kullanım alanlarında bu sayfada bulabilirsiniz. Öneri çipler, dinamik olarak oluşturulan ipuçlarını sunar. Örneğin, yapay zeka destekli bir sohbet uygulamasında en yakın tarihli sorulara olası yanıtları sunmak için öneri çiplerini kullanabilir. mesajını alırsınız.

Şu SuggestionChip uygulamasını düşünün:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}Chip.kt

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

ziyaret edin.

Yükseltilmiş çip

Bu dokümandaki tüm örneklerde düz bir görünüm. Yükseltilmiş bir çip istiyorsanız şu üç composable:

Ek kaynaklar

Materyal Kullanıcı Arayüzü belgeleri