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

دستگاه‌های XR قابل‌اعمال

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

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

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

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

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

پیش‌فرض

بزرگ

تشریح

دکمه از یک محتوی و یک برچسب تشکیل شده است، با نمادهای اختیاری پیشرو و پیرو.

اندازه

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

ایالت‌ها

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

• فعال: حالت پیش‌فرض برای یک دکمه تعاملی.
• متمرکز: وقتی متمرکز باشد، دکمه 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 composable به شما امکان می‌دهد دکمه‌ها را در ردیفی پیمایش‌شدنی که به‌عنوان کنترل‌کننده تمرکز عمل می‌کند گروه‌بندی کنید. با پیمایش کاربر، تمرکز به‌طور خودکار به دکمه مربوط به موقعیت پیمایش فعلی منتقل می‌شود تا آن دکمه را برجسته کند.

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

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