如何在 Android jetpack Compose 中设置默认焦点项

Question

我的屏幕上有几个可聚焦的电视小部件。

每次我必须点击方向键然后 Box01 集中注意力。

有谁知道如何设置 Box01 默认聚焦？

我的代码：

@Composable
fun DefaultFocusSample(){
    Row(Modifier.padding(100.dp)) {
        FocusBox("Box01")
        Spacer(modifier = Modifier.padding(10.dp))
        FocusBox("Box02")
        Spacer(modifier = Modifier.padding(10.dp))
        FocusBox("Box03")
        Spacer(modifier = Modifier.padding(10.dp))
        FocusBox("Box04")
    }

}
@Composable
fun FocusBox(text:String){
    var color by remember { mutableStateOf(White) }
    Box(
        Modifier
            .onFocusChanged {
                color = if (it.isFocused) Green else White }
            .focusable()
            .border(2.dp,color)
    ){
        Text(text = text,
        modifier = Modifier.padding(10.dp))
    }
}

Answer 1

要手动将焦点调到 focusable，您可以使用 FocusRequester，像这样：

@Composable
fun FocusBox(text:String, requester: FocusRequester = FocusRequester()){
    var color by remember { mutableStateOf(Color.White) }
    Box(
        Modifier
            .focusRequester(requester)
            .onFocusChanged {
                color = if (it.isFocused) Color.Green else Color.White
            }
            .focusable()
            .border(2.dp, color)
    ) {
        Text(text = text,
            modifier = Modifier.padding(10.dp))
    }
}

Row(
    Modifier
        .background(Color.Yellow)
        .padding(10.dp)
) {
    val requester = FocusRequester()
    FocusBox("Box01", requester)
    LaunchedEffect(Unit) {
        requester.requestFocus()
    }
    Spacer(modifier = Modifier.padding(10.dp))
    FocusBox("Box02")
    Spacer(modifier = Modifier.padding(10.dp))
    FocusBox("Box03")
    Spacer(modifier = Modifier.padding(10.dp))
    FocusBox("Box04")
}

LaunchedEffect 是一个副作用，只有当可组合项出现时才会运行一次。在 the documentation

中查看更多信息

如何在 Android jetpack Compose 中设置默认焦点项

How to set default focus item in Android jetpack Compose

android

kotlin

android-tv

android-jetpack-compose