دکمه کنش شناور

«دکمه کنش شناور» (FAB) دکمه‌ای با تأکید زیاد است که به کاربر امکان می‌دهد کنش اصلی را در برنامه انجام دهد. این نما کنش واحد و متمرکزی را که رایج‌ترین مسیر کاربر است تبلیغ می‌کند و معمولاً در گوشه پایین سمت چپ صفحه قرار دارد.

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

  • ایجاد مورد جدید: در برنامه یادداشت‌برداری، از دکمه کنش شناور می‌توان برای ایجاد سریع یادداشت جدید استفاده کرد.
  • افزودن مخاطب جدید: در برنامه گپ، دکمه کنش شناور می‌تواند میانایی را باز کند که به کاربر امکان می‌دهد فردی را به مکالمه اضافه کند.
  • مکان مرکز: در میانای نقشه، دکمه شناور اقدام می‌تواند نقشه را روی مکان کنونی کاربر متمرکز کند.

در «طراحی مادی»، چهار نوع «دکمه شناور اقدام» وجود دارد:

  • FAB: دکمه کنش شناور با اندازه معمولی.
  • دکمه کنش شناور کوچک: دکمه کنش شناور کوچک‌تر.
  • دکمه کنش شناور بزرگ: دکمه کنش شناور بزرگ‌تر.
  • دکمه کنش شناور گسترده: دکمه کنش شناوری که حاوی چیزی بیشتر از یک نماد است.
نمونه‌ای از هریک از چهار عنصر دکمه کنش شناور.
شکل ۱. چهار نوع دکمه کنش شناور.

سطح میانای برنامه‌سازی کاربردی

اگرچه چندین عنصر ترکیبی وجود دارد که می‌توانید برای ایجاد دکمه‌های کنش شناور سازگار با «طراحی Material» استفاده کنید، پارامترهای آن‌ها تفاوت چندانی ندارد. ازجمله پارامترهای کلیدی که باید درنظر داشته باشید، موارد زیر است:

  • onClick: تابعی که وقتی کاربر دکمه را فشار می‌دهد فراخوانده می‌شود.
  • ‫containerColor: رنگ دکمه.
  • ‫contentColor: رنگ نماد.

دکمه کنش شناور

برای ایجاد دکمه کنش شناور عمومی، از عنصر ترکیبی FloatingActionButton basic استفاده کنید. مثال زیر پیاده‌سازی پایه دکمه شناور اقدام را نشان می‌دهد:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

دکمه کنش شناور استاندارد با گوشه‌های گرد، سایه، و نماد «افزودن».
شکل ۲. دکمه کنش شناور.

دکمه کوچک

برای ایجاد دکمه کنش شناور کوچک، از SmallFloatingActionButton ترکیب‌شونده استفاده کنید. مثال زیر نحوه انجام این کار را با افزودن رنگ‌های سفارشی نشان می‌دهد.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

پیاده‌سازی SmallFloatingActionButton که حاوی نماد «افزودن» است.
شکل ۳. دکمه کنش شناور کوچک.

دکمه بزرگ

برای ایجاد دکمه کنش شناور بزرگ، از LargeFloatingActionButton ترکیب‌شونده استفاده کنید. این عنصر ترکیبی به‌جز اینکه دکمه بزرگ‌تری ایجاد می‌کند، تفاوت چندانی با نمونه‌های دیگر ندارد.

پیاده‌سازی زیر پیاده‌سازی سرراستی از «دکمه کنش شناور» بزرگ است.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

پیاده‌سازی LargeFloatingActionButton که حاوی نماد «افزودن» است.
شکل ۴. یک دکمه کنش شناور بزرگ.

دکمه گسترده

با ExtendedFloatingActionButton عنصر ترکیبی می‌توانید دکمه‌های کنش شناور پیچیده‌تری ایجاد کنید. تفاوت اصلی بین آن و FloatingActionButton این است که پارامترهای icon و text اختصاصی دارد. این دکمه‌ها به شما امکان می‌دهند دکمه‌ای با محتوای پیچیده‌تر ایجاد کنید که به‌طور مناسب با محتوای آن مقیاس‌بندی می‌شود.

گزیده زیر نحوه پیاده‌سازی ExtendedFloatingActionButton را نشان می‌دهد، با مقادیر نمونه‌ای که برای icon و text ارسال شده است.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

پیاده‌سازی ExtendedFloatingActionButton که نوشتار «دکمه گسترده» و نماد ویرایش را نمایش می‌دهد.
شکل ۵. دکمه کنش شناور با نوشتار و نماد.

منابع بیشتر