در Jetpack Compose Glimmer، یک Button یک کامپوننت تعاملی است که برای ورودی عینکهای نمایشی بهینه شده است و از طریق حالتهای خود بازخورد بصری واضحی را برای هدایت اقدامات کاربر ارائه میدهد.
دکمهها بر اساس سیستم سطح Jetpack Compose Glimmer ساخته شدهاند که به طور خودکار ویژگیهای فیزیکی مانند حاشیهها و عمق را مدیریت میکند.
دکمه استاندارد شامل یک برچسب متنی و آیکونهای اختیاری است. میتوانید از آن برای اقدامات اولیه یا ثانویه استفاده کنید. همچنین دکمههای تخصصی مانند دکمههای آیکون و دکمههای تغییر وضعیت وجود دارند که به عنوان اجزای جداگانه در Jetpack Compose Glimmer تعریف شدهاند.
پیشفرض
بزرگ
آناتومی
یک دکمه شامل یک ظرف و یک برچسب است که آیکونهای ابتدایی و انتهایی اختیاری دارند.
| قسمت | توضیحات |
|---|---|
کانتینر | سطح پس زمینه دکمه. |
برچسب | متنی که عمل را توصیف میکند. |
آیکون (اختیاری) | شاخصهای بصری پیشرو یا دنبالهرو. |
اندازهها
دکمههای Jetpack Compose Glimmer از دو اندازه پشتیبانی میکنند. این اندازهها بر حداقل ارتفاع و padding داخلی تأثیر میگذارند.
| اندازه | حداقل ارتفاع | استفاده پیشفرض |
|---|---|---|
متوسط | ۴۸.dp | اقدامات و لیستهای استاندارد (پیشفرض). |
بزرگ | ۷۲.dp | اقدامات با تأکید بالا یا نقاط ورود اصلی صفحه. |
ایالتها
دکمههای موجود در Jetpack Compose Glimmer ظاهر خود را برای بیان وضعیتشان تغییر میدهند.
- فعال : حالت پیشفرض برای یک دکمهی تعاملی.
- متمرکز (Focused ): وقتی دکمه متمرکز میشود، یک
GlimmerTheme.depthEffectLevels.level1و یک هایلایت حاشیهای متمرکز اعمال میکند. - فشرده شده : وقتی فعال میشود، یک لایه سفید نیمه شفاف روی سطح اعمال میشود.
- غیرفعال : دکمه به ورودی پاسخ نمیدهد و ظاهر بصری آن تنظیم میشود.
پیشفرضهای دکمه
پیشفرضهای زیر برای دکمههای استاندارد اعمال میشوند:
- به طور پیشفرض، دکمهها از
GlimmerTheme.typography.bodySmallاستفاده میکنند. مطمئن شوید که متن درون دکمهها مختصر و مفید است و به وضوح عملکرد را توصیف میکند. - شکل پیشفرض برای یک دکمه
GlimmerTheme.shapes.largeاست. این گرد کردن منظم به کاربران کمک میکند تا دکمهها را در رابط کاربری عینک تشخیص دهند.
مثال: دکمه با متن
کد زیر یک دکمه استاندارد با متن ایجاد میکند:
@Composable fun ButtonSample() { Button(onClick = {}) { Text("Send") } }
مثال: دکمههایی با آیکونهای ابتدایی و انتهایی
همچنین میتوانید برای ارائه زمینه بیشتر، آیکونهایی را به ابتدا (با استفاده از leadingIcon ) یا انتهای (با استفاده از trailingIcon ) متن اضافه کنید.
کد زیر یک دکمه با یک آیکون در ابتدای آن ایجاد میکند:
@Composable fun ButtonWithLeadingIconSample() { Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) { Text("Send") } }