Jetpack Compose：如何让LazyList第n项的任意可聚焦子项获焦？

我有一个LazyList列表，每个列表项包含多层嵌套的子组件，且每个列表项中嵌套了2到3个可聚焦元素。请问如何在列表层级，让第n个列表项中的任意可聚焦子项获取焦点？

val autoFocusIndex = n

LazyList{

   itemsIndexed(data){ index, d->
     
      ListItem{...}
      
      if(index == n){ 
         // 要让第n项的任意可聚焦子元素获得焦点
      }
    
   }
}

@Composable
fun ListItem(...) { ListItemLayer1{...} }

@Composable
fun ListItemLayer1(...) { ListItemLayer2{...} }

@Composable
fun ListItemLayerX(...) { 
    // 2或3个可聚焦元素
    Box(Modifier.focusable()) {...}
    Box(Modifier.focusable()) {...}

    if(...) Box(Modifier.focusable()) {...}
}

解决方案 #

核心思路是利用Compose的FocusRequester主动请求焦点，结合LazyList的item定位逻辑实现需求，具体步骤如下：

1. 初始化焦点请求器集合 #

在LazyList的父组件中，创建与数据量匹配的FocusRequester集合，用于关联每个列表项的可聚焦元素：

val lazyListState = rememberLazyListState()
val autoFocusIndex = n // 目标列表项索引
val focusRequesters = remember {
    MutableStateList<FocusRequester>().apply {
        repeat(data.size) { add(FocusRequester()) }
    }
}

2. 传递焦点请求器到嵌套组件 #

修改ListItem及其嵌套子组件的参数，将对应索引的FocusRequester传递到最内层的可聚焦元素上（这里以第一个可聚焦元素为例）：

@Composable
fun ListItem(focusRequester: FocusRequester, ...) { 
    ListItemLayer1(focusRequester = focusRequester, ...) 
}

@Composable
fun ListItemLayer1(focusRequester: FocusRequester, ...) { 
    ListItemLayer2(focusRequester = focusRequester, ...) 
}

@Composable
fun ListItemLayerX(focusRequester: FocusRequester, ...) { 
    // 给目标可聚焦元素绑定焦点请求器
    Box(Modifier.focusable().focusRequester(focusRequester)) {...}
    Box(Modifier.focusable()) {...}

    if(...) Box(Modifier.focusable()) {...}
}

3. 在目标列表项触发焦点请求 #

在LazyList的目标索引item中，使用LaunchedEffect触发焦点请求，同时可选先滚动到目标项确保元素可见：

LazyList(state = lazyListState){
    itemsIndexed(data){ index, d->
        val focusRequester = focusRequesters[index]
        ListItem(focusRequester = focusRequester, ...)
        
        if(index == autoFocusIndex){
            LaunchedEffect(Unit) {
                // 可选：先滚动到目标项，确保元素已加载
                lazyListState.scrollToItem(index)
                // 请求焦点
                focusRequester.requestFocus()
            }
        }
    }
}

额外说明 #

• 如果需要灵活选择目标项中的某个可聚焦元素，可以传递多个FocusRequester到内层组件，按需触发请求。
• LaunchedEffect(Unit)确保焦点请求仅在item首次组合时执行一次，避免重复触发。

内容的提问来源于stack exchange，提问作者Mars