Button

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

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

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

شکل 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. یک دکمه متنی.

منابع اضافی

• دکمه اکشن شناور
• اسناد رابط کاربری مواد