Atıştırma çubuğu bileşeni, ekranın alt kısmında görünen kısa bir bildirim işlevi görür. Kullanıcı deneyimini kesintiye uğratmadan bir işlem veya eylem hakkında geri bildirim sağlar. Snackbar'lar birkaç saniye sonra kaybolur. Ayrıca kullanıcı, bir düğmeye dokunmak gibi bir işlemle bunları kapatabilir.
Snackbar kullanabileceğiniz üç kullanım alanını düşünün:
- İşlem Onayı: Kullanıcı bir e-postayı veya mesajı sildikten sonra, işlemi onaylamak için bir atıştırma çubuğu görüntülenir ve "Geri al" seçeneği sunulur.
- Ağ Durumu: Uygulamanın internet bağlantısı kesildiğinde 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, atıştırmalık çubuğunda değişikliğin başarıyla kaydedildiğine dair not verilir.
Temel örnek
Snackbar uygulamak için önce SnackbarHostState
özelliği içeren SnackbarHost
oluşturun. SnackbarHostState
, atıştırmalık çubuğunuzu 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 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 }
Hareketli atıştırmalık çubuğu
İsteğe bağlı bir işlem sunabilir 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 göz atın.