Jetpack Compose：Popup内OutlinedTextField无法获取键盘焦点问题

为什么会抛出“FocusRequester is not initialized”？ #

你直接在FloatingActionButton的点击事件里调用focusRequester.requestFocus()时，Popup和内部的OutlinedTextField还没完成Compose重组（Compose状态更新后的重组是异步的），这时候FocusRequester还没和输入框绑定，自然会报未初始化的错误。

为什么焦点无法转移到Popup的输入框？ #

1. 焦点请求时机不对：Popup显示后，输入框还没完成组合就请求焦点，系统找不到目标控件。
2. 主界面控件仍持有焦点：主Composable里的控件（比如其他输入框）没主动释放焦点，导致Popup的输入框抢不到。
3. Popup容器未设置可聚焦：默认情况下Popup的容器可能不具备焦点能力，无法成为焦点宿主。

具体解决步骤 #

1. 用remember初始化FocusRequester
   必须通过remember创建FocusRequester，确保它和Composable的生命周期绑定，而不是直接new一个实例：

   val focusRequester = remember { FocusRequester() }
   

2. 在Popup显示后延迟请求焦点
   用LaunchedEffect监听Popup的显示状态，只有当Popup可见时，再执行焦点请求（此时输入框已经完成组合）：

   if (showPopup) {
       Popup(...) {
           // Popup内容
       }
   
       LaunchedEffect(showPopup) {
           if (showPopup) {
               // 先清除主界面的焦点
               LocalFocusManager.current.clearFocus()
               // 可选延迟，确保Popup完全渲染（避免偶发的时序问题）
               delay(100)
               focusRequester.requestFocus()
           }
       }
   }
   

3. 确保Popup容器可聚焦
   给Popup内部的根容器（比如Card、Box）添加focusable(true)修饰符，让Popup能成为焦点宿主：

   Popup(...) {
       Card(modifier = Modifier.focusable(true)) {
           OutlinedTextField(
               modifier = Modifier.focusRequester(focusRequester),
               // 其他参数
           )
       }
   }
   

4. 主动清除主界面焦点
   在请求Popup输入框焦点前，调用focusManager.clearFocus()，强制释放主界面控件的焦点，避免焦点被抢占。

完整示例代码 #

@Composable
fun PopupFocusExample() {
    var showPopup by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { showPopup = true }) {
                Icon(Icons.Default.Add, contentDescription = "Show Popup")
            }
        }
    ) { padding ->
        // 主界面输入框（模拟原来持有焦点的控件）
        OutlinedTextField(
            value = "",
            onValueChange = {},
            modifier = Modifier.padding(padding)
        )

        if (showPopup) {
            Popup(
                alignment = Alignment.Center,
                onDismissRequest = { showPopup = false }
            ) {
                Card(
                    modifier = Modifier.focusable(true),
                    elevation = CardDefaults.cardElevation(8.dp)
                ) {
                    OutlinedTextField(
                        value = "",
                        onValueChange = {},
                        modifier = Modifier
                            .focusRequester(focusRequester)
                            .fillMaxWidth()
                            .padding(16.dp),
                        label = { Text("Popup Input") }
                    )
                }
            }

            LaunchedEffect(showPopup) {
                if (showPopup) {
                    focusManager.clearFocus()
                    delay(100)
                    focusRequester.requestFocus()
                }
            }
        }
    }
}

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