اسنک بار

کامپوننت اسنک‌بار به عنوان یک اعلان کوتاه عمل می‌کند که در پایین صفحه نمایش داده می‌شود. این کامپوننت بدون ایجاد وقفه در تجربه کاربر، بازخوردی در مورد یک عملیات یا اقدام ارائه می‌دهد. اسنک‌بارها پس از چند ثانیه ناپدید می‌شوند. کاربر همچنین می‌تواند با یک عمل، مانند ضربه زدن روی یک دکمه، آنها را غیرفعال کند.

این سه مورد استفاده را در نظر بگیرید که ممکن است از یک اسنک بار استفاده کنید:

• تأیید اقدام: پس از اینکه کاربر ایمیل یا پیامی را حذف می‌کند، یک اسنک‌بار برای تأیید اقدام ظاهر می‌شود و گزینه لغو را ارائه می‌دهد.
• وضعیت شبکه: وقتی اتصال اینترنت برنامه قطع می‌شود، یک نوار اعلان ظاهر می‌شود که نشان می‌دهد برنامه اکنون آفلاین است.
• ارسال داده‌ها: پس از ارسال موفقیت‌آمیز فرم یا به‌روزرسانی تنظیمات، یک اسنک‌بار اعلام می‌کند که تغییر با موفقیت ذخیره شده است.

شکل ۱. نمونه‌هایی از اسنک‌بار.

مثال پایه

برای پیاده‌سازی یک snackbar، ابتدا SnackbarHost ایجاد می‌کنید که شامل یک ویژگی SnackbarHostState است. SnackbarHostState دسترسی به تابع showSnackbar() را فراهم می‌کند که می‌توانید از آن برای نمایش snackbar خود استفاده کنید.

این تابعِ در حال تعلیق به یک CoroutineScope نیاز دارد - مانند تابعی که توسط rememberCoroutineScope برگردانده می‌شود - و می‌تواند در پاسخ به رویدادهای رابط کاربری فراخوانی شود تا یک Snackbar درون Scaffold نمایش دهد.

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

اسنک بار با عملکرد بالا

شما می‌توانید یک اکشن اختیاری ارائه دهید و مدت زمان Snackbar را تنظیم کنید. تابع snackbarHostState.showSnackbar() پارامترهای actionLabel و duration اضافی را می‌پذیرد و یک SnackbarResult برمی‌گرداند.

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

شما می‌توانید یک Snackbar سفارشی با پارامتر snackbarHost ارائه دهید. برای اطلاعات بیشتر به مستندات مرجع API SnackbarHost مراجعه کنید.

نکات کلیدی

• actionLabel = "Action" : متن دکمه‌ی عملیات را تنظیم می‌کند.
• duration = SnackbarDuration.Indefinite : اسنک‌بار را تا زمانی که کاربر یا برنامه آن را رد کند، نمایش می‌دهد.
• SnackbarResult.ActionPerformed : نشان می‌دهد که کاربر روی دکمه‌ی عملیاتی snackbar کلیک کرده است.
• SnackbarResult.Dismissed : نشان می‌دهد که کاربر بدون کلیک روی دکمه‌ی عملیاتی، اسنک‌بار را رد کرده است.