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