Snackbar

Snackbar bileşeni ekranda beliren kısa bir bildirim olarak dokunun. Herhangi bir işlem veya işlem hakkında ve kullanıcı deneyimini kesintiye uğratmak. Snackbar'lar birkaç saniye sonra kaybolur. İlgili içeriği oluşturmak için kullanılan 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, İşlemi onaylamak ve "Geri al" seçeneği sunmak için eklenen atıştırmalık çubuğu seçeneğini belirleyin.
  • Ağ Durumu: Uygulama internet bağlantısını kaybettiğinde atıştırmalık çubuğu çevrimdışı olduğunu belirten bir uyarı görüntülenir.
  • Veri Gönderimi: Bir formu başarıyla gönderdikten veya güncelledikten sonra hızlı bir şekilde kaydedildiğinde, 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 SnackbarHost oluşturursunuz. SnackbarHostState mülkü SnackbarHostState, şunlara erişim sağlar: Snackbar'ı görüntülemek için kullanabileceğiniz showSnackbar() işlevi.

Bu askıya alma işlevi, CoroutineScope gerektirir. Örneğin: rememberCoroutineScope: Kullanıcı arayüzü etkinliklerine yanıt olarak çağrılabilir ve Scaffold içinde bir Snackbar göster.

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 kabul eder ve duration parametrelerini belirtir ve bir SnackbarResult değeri 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. Bkz. Daha fazla bilgi için SnackbarHost API referans belgelerini inceleyin.