دکمه‌ها در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا

این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های XR تجربه ایجاد کنید.

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

در Jetpack Compose Glimmer، یک Button یک کامپوننت تعاملی است که برای ورودی عینک‌های نمایشی بهینه شده است و از طریق حالت‌های خود بازخورد بصری واضحی را برای هدایت اقدامات کاربر ارائه می‌دهد.

دکمه‌ها بر اساس سیستم سطح Jetpack Compose Glimmer ساخته شده‌اند که به طور خودکار ویژگی‌های فیزیکی مانند حاشیه‌ها و عمق را مدیریت می‌کند.

دکمه استاندارد شامل یک برچسب متنی و آیکون‌های اختیاری است. می‌توانید از آن برای اقدامات اولیه یا ثانویه استفاده کنید. همچنین دکمه‌های تخصصی مانند دکمه‌های آیکون و دکمه‌های تغییر وضعیت وجود دارند که به عنوان اجزای جداگانه در Jetpack Compose Glimmer تعریف شده‌اند.

پیش‌فرض

بزرگ

آناتومی

یک دکمه شامل یک ظرف و یک برچسب است که آیکون‌های ابتدایی و انتهایی اختیاری دارند.

اندازه‌ها

دکمه‌های Jetpack Compose Glimmer از دو اندازه پشتیبانی می‌کنند. این اندازه‌ها بر حداقل ارتفاع و padding داخلی تأثیر می‌گذارند.

ایالت‌ها

دکمه‌های موجود در Jetpack Compose Glimmer ظاهر خود را برای بیان وضعیتشان تغییر می‌دهند.

• فعال : حالت پیش‌فرض برای یک دکمه‌ی تعاملی.
• متمرکز (Focused ): وقتی دکمه متمرکز می‌شود، یک GlimmerTheme.depthEffectLevels.level1 و یک هایلایت حاشیه‌ای متمرکز اعمال می‌کند.
• فشرده شده : وقتی فعال می‌شود، یک لایه سفید نیمه شفاف روی سطح اعمال می‌شود.
• غیرفعال : دکمه به ورودی پاسخ نمی‌دهد و ظاهر بصری آن تنظیم می‌شود.

پیش‌فرض‌های دکمه

پیش‌فرض‌های زیر برای دکمه‌های استاندارد اعمال می‌شوند:

• به طور پیش‌فرض، دکمه‌ها از GlimmerTheme.typography.bodySmall استفاده می‌کنند. مطمئن شوید که متن درون دکمه‌ها مختصر و مفید است و به وضوح عملکرد را توصیف می‌کند.
• شکل پیش‌فرض برای یک دکمه GlimmerTheme.shapes.large است. این گرد کردن منظم به کاربران کمک می‌کند تا دکمه‌ها را در رابط کاربری عینک تشخیص دهند.

مثال: دکمه با متن و آیکون

یک دکمه‌ی ساده فقط شامل یک برچسب متنی است، اما می‌توانید برای ارائه‌ی زمینه‌ی بیشتر، آیکون‌هایی را به ابتدا (با استفاده از leadingIcon ) یا انتهای (با استفاده از trailingIcon ) متن اضافه کنید.

کد زیر یک دکمه با آیکون‌های ابتدایی و انتهایی ایجاد می‌کند:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

گروه‌های دکمه

کامپوننت ButtonGroup به شما امکان می‌دهد دکمه‌ها را در یک ردیف قابل اسکرول گروه‌بندی کنید که به عنوان کنترل‌کننده فوکوس عمل می‌کند. با اسکرول کردن کاربر، فوکوس به طور خودکار حرکت می‌کند تا دکمه مربوط به موقعیت اسکرول فعلی را هایلایت کند.

مثال: گروه‌های دکمه

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

کنترل فوکوس در گروه‌های دکمه

شما می‌توانید فوکوس را به هر دکمه‌ای در یک گروه منتقل کنید تا انتخاب را به صورت دستی کنترل کنید.

سفارشی‌سازی و کنترل رفتار اسکرول با استفاده از وضعیت ButtonGroup :

1. حالت را با rememberButtonGroupState تعریف کنید.
2. آن را به کامپوننت ButtonGroup ارسال کنید.
3. برای اسکرول کردن به یک آیتم خاص و انتقال خودکار فوکوس به آن animateScrollToItem (یا scrollToItem برای اسکرول فوری) را فراخوانی کنید.

کد زیر با کلیک روی یک دکمه، فوکوس را از آن دکمه به دکمه دیگر منتقل می‌کند:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt