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 }
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 }
snackbarHost
parametresiyle özel bir Snackbar
sağlayabilirsiniz. Bkz.
Daha fazla bilgi için SnackbarHost
API referans belgelerini inceleyin.