هدف فوکوس، عنصری از رابط کاربری است که فوکوس صفحهکلید میتواند به آن منتقل شود. کاربران میتوانند فوکوس صفحهکلید را با کلید Tab یا کلیدهای جهتنما (فلشها) جابجا کنند:
- Tab یا Shift+Tab - فوکوس را به ترتیب ظاهر یک بعدی به جلو یا عقب منتقل میکند.
- کلیدهای جهتدار — فوکوس را به صورت دو بعدی ( بالا ، پایین ، چپ و راست ) حرکت دهید.
عناصر رابط کاربری تعاملی به طور پیشفرض اهداف تمرکز هستند.
یک کامپوننت تعاملی به طور پیشفرض یک هدف فوکوس است. به عبارت دیگر، یک عنصر رابط کاربری در صورتی یک هدف فوکوس است که کاربران بتوانند روی آن ضربه بزنند یا کلیک کنند.
برای مثال، سه کامپوننت کارت را در نظر بگیرید. اگر کارتهای اول و سوم تعاملی باشند (یک فراخوانی onClick تعریف کنند)، اما کارت دوم صرفاً اطلاعاتی باشد (هیچ قابلیت مدیریت کلیکی نداشته باشد)، فشردن کلید Tab روی کارت اول، کارت دوم را نادیده گرفته و مستقیماً به کارت سوم میرود.
Card(onClick = { /* First card action */ }) { Text("Card 1 (Interactive)") } Card { Text("Card 2 (Informational - not focusable)") } Card(onClick = { /* Third card action */ }) { Text("Card 3 (Interactive)") }
شما میتوانید با ارائه پارامتر onClick کارت دوم را به عنوان هدف تمرکز قرار دهید:
Card(onClick = { /* Second card action */ }) { Text("Card 2 (Now interactive and focusable)") }
این اصلاحکنندهی clickable ، عناصر رابط کاربری سفارشی یا استاندارد را نیز به اهداف فوکوس تبدیل میکند. برای جزئیات بیشتر به «ضربه بزنید و فشار دهید» مراجعه کنید.
Box( modifier = Modifier .clickable { /* Handle click */ } ) { Text("Custom interactive element") }
یک عنصر ترکیبی را به یک هدف فوکوس غیرقابل کلیک تبدیل کنید
اصلاحکنندهی focusable ، یک ترکیبپذیر را بدون نیاز به معنای کلیک، به یک هدف فوکوس تبدیل میکند. کاربران میتوانند فوکوس صفحهکلید را به ترکیبپذیر اصلاحشده منتقل کنند (برای مثال، برای بررسی محتوا با ابزارهای دسترسی یا پیمایش نمای دید)، اما فشار دادن کلیدهای Enter یا Space باعث ایجاد عمل کلیک نمیشود:
Box( modifier = Modifier .focusable() ) { Text("Non-clickable focus target") }
یک ترکیبپذیر را غیرقابلتمرکز کنید
در برخی سناریوها، ممکن است بخواهید یک عنصر تعاملی را از پیمایش صفحهکلید بدون غیرفعال کردن رویدادهای اشارهگر یا کلیک، حذف کنید. میتوانید با تنظیم canFocus = false در داخل اصلاحکننده focusProperties ، از دریافت فوکوس توسط یک کامپوننت جلوگیری کنید:
var checked by remember { mutableStateOf(false) } Switch( checked = checked, onCheckedChange = { checked = it }, // Prevent component from being focused modifier = Modifier .focusProperties { canFocus = false } )
برای شما توصیه میشود
- توجه: متن لینک زمانی نمایش داده میشود که جاوا اسکریپت غیرفعال باشد.
- ترتیب پیمایش فوکوس
- فوکوس در فیلدهای متنی
- اهداف تمرکز گروهی
- وضعیت فوکوس را نشان میدهد
- ناوبری فوکوس را آزمایش کنید