יעדים להתמקדות

יעד מיקוד הוא רכיב בממשק המשתמש שאפשר להעביר אליו את מיקוד המקלדת. המשתמשים יכולים להזיז את מיקוד המקלדת באמצעות מקש Tab או מקשי החיצים:

  • ‫Tab או Shift+Tab – העברת המיקוד קדימה או אחורה בסדר הופעה חד-ממדי.
  • מקשי החיצים – מעבירים את המיקוד בשני ממדים (למעלה, למטה, שמאלה וימינה).

רכיבים אינטראקטיביים בממשק המשתמש הם יעדי מיקוד כברירת מחדל

רכיב אינטראקטיבי הוא יעד מיקוד כברירת מחדל. במילים אחרות, רכיב בממשק המשתמש הוא יעד להתמקדות אם המשתמשים יכולים ללחוץ עליו או לגעת בו.

לדוגמה, נניח שיש שלושה רכיבי כרטיס. אם הכרטיס הראשון והשלישי הם אינטראקטיביים (הם מגדירים קריאה חוזרת (callback) של 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")
}

איך הופכים רכיב Composable ליעד מיקוד שלא ניתן ללחוץ עליו

התכונה focusable הופכת רכיב Composable ליעד להתמקדות בלי צורך בסמנטיקה של קליקים. המשתמשים יכולים להעביר את מיקוד המקלדת לפונקציה הקומפוזבילית ששונתה (לדוגמה, כדי לבדוק את התוכן באמצעות כלי נגישות או לגלול את אזור התצוגה), אבל לחיצה על המקשים Enter או רווח לא מפעילה פעולת קליק:

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 }
)

הקודם
סקירה כללית
הבא
סדר המעבר בין רכיבים