Jetpack Compose中为列表项创建FocusRequester引用列表的方法

一、动态生成对应列表长度的FocusRequester集合 #

针对动态长度的promotions列表，你可以生成一个与列表项一一对应的FocusRequester集合，步骤如下：

1. 生成绑定列表长度的FocusRequester集合

// 用remember缓存，以promotions为依赖，列表变化时自动重建集合
val focusRequesters = remember(promotions) {
    List(promotions.size) { FocusRequester() }
}

2. 修改原遍历代码，为每个列表项传入对应FocusRequester

promotions.forEachIndexed { index, item ->
    key(item.hashCode()) {
        PromotionItem(
            promotionItem = item,
            onRemove = { onRemove(index) },
            focusRequester = focusRequesters[index]
        )
    }
}

3. 在PromotionItem内部配置可聚焦属性
   确保组件支持聚焦，在内部可聚焦元素上添加focusRequester和focusable修饰符：

@Composable
fun PromotionItem(
    promotionItem: Promotion,
    onRemove: () -> Unit,
    focusRequester: FocusRequester
) {
    Box(
        modifier = Modifier
            .focusRequester(focusRequester)
            .focusable() // 必须添加，使组件具备聚焦能力
    ) {
        // 你的组件内容，比如移除按钮
        Button(onClick = onRemove) {
            Text("移除")
        }
    }
}

4. 触发指定项的聚焦操作
   当需要聚焦某一项时，直接调用对应位置的requestFocus()：

// 示例：聚焦索引为2的列表项
focusRequesters[2].requestFocus()

二、固定长度列表的简化方式 #

如果promotions是固定长度的列表，你可以用熟悉的createRefs()解构后转成集合：

val (fr1, fr2, fr3, fr4) = remember { FocusRequester.createRefs() }
val focusRequesters = listOf(fr1, fr2, fr3, fr4)

后续使用方式和动态列表一致，但这种方式仅适用于长度固定的场景，动态增删项时会出现索引错位问题。

关键注意事项 #

• 必须将promotions作为remember的依赖项，确保列表变化时focusRequesters同步更新，避免索引不匹配。
• 所有需要接收焦点的组件必须添加focusable()修饰符，否则FocusRequester无法生效。

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