主页 / 问题 / 1586187
Accepted
Sirop4ik
Asked:2024-07-05 03:26:45 +0800 CST2024-07-05 03:26:45 +0800 CST

返回屏幕时如何将焦点分配到同一位置？

  • 772

我正在开发一个关于 AndroidTV 的项目，该平台的独特之处在于用户使用遥控器将焦点移动到屏幕上。

这是屏幕：

在此输入图像描述

当您专注工作时，有两个主要任务：

  1. 当您从左向右移动时，反之亦然，焦点不应混淆位置。例如，用户单击鼠标右键Left Panel 0 -> Right Panel 0，在右侧面板中我们移动到Right Panel 2左侧单击，焦点移动到，Left Panel 0因为用户将焦点移动到右侧面板。此功能已使用focusRestorer并已在运行。

  2. 当右侧面板中的用户单击（例如：） 时RigthPanel 1，它会打开Second Screen，然后用户单击后退并返回到First Screen，此处预计用于打开屏幕的按钮将成为焦点，即Right Panel 1，但对于某些这是因为它在 30% 的情况下有效，并且焦点不是集中在预期的按钮上，而是另一个按钮上。

视频 -> https://drive.google.com/file/d/1NCal4kxx0op74-Yj5v00wOBcnCRSSlUb/view

以下是您可以复制并运行的代码：

private const val FIRST_SCREEN_ROUTE = "first_screen"
private const val SECOND_SCREEN_ROUTE = "second_screen"
private const val DEFAULT_FOCUS_POSITION = -1

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Test_delete_itTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    shape = RectangleShape
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting() {
    val navigator: NavHostController = rememberNavController()

    NavHost(
        navController = navigator,
        startDestination = FIRST_SCREEN_ROUTE
    ) {
        composable(FIRST_SCREEN_ROUTE) {
            DisposableEffect(Unit) {
                Log.e("HERE", "1 CREATED first_screen_route")

                onDispose {
                    Log.e("HERE", "DISPOSED first_screen_route")
                }
            }

            FirstScreen(onClick = {
                Log.e("HERE", "NAVIGATION TO SECOND SCREEN")
                navigator.navigate(SECOND_SCREEN_ROUTE)
            })
        }

        composable(SECOND_SCREEN_ROUTE) {
            DisposableEffect(Unit) {
                Log.e("HERE", "CREATED second_screen_route")

                onDispose {
                    Log.e("HERE", "DISPOSED second_screen_route")
                }
            }

            SecondScreen()
        }
    }
}

@Composable
fun SecondScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red.copy(alpha = 0.1f)),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "SECOND SCREEN")
    }
}

@Composable
fun FirstScreen(
    onClick: () -> Unit
) {
    var focusBtnIdx by rememberSaveable { mutableIntStateOf(DEFAULT_FOCUS_POSITION) }

    Row(modifier = Modifier
        .fillMaxSize()
    ) {
        LeftPanel()
        RightPanel(onClick = onClick, focusBtnIdx = focusBtnIdx, setFocusBtnIdx = { focusBtnIdx = it })
    }
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun RowScope.LeftPanel() {
    val firstItemFr = remember { FocusRequester() }
    val buttons by rememberSaveable { mutableStateOf(List(5) { "Button ${it + 1}" }) }

    LaunchedEffect(Unit) {
        this.coroutineContext.job.invokeOnCompletion {
            try { firstItemFr.requestFocus() }
            catch (e: Exception) {/* do nothing */ }
        }
    }

    TvLazyColumn(
        modifier = Modifier
            .focusRestorer { firstItemFr }
            .background(Color.Blue.copy(alpha = 0.1f))
            .fillMaxHeight()
            .weight(1f),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        itemsIndexed(
            items = buttons,
            key = { idx, _ -> idx }
        ) { idx, _ ->
            Button(
                modifier = Modifier
                    .let { modifier ->
                        if (idx == 0) {
                            modifier.focusRequester(firstItemFr)
                        } else {
                            modifier
                        }
                    },
                onClick = {}
            ) {
                Text(text = "Left Panel: $idx")
            }
        }
    }
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun RowScope.RightPanel(
    onClick: () -> Unit,
    focusBtnIdx: Int,
    setFocusBtnIdx: (Int) -> Unit
) {
    val firstItemFr = remember { FocusRequester() }

    LaunchedEffect(Unit) {
        this.coroutineContext.job.invokeOnCompletion {
            try {
                Log.e("HERE", ">>> REQUEST FOCUS")
                if (focusBtnIdx != DEFAULT_FOCUS_POSITION) {
                    firstItemFr.requestFocus()
                    Log.e("HERE", "<<< REQUEST FOCUS")
                }
            }
            catch (e: Exception) {
                /* do nothing */
                Log.e("HERE", "FOCUS ERROR: $e")
            }
        }
    }

    Column(
        modifier = Modifier
            .background(Color.Green.copy(alpha = 0.1f))
            .fillMaxHeight()
            .weight(1f),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val buttons: List<String> by rememberSaveable { mutableStateOf(List(4) { "Button ${it + 1}" }) }

        TvLazyVerticalGrid(
            modifier = Modifier
                .focusRestorer { firstItemFr }
                .padding(16.dp),
            columns = TvGridCells.Fixed(2),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            itemsIndexed(
                items = buttons,
                key = { idx, _ -> idx }
            ) { idx, _ ->
                Button(
                    modifier = Modifier
                        .padding(8.dp)
                        .let {
                            Log.e("HERE", "1 RightPanel: $idx")
                            if (idx == focusBtnIdx || (focusBtnIdx == DEFAULT_FOCUS_POSITION && idx == 0)) {
                                Log.e("HERE", "2 RightPanel: $idx")
                                it.focusRequester(firstItemFr)
                            } else {
                                it
                            }
                        },
                    onClick = {
                        setFocusBtnIdx(idx)
                        onClick()
                    }
                ) {
                    Text(text = "Right Panel: $idx")
                }
            }
        }
    }
}

日志显示焦点已分配并在所需的按钮上调用，但由于某种原因，屏幕上的焦点位于另一个按钮上。

假设实现本身存在错误focusRequester

我缺少什么？

android

1 个回答

  1. Best Answer

    最后我找到了这个解决方案 -

    import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onPreviewKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.platform.LocalLifecycleOwner
import androidx.compose.ui.unit.dp
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.LifecycleEventObserver
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.tv.material3.Button
import androidx.tv.material3.Surface
import androidx.tv.material3.Text
import com.krokosha.test_delete_it.ui.theme.Test_delete_itTheme

private const val FIRST_SCREEN_ROUTE = "first_screen"
private const val SECOND_SCREEN_ROUTE = "second_screen"
private val focusRequesterMngFactory = FocusRequesterMng.Factory()
private val focusRequesterWrapFactory = FocusRequesterWrap.Factory()
private const val LEFT_PANEL_KEY = "LeftPanel"
private const val RIGHT_PANEL_KEY = "RightPanel"

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Test_delete_itTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    shape = RectangleShape
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting() {
    val navigator: NavHostController = rememberNavController()

    NavHost(
        navController = navigator,
        startDestination = FIRST_SCREEN_ROUTE
    ) {
        composable(FIRST_SCREEN_ROUTE) {
            FirstScreen(onClick = {
                Log.e("HERE", "NAVIGATION TO SECOND SCREEN")
                navigator.navigate(SECOND_SCREEN_ROUTE)
            })
        }

        composable(SECOND_SCREEN_ROUTE) {
            SecondScreen()
        }
    }
}

@Composable
fun SecondScreen() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red.copy(alpha = 0.1f)),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "SECOND SCREEN")
    }
}

@Composable
fun FirstScreen(
    onClick: () -> Unit
) {
    val focusRequesterWrap: FocusRequesterWrap = focusRequesterWrapFactory.getBy(key = LEFT_PANEL_KEY)
    
    Row(modifier = Modifier
        .fillMaxSize()
    ) {
        LeftPanel(
            onClick = onClick,
            focusRequester = focusRequesterWrap.focusRequester
        )

        RightPanel(
            onClick = onClick,
            onBackBtnClicked = { focusRequesterWrap.requestFocus() }
        )
    }
}

@Composable
fun RowScope.LeftPanel(
    onClick: () -> Unit,
    focusRequester: FocusRequester
) {
    val focusRequesterMng: FocusRequesterMng = focusRequesterMngFactory.getBy(
        key = LEFT_PANEL_KEY,
        parentFocusRequester = focusRequester,
        isInFocusOnInit = true
    )

    val buttons: List<String> by rememberSaveable { mutableStateOf(List(5) { "Button ${it + 1}" }) }
    val lifecycleOwner = LocalLifecycleOwner.current

    DisposableEffect(Unit) {
        val observer = LifecycleEventObserver { _, event ->
            if (event == Lifecycle.Event.ON_RESUME && focusRequesterMng.isNeedRestore) {
                focusRequesterMng.onRestoreFocus()
            }
        }

        lifecycleOwner.lifecycle.addObserver(observer)

        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }

    LazyColumn(
        modifier = focusRequesterMng.parentModifier
            .background(Color.Blue.copy(alpha = 0.1f))
            .fillMaxHeight()
            .weight(1f),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        itemsIndexed(
            items = buttons,
            key = { idx, _ -> idx }
        ) { idx, _ ->
            Button(
                modifier = Modifier
                    .let { modifier ->
                        if (idx == 0) {
                            focusRequesterMng.childModifier
                        } else {
                            modifier
                        }
                    },
                onClick = {
                    focusRequesterMngFactory.onNavigateOutFrom(focusRequesterMng = focusRequesterMng)
                    onClick()
                }
            ) {
                Text(text = "Left Panel: $idx")
            }
        }
    }
}

@Composable
fun RowScope.RightPanel(
    onClick: () -> Unit,
    onBackBtnClicked: () -> Unit
) {
    val focusRequesterMng: FocusRequesterMng = focusRequesterMngFactory.getBy(key = RIGHT_PANEL_KEY)
    val buttons: List<String> by rememberSaveable { mutableStateOf(List(4) { "Button ${it + 1}" }) }

    val lifecycleOwner = LocalLifecycleOwner.current

    DisposableEffect(Unit) {
        val observer = LifecycleEventObserver { _, event ->
            if (event == Lifecycle.Event.ON_RESUME && focusRequesterMng.isNeedRestore) {
                focusRequesterMng.onRestoreFocus()
            }
        }

        lifecycleOwner.lifecycle.addObserver(observer)

        onDispose {
            lifecycleOwner.lifecycle.removeObserver(observer)
        }
    }

    Column(
        modifier = focusRequesterMng
            .parentModifier
            .onPreviewKeyEvent {
                when {
                    KeyEventType.KeyUp == it.type && Key.Back == it.key -> {
                        onBackBtnClicked()
                        true
                    }

                    else -> false
                }
            }
            .background(Color.Green.copy(alpha = 0.1f))
            .fillMaxHeight()
            .weight(1f),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        LazyVerticalGrid(
            modifier = Modifier.padding(16.dp),
            columns = GridCells.Fixed(2),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            itemsIndexed(
                items = buttons,
                key = { idx, _ -> idx }
            ) { idx, _ ->
                Button(
                    modifier = Modifier
                        .padding(8.dp)
                        .let { modifier ->
                            if (idx == 0) focusRequesterMng.childModifier
                            else modifier
                        }
                    ,
                    onClick = {
                        focusRequesterMngFactory.onNavigateOutFrom(focusRequesterMng = focusRequesterMng)
                        onClick()
                    }
                ) {
                    Text(text = "Right Panel: $idx")
                }
            }
        }
    }
}

class FocusRequesterMng private constructor(
    val id: String,
    val parentModifier: Modifier,
    val parentFocusRequester: FocusRequester,
    val childModifier: Modifier,
    val childFocusRequester: FocusRequester,
    var isNeedRestore: Boolean
) {
    class Factory {
        private val focusRequesterMngMap: MutableMap<String, FocusRequesterMng> = mutableMapOf()

        fun getBy(
            key: String,
            parentFocusRequester: FocusRequester = FocusRequester(),
            isInFocusOnInit: Boolean = false
        ): FocusRequesterMng {
            val focusRequesterMng: FocusRequesterMng = focusRequesterMngMap
                .getOrPut(key) {
                    create(
                        id = key,
                        parentFocusRequester = parentFocusRequester,
                        isInFocusOnInit = isInFocusOnInit
                    )
                }

            if (isInFocusOnInit && focusRequesterMng.isNeedRestore) {
                focusRequesterMngMap.forEach { (key, mng) -> mng.isNeedRestore = key == focusRequesterMng.id }
            }

            return focusRequesterMng
        }

        // Whenever we have a navigation event, need to call this before actually navigating.
        fun onNavigateOutFrom(focusRequesterMng: FocusRequesterMng) {
            focusRequesterMngMap.forEach { (key, mng) ->
                if (key == focusRequesterMng.id) {
                    mng.onNavigateOut()
                } else {
                    mng.resetNeedsRestore()
                }
            }
        }
    }

    @OptIn(ExperimentalComposeUiApi::class)
    fun onNavigateOut() {
        isNeedRestore = true
        parentFocusRequester.saveFocusedChild()
    }

    fun resetNeedsRestore() {
        isNeedRestore = false
    }

    fun onRestoreFocus() {
        childFocusRequester.requestFocus()
        resetNeedsRestore()
    }

    companion object {
        /**
         * Returns a set of modifiers [FocusRequesterMng] which can be used for restoring focus and
         * specifying the initially focused item.
         */
        @OptIn(ExperimentalComposeUiApi::class)
        fun create(
            id: String = "",
            parentFocusRequester: FocusRequester = FocusRequester(),
            isInFocusOnInit: Boolean = false
        ): FocusRequesterMng {
            val childFocus = FocusRequester()

            val parentModifier = Modifier
                .focusRequester(parentFocusRequester)
                .focusProperties {
                    exit = {
                        parentFocusRequester.saveFocusedChild()
                        FocusRequester.Default
                    }
                    enter = {
                        if (parentFocusRequester.restoreFocusedChild()) {
                            FocusRequester.Cancel
                        } else {
                            childFocus
                        }
                    }
                }

            val childModifier = Modifier.focusRequester(childFocus)

            return FocusRequesterMng(
                id = id,
                parentModifier = parentModifier,
                parentFocusRequester = parentFocusRequester,
                childModifier = childModifier,
                childFocusRequester = childFocus,
                isNeedRestore = isInFocusOnInit
            )
        }
    }
}

class FocusRequesterWrap private constructor() {
    class Factory {
        private val focusRequesterWrapMap: MutableMap<String, FocusRequesterWrap> = mutableMapOf()

        fun getBy(key: String): FocusRequesterWrap {
            return focusRequesterWrapMap.getOrPut(key) { FocusRequesterWrap() }
        }
    }

    val focusRequester: FocusRequester by lazy { FocusRequester() }

    fun requestFocus() {
        try { focusRequester.requestFocus() }
        catch (e: Exception) { /* do nothing */ }
    }
}

    这样我就能够配置焦点，使其按预期工作

    • 0

相关问题