استعادة التركيز

عندما يتنقّل المستخدمون في واجهات المستخدم المعقّدة باستخدام لوحة مفاتيح أو لوحة تحكّم، فإنّهم يتنقّلون بشكل متكرّر بين أقسام مختلفة من الشاشة، مثل الانتقال من شريط تنقّل جانبي إلى قائمة محتوى، والتفاعل مع عنصر، ثم الانتقال مرة أخرى. تتيح ميزة استعادة التركيز للحاويات تذكُّر العنصر الفرعي الذي تم التركيز عليه سابقًا واستعادة التركيز عليه عند إعادة التركيز على الحاوية.

استعادة التركيز في الحاويات القابلة للتمرير

في 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 (أو دالة lambda تعرض 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)
    )
}

استعادة التركيز عبر انتقالات الشاشة

عندما ينقر المستخدم على عنصر للانتقال إلى شاشة التفاصيل ثم يعود باستخدام زر الرجوع أو الإيماءة، يمكنك إعادة التركيز إلى العنصر الذي نقر عليه.

للحفاظ على التركيز واستعادته أثناء الانتقال بين الشاشات:

  1. اربط الحاوية بـ FocusRequester.
  2. قبل بدء حدث التنقّل، يمكنك استدعاء saveFocusedChild() في FocusRequester الحاوية.
  3. عندما يعود المستخدم إلى الشاشة، اطلب التركيز الأولي على الحاوية أو استدعِ restoreFocusedChild().
السابق
استهدافات تركيز المجموعة
التالي
تحديد حالة التركيز