نوار توضیحات

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

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

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

نمونه پایه

برای پیاده‌سازی اسنک‌بار، ابتدا 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
}

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

نکات کلیدی

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