دکمه

کلمات کلیدی: AiAssisted، محصول:JetpackCompose

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

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

این تصویر پنج نوع دکمه در طراحی متریال را نشان می دهد:

شکل 1. پنج جزء دکمه.

سطح API

onClick

عملکردی که سیستم با فشار دادن دکمه توسط کاربر فراخوانی می کند.

enabled

هنگامی که false ، این پارامتر باعث می شود که دکمه در دسترس و غیرفعال به نظر برسد.

colors

نمونه ای از ButtonColors که رنگ های استفاده شده در دکمه را تعیین می کند.

contentPadding

بالشتک داخل دکمه.

دکمه پر شده

مولفه دکمه پر شده از Button اصلی قابل ترکیب استفاده می کند. به طور پیش فرض با یک رنگ ثابت پر شده است. قطعه نحوه پیاده سازی کامپوننت را نشان می دهد:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

توجه: اگر می خواهید یک دکمه سفارشی بسازید، از Button composable استفاده کنید.

این پیاده سازی به شکل زیر ظاهر می شود:

شکل 2. یک دکمه پر شده.

دکمه تونال پر شده

کامپوننت دکمه تونال پر شده از Composable FilledTonalButton استفاده می کند. به طور پیش فرض با یک رنگ تونال پر شده است.

قطعه نحوه پیاده سازی کامپوننت را نشان می دهد:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

این پیاده سازی به شکل زیر ظاهر می شود:

شکل 3. یک دکمه تونال.

دکمه مشخص شده

جزء دکمه outlined از OutlinedButton قابل ترکیب استفاده می کند. به طور پیش فرض با یک طرح کلی ظاهر می شود.

قطعه نحوه پیاده سازی کامپوننت را نشان می دهد:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

این پیاده سازی به شکل زیر ظاهر می شود:

شکل 4. یک دکمه مشخص شده.

دکمه مرتفع

مولفه دکمه elevated از ElevatedButton composable استفاده می کند. دارای یک سایه است که به طور پیش فرض جلوه ارتفاع را نشان می دهد. این یک دکمه پر است که شامل یک سایه است.

قطعه نحوه پیاده سازی کامپوننت را نشان می دهد:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

این پیاده سازی به شکل زیر ظاهر می شود:

شکل 5. یک دکمه مرتفع.

دکمه متن

جزء دکمه متن از TextButton composable استفاده می کند. تا زمانی که فشار داده شود فقط به صورت متن ظاهر می شود. به طور پیش فرض پر شده یا طرح کلی ندارد.

قطعه نحوه پیاده سازی کامپوننت را نشان می دهد:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

این پیاده سازی به شکل زیر ظاهر می شود:

شکل 6. یک دکمه متنی.

منابع اضافی

• دکمه اکشن شناور
• نمای کلی متریال طراحی 3 دکمه