Snackbar

Atıştırma çubuğu bileşeni, ekranın alt kısmında görünen kısa bir bildirim işlevi görür. Kullanıcı deneyimini kesintiye uğratmadan bir işlem veya eylem hakkında geri bildirim sağlar. Snackbar'lar birkaç saniye sonra kaybolur. Ayrıca kullanıcı, bir düğmeye dokunmak gibi bir işlemle bunları kapatabilir.

Snackbar kullanabileceğiniz üç kullanım alanını düşünün:

• İşlem Onayı: Kullanıcı bir e-postayı veya mesajı sildikten sonra, işlemi onaylamak için bir atıştırma çubuğu görüntülenir ve "Geri al" seçeneği sunulur.
• Ağ Durumu: Uygulamanın internet bağlantısı kesildiğinde artık çevrimdışı olduğunu belirten bir atıştırmalık çubuğu açılır.
• Veri Gönderimi: Bir formu başarıyla gönderdikten veya ayarları güncelledikten sonra, atıştırmalık çubuğunda değişikliğin başarıyla kaydedildiğine dair not verilir.

Temel örnek

Snackbar uygulamak için önce SnackbarHostState özelliği içeren SnackbarHost oluşturun. SnackbarHostState, atıştırmalık çubuğunuzu görüntülemek için kullanabileceğiniz showSnackbar() işlevine erişim sağlar.

Bu askıya alma işlevi, rememberCoroutineScope kullanımında olduğu gibi bir CoroutineScope gerektirir ve Scaffold içinde bir Snackbar göstermek için kullanıcı arayüzü etkinliklerine yanıt olarak çağrılabilir.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}
MaterialLayoutSnippets.kt

Hareketli atıştırmalık çubuğu

İsteğe bağlı bir işlem sunabilir ve Snackbar süresini ayarlayabilirsiniz. snackbarHostState.showSnackbar() işlevi, ek actionLabel ve duration parametrelerini kabul eder ve bir SnackbarResult döndürür.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    val result = snackbarHostState
                        .showSnackbar(
                            message = "Snackbar",
                            actionLabel = "Action",
                            // Defaults to SnackbarDuration.Short
                            duration = SnackbarDuration.Indefinite
                        )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            /* Handle snackbar action performed */
                        }
                        SnackbarResult.Dismissed -> {
                            /* Handle snackbar dismissed */
                        }
                    }
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}
MaterialLayoutSnippets.kt

snackbarHost parametresiyle özel bir Snackbar sağlayabilirsiniz. Daha fazla bilgi için SnackbarHost API referans belgelerine göz atın.