Snackbar

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

Snackbar kullanabileceğiniz şu üç kullanım alanını göz önünde bulundurun:

• İşlem Onayı: Kullanıcı bir e-postayı veya mesajı sildikten sonra, işlemi onaylamak ve "Geri al" seçeneği sunan bir hızlı yemek çubuğu görünür.
• Ağ Durumu: Uygulamanın internet bağlantısı kesildiğinde, uygulamanın 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, bir atıştırmalık çubuğu, değişikliğin başarıyla kaydedildiğini not eder.

Temel örnek

Snackbar uygulamak için önce bir SnackbarHostState mülkü içeren SnackbarHost oluşturun. SnackbarHostState, atıştırmalık çubuğunu 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 kullanıcı arayüzü etkinliklerine yanıt olarak Scaffold içinde bir Snackbar göstermek için ç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 Snackbar

İsteğe bağlı bir işlem yapabilir 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 bakın.