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

دکمه عمل شناور (FAB) یک دکمه با تاکید زیاد است که به کاربر اجازه می دهد یک عمل اصلی را در یک برنامه انجام دهد. این یک اقدام متمرکز و منفرد را ترویج می کند که رایج ترین مسیری است که کاربر ممکن است طی کند و معمولاً در سمت راست پایین صفحه لنگر انداخته می شود.

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

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

در طراحی متریال، چهار نوع FAB وجود دارد:

  • FAB : یک دکمه اکشن شناور با اندازه معمولی.
  • Small FAB : یک دکمه اکشن شناور کوچکتر.
  • FAB بزرگ : یک دکمه اکشن شناور بزرگتر.
  • Extended FAB : یک دکمه اکشن شناور که شامل چیزی بیش از یک نماد نیست.
نمونه ای از هر یک از چهار مؤلفه دکمه اکشن شناور.
شکل 1. چهار نوع دکمه عمل شناور.

سطح API

اگرچه چندین ترکیب قابل ترکیب وجود دارد که می توانید از آنها برای ایجاد دکمه های اکشن شناور مطابق با طراحی متریال استفاده کنید، پارامترهای آنها تفاوت زیادی با هم ندارند. از جمله پارامترهای کلیدی که باید در نظر داشته باشید موارد زیر است:

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

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

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

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

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

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

دکمه کوچک

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

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

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

اجرای SmallFloatingActionButton که حاوی نماد «افزودن» است.
شکل 3. یک دکمه عمل شناور کوچک.

دکمه بزرگ

برای ایجاد یک دکمه اکشن شناور بزرگ، از LargeFloatingActionButton composable استفاده کنید. این ترکیب بندی تفاوت قابل توجهی با نمونه های دیگر ندارد به غیر از این واقعیت که منجر به یک دکمه بزرگتر می شود.

در زیر پیاده سازی ساده یک FAB بزرگ است.

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

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

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

دکمه تمدید شده

می‌توانید دکمه‌های اکشن شناور پیچیده‌تری را با 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") },
    )
}
FloatingActionButton.kt

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

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

منابع اضافی