ফোকাস পুনরুদ্ধার করুন

ব্যবহারকারীরা যখন হার্ডওয়্যার কিবোর্ড বা ডি-প্যাড ব্যবহার করে জটিল ইউজার ইন্টারফেস নেভিগেট করেন, তখন তারা প্রায়শই স্ক্রিনের বিভিন্ন অংশের মধ্যে যাতায়াত করেন—যেমন সাইড নেভিগেশন রেল থেকে কন্টেন্ট লিস্টে যাওয়া, কোনো আইটেমের সাথে ইন্টারঅ্যাক্ট করা এবং তারপর আবার আগের জায়গায় ফিরে আসা। ফোকাস রিস্টোরেশন কন্টেইনারগুলোকে পূর্বে ফোকাস করা চাইল্ড এলিমেন্টটি মনে রাখতে এবং কন্টেইনারে ফোকাস পুনরায় প্রবেশ করলে সেটিতে ফোকাস ফিরিয়ে আনতে সাহায্য করে।

স্ক্রোলযোগ্য কন্টেইনারগুলিতে ফোকাস পুনরুদ্ধার করুন

Jetpack Compose-এ, LazyColumn , LazyRow , এবং LazyVerticalGrid এর মতো স্ক্রোলযোগ্য কন্টেইনারগুলি স্বয়ংক্রিয়ভাবে ফোকাস গ্রুপ হিসেবে কাজ করে। একটি লেজি লিস্ট বা গ্রিডে ফোকাস পুনরুদ্ধার সক্ষম করতে, focusRestorer মডিফায়ারটি সংযুক্ত করুন:

LazyColumn(
    modifier = Modifier.focusRestorer()
) {
    items(items) { item ->
        Button(onClick = { /* Handle click */ }) {
            Text(item)
        }
    }
}
FocusRestoration.kt

যখন 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")
    }
}
FocusRestoration.kt

একটি ফলব্যাক ফোকাস টার্গেট নির্দিষ্ট করুন।

যখন প্রথমবারের মতো কোনো কন্টেইনারে ফোকাস আসে, তখন পূর্বে ফোকাস করা কোনো চাইল্ড বিদ্যমান থাকে না। কোন চাইল্ডকে ফোকাস করতে হবে তা নির্ধারণ করার জন্য কম্পোজ ডিফল্ট ফোকাস অর্ডার অনুসরণ করে।

আপনি focusRestorer এ একটি ফলব্যাক FocusRequester পাস করে (অথবা Compose-এর আগের সংস্করণগুলিতে একটি FocusRequester রিটার্নকারী ল্যাম্বডা ব্যবহার করে) প্রথম এন্ট্রিতে কোন চাইল্ড ফোকাস পাবে তা কাস্টমাইজ করতে পারেন:

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)
        }
    }
}
FocusRestoration.kt

যদি পূর্বে কোনো চাইল্ডের উপর ফোকাস করা না হয়ে থাকে (অথবা ফোকাস পুনরুদ্ধার ব্যর্থ হয়), তাহলে কম্পোজ ফোকাসকে সংশ্লিষ্ট ফলব্যাক টার্গেটে স্থানান্তরিত করে।

নেভিগেশন উপাদানগুলিতে নির্বাচিত আইটেমটিতে সরাসরি ফোকাস করুন।

NavigationRail , NavigationBar , NavigationDrawer বা TabRow মতো নেভিগেশন কম্পোনেন্টগুলোতে, ব্যবহারকারীরা আশা করেন যে কন্টেন্ট এরিয়া থেকে কম্পোনেন্টটিতে প্রবেশ করার সময় ফোকাসটি বর্তমানে নির্বাচিত গন্তব্যে যাবে।

আপনি Modifier.focusGroup() ও focusProperties কে একত্রিত করে এবং onEnter প্রপার্টি (অথবা Compose-এর আগের সংস্করণগুলিতে enter ) সেট করার মাধ্যমে সক্রিয় গন্তব্যে ফোকাস নির্দেশ করতে পারেন:

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)
    )
}
FocusRestoration.kt

স্ক্রিন পরিবর্তনের সময় ফোকাস পুনরুদ্ধার করুন

যখন কোনো ব্যবহারকারী ডিটেইল স্ক্রিনে যাওয়ার জন্য কোনো আইটেমে ক্লিক করেন এবং পরবর্তীতে ব্যাক বাটন বা জেসচার ব্যবহার করে ফিরে আসেন, তখন আপনি তাদের ক্লিক করা আইটেমটিতে ফোকাস পুনরুদ্ধার করতে পারেন।

স্ক্রিন পরিবর্তনের সময় ফোকাস বজায় রাখতে ও পুনরুদ্ধার করতে:

1. কন্টেইনারটিকে একটি FocusRequester সাথে সংযুক্ত করুন।
2. ন্যাভিগেশন ইভেন্টটি ট্রিগার করার আগে, কন্টেইনারের FocusRequester এ saveFocusedChild() কল করুন।
3. যখন ব্যবহারকারী স্ক্রিনে ফিরে আসেন, তখন কন্টেইনারে প্রাথমিক ফোকাসের জন্য অনুরোধ করুন অথবা restoreFocusedChild() কল করুন।