اسنک بار

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

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

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

مثال اساسی

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

این تابع تعلیق به CoroutineScope مانند استفاده از rememberCoroutineScope نیاز دارد - و می تواند در پاسخ به رویدادهای UI برای نشان دادن 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 تهیه کنید. برای اطلاعات بیشتر به اسناد مرجع SnackbarHost API مراجعه کنید.

نکات کلیدی

• actionLabel = "Action" : متن دکمه عمل را تنظیم می کند.
• withDismissAction = true : یک ضربدر در نوار اسنک ارائه می دهد. روی آن ضربه بزنید تا نوار اسنک رد شود.
• duration = SnackbarDuration.Indefinite : نوار اسنک را تا زمانی که کاربر یا برنامه آن را رد کند، نمایش داده می شود.
• SnackbarResult.ActionPerformed : نشان دهنده این است که کاربر روی دکمه عمل نوار اسنک کلیک کرده است.
• SnackbarResult.Dismissed : نشان دهنده این است که کاربر بدون کلیک کردن روی دکمه اقدام، نوار اسنک را حذف کرده است.