یک دکمه ایجاد کنید

دکمه ها به کاربر این امکان را می دهند که یک عمل تعریف شده را راه اندازی کند. پنج نوع دکمه وجود دارد:

تایپ کنید

ظاهر

هدف

پر شده است

پس زمینه جامد با متن متضاد.

برای اقدامات اولیه، مانند «ارسال» و «ذخیره». افکت سایه بر اهمیت دکمه تاکید می کند.

تونال

رنگ پس زمینه برای مطابقت با سطح متفاوت است.

برای اقدامات اولیه یا مهم. دکمه های پر شده وزن بصری را ارائه می دهند و برای اقداماتی مانند "افزودن به سبد خرید" و "ورود به سیستم" مناسب هستند.

مرتفع

سایه آن را برجسته می کند.

برای اقدامات اولیه یا مهم. ارتفاع را افزایش دهید تا دکمه برجسته تر شود.

مشخص شده است

دارای حاشیه بدون پر کردن.

برای اقداماتی که مهم هستند اما اولیه نیستند. دکمه‌های مشخص شده به خوبی با دکمه‌های دیگر جفت می‌شوند تا اقدامات ثانویه دیگری مانند «لغو» یا «بازگشت» را نشان دهند.

متن

متن بدون پس زمینه یا حاشیه.

برای اقدامات کمتر مهم مانند پیوندهای ناوبری یا اقدامات ثانویه مانند "بیشتر بیاموزید" یا "مشاهده جزئیات".

سازگاری نسخه

این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.

وابستگی ها

یک دکمه پر شده ایجاد کنید

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

نتایج

یک دکمه پر شده با پس‌زمینه بنفش که روی آن «پر شده» نوشته شده است.
شکل 1. یک دکمه پر شده.

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

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

نتایج

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

یک دکمه مشخص شده ایجاد کنید

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

نتایج

یک دکمه طرح‌ریزی شفاف با حاشیه تیره که روی آن نوشته شده است.
شکل 3. یک دکمه مشخص شده.

یک دکمه مرتفع ایجاد کنید

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

نتایج

یک دکمه مرتفع با پس‌زمینه خاکستری که روی آن نوشته شده است "Elevated".
شکل 4. یک دکمه مرتفع.

یک دکمه متن ایجاد کنید

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

نتایج

دکمه متنی که "دکمه متن" را می خواند
شکل 5. یک دکمه متن.

نکات کلیدی

  • onClick : تابعی که با فشار دادن دکمه توسط کاربر فراخوانی می شود.
  • enabled : در صورت false، این پارامتر باعث می شود که دکمه در دسترس و غیرفعال به نظر برسد.
  • colors : نمونه ای از ButtonColors که رنگ های استفاده شده در دکمه را تعیین می کند.
  • contentPadding : بالشتک داخل دکمه.

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

بیاموزید که چگونه توابع ترکیب‌پذیر می‌توانند به شما کمک کنند تا به راحتی اجزای رابط کاربری زیبا را بر اساس سیستم طراحی مواد طراحی کنید.
مجموعه راهنمای سریع

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سؤالات متداول بروید بازخورد بگذارید