Snackbar

Giriş çubuğu 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ş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ını göz önünde bulundurun:

• İş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önderme: Bir form başarıyla gönderildiğinde veya ayarlar güncellendiğinde, değişiklik başarıyla kaydedildiği bir bilgi çubuğu gösterilir.

Temel örnek

Bir bilgi çubuğu uygulamak için önce SnackbarHostState mülkü içeren SnackbarHost öğesini oluşturursunuz. SnackbarHostState, bilgi çubuğunuz göstermek için kullanabileceğiniz showSnackbar() işlevine erişim sağlar.

Bu askıya alma işlevi için CoroutineScope gerekir (ör. rememberCoroutineScope kullanılır). 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

İşlem içeren 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 parametresi ile özel bir Snackbar sağlayabilirsiniz. Daha fazla bilgi için SnackbarHost API referans dokümanlarına bakın.