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

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

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

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

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

לדוגמה, נניח שיש שלושה רכיבי Card. אם הכרטיסים הראשון והשלישי הם אינטראקטיביים (מוגדרת בהם קריאה חוזרת של 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 הופך גם רכיבי UI מותאמים אישית או רגילים ליעדי מיקוד. פרטים נוספים זמינים במאמר בנושא הקשה ולחיצה.

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

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