כשמשתמשים מנווטים בממשקי משתמש מורכבים באמצעות מקלדת פיזית או כפתורי החיצים (D-pad), הם עוברים לעיתים קרובות בין חלקים שונים במסך – למשל, קופצים מסרגל ניווט צדדי לרשימת תוכן, יוצרים אינטראקציה עם פריט ואז קופצים חזרה. שחזור המיקוד מאפשר לקונטיינרים לזכור את רכיב הצאצא שהיה במיקוד קודם, ולשחזר את המיקוד אליו כשהמיקוד נכנס מחדש לקונטיינר.
שחזור המיקוד בקונטיינרים שניתן לגלול בהם
ב-Jetpack Compose, קונטיינרים שאפשר לגלול, כמו LazyColumn, LazyRow ו-LazyVerticalGrid, פועלים באופן אוטומטי כקבוצות מיקוד. כדי להפעיל שחזור של המיקוד ברשימה או ברשת בטעינה מדורגת, מוסיפים את המשתנה focusRestorer:
LazyColumn( modifier = Modifier.focusRestorer() ) { items(items) { item -> Button(onClick = { /* Handle click */ }) { Text(item) } } }
כשהמיקוד יוצא מה-LazyColumn, המאגר מתעד איזה פריט היה פעיל.
כשהמשתמש חוזר לרשימה, המיקוד חוזר לפריט הזה במקום להתחיל מחדש בחלק העליון.
שחזור המיקוד בשורה ובעמודה
בניגוד למכלים של פריסות עם טעינה מדורגת, מכלים רגילים של פריסות שלא ניתנות לגלילה, כמו Row ו-Column, לא יוצרים גבולות מיקוד כברירת מחדל.
הם לא מיירטים אירועי כניסה למיקוד בעצמם, ולכן לא מספיק להחיל את המשתנה focusRestorer לבד.
כדי להפעיל שחזור של המיקוד ב-Row או ב-Column, משלבים את focusGroup עם focusRestorer:
Row( modifier = Modifier .focusGroup() .focusRestorer() ) { Button(onClick = { /* Action 1 */ }) { Text("First item") } Button(onClick = { /* Action 2 */ }) { Text("Second item") } Button(onClick = { /* Action 3 */ }) { Text("Third item") } }
הגדרת יעד חלופי למיקוד
כשממקדים את הסמן בקונטיינר בפעם הראשונה, אין צאצא שהיה ממוקד קודם. Compose פועל לפי סדר ברירת המחדל של המיקוד כדי לקבוע באיזה רכיב צאצא להתמקד.
כדי להתאים אישית את הצאצא שמקבל את המיקוד בכניסה הראשונה, אפשר להעביר FocusRequester חלופי אל focusRestorer (או למבדה שמחזירה FocusRequester בגרסאות קודמות של Compose):
val firstItemRequester = remember { FocusRequester() } LazyColumn( modifier = Modifier.focusRestorer(firstItemRequester) ) { itemsIndexed(items) { index, item -> val itemModifier = if (index == 0) { Modifier.focusRequester(firstItemRequester) } else { Modifier } Button( onClick = { /* Handle click */ }, modifier = itemModifier ) { Text(item) } } }
אם לא היה רכיב צאצא שהיה במיקוד לפני כן (או אם שחזור המיקוד נכשל), Compose מעביר את המיקוד ליעד החלופי המשויך.
העברת המיקוד לפריט שנבחר ברכיבי הניווט
ברכיבי ניווט כמו NavigationRail, NavigationBar, NavigationDrawer או TabRow, המשתמשים מצפים שהמיקוד ינחת על היעד שנבחר כרגע כשנכנסים לרכיב מאזור התוכן.
כדי להעביר את המיקוד ליעד הפעיל, משלבים את Modifier.focusGroup() עם focusProperties ומגדירים את המאפיין onEnter (או enter בגרסאות קודמות של Compose):
val (homeRequester, searchRequester, settingsRequester) = remember { FocusRequester.createRefs() } val selectedRequester = when (currentDestination) { "home" -> homeRequester "search" -> searchRequester "settings" -> settingsRequester else -> homeRequester } NavigationRail( modifier = modifier .focusProperties { // Redirect focus to the selected item when focus enters the navigation rail onEnter = { selectedRequester.requestFocus() } } .focusGroup() ) { NavigationRailItem( selected = currentDestination == "home", onClick = { onNavigate("home") }, icon = { Icon(Icons.Default.Home, contentDescription = "Home") }, label = { Text("Home") }, modifier = Modifier.focusRequester(homeRequester) ) NavigationRailItem( selected = currentDestination == "search", onClick = { onNavigate("search") }, icon = { Icon(Icons.Default.Search, contentDescription = "Search") }, label = { Text("Search") }, modifier = Modifier.focusRequester(searchRequester) ) NavigationRailItem( selected = currentDestination == "settings", onClick = { onNavigate("settings") }, icon = { Icon(Icons.Default.Settings, contentDescription = "Settings") }, label = { Text("Settings") }, modifier = Modifier.focusRequester(settingsRequester) ) }
שחזור המיקוד במעברים בין מסכים
כשמשתמש לוחץ על פריט כדי לעבור למסך פרטים ואז חוזר באמצעות הכפתור "הקודם" או תנועה, אתם יכולים להחזיר את המיקוד לפריט שהוא לחץ עליו.
כדי לשמור על המיקוד ולשחזר אותו במעבר בין מסכים:
- משייכים את מאגר התגים אל
FocusRequester. - לפני שמפעילים את אירוע הניווט, צריך להפעיל את
saveFocusedChild()ב-FocusRequesterשל מאגר התגים. - כשהמשתמש חוזר למסך, צריך לבקש מיקוד ראשוני בקונטיינר או להפעיל את
restoreFocusedChild().
מומלץ בשבילכם
- הערה: טקסט הקישור מוצג כש-JavaScript מושבת
- יעדי מיקוד
- סדר המעבר של המיקוד
- יעדים להתמקדות בקבוצה
- בקשת מיקוד באופן פרוגרמטי
- הזזה וביטול של המיקוד