نوار توضیحات

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

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

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

مثال پایه

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

این تابع تعلیق به 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
}

نوار توضیحات با کنش

می‌توانید کنش اختیاری ارائه دهید و مدت زمان 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
}

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

نکات کلیدی

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