Snackbar

Snackbar bileşeni ekranda beliren kısa bir bildirim olarak dokunun. Kullanıcı deneyimini kesintiye uğratmadan bir işlem veya işlemle ilgili geri bildirim sağlar. Bilgi çubuğu birkaç saniye sonra kaybolur. Kullanıcı, düğmeye dokunmak gibi bir işlemle de bunları kapatabilir.

Aşağıdaki üç kullanım alanında bilgi çubuğu kullanabilirsiniz:

• İşlem Onayı: Kullanıcı bir e-postayı veya iletiyi sildikten sonra, işlemi onaylamak ve "Geri al" seçeneği sunmak için bir bilgi çubuğu gösterilir.
• Ağ Durumu: Uygulamanın internet bağlantısı kesildiğinde, uygulamanın çevrimdışı olduğunu belirten bir bilgi çubuğu açılır.
• 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, bilgi çubuğunuz göstermek için kullanabileceğiniz showSnackbar() işlevine erişim sağlar.

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 sağlayabilir ve Snackbar öğesinin 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 dokümanlarına göz atın.