Jetpack Compose：Popup嵌套TextField时光标位置异常求助

在Jetpack Compose中，将TextField放置在Popup组件内时，会出现光标垂直偏移的异常——光标直接覆盖在文本上方，而非正常位于文本下方。

复现代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Popup(
                properties = PopupProperties(
                    focusable = true,
                ),
            ) {
                var textState by remember { mutableStateOf("") }
                TextField(
                    value = textState,
                    onValueChange = { textState = it },
                )
            }
        }
    }
}

问题效果 #

解决方案 #

这个问题的核心原因是Popup的内容未继承当前主题的文本样式配置，导致光标位置计算偏差。可以通过以下两种方式解决：

• 方案一：在Popup内容中包裹MaterialTheme
  为Popup内部的TextField重新应用MaterialTheme，确保它能获取到正确的主题样式参数：

  class MainActivity : ComponentActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              MaterialTheme {
                  Popup(
                      properties = PopupProperties(focusable = true),
                  ) {
                      MaterialTheme {
                          var textState by remember { mutableStateOf("") }
                          TextField(
                              value = textState,
                              onValueChange = { textState = it },
                          )
                      }
                  }
              }
          }
      }
  }
  

• 方案二：使用Dialog替代Popup（场景允许时）
  若交互场景适配，可以直接用Dialog组件替换Popup，Dialog默认继承主题样式，不会出现光标偏移问题：

  class MainActivity : ComponentActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              MaterialTheme {
                  var showDialog by remember { mutableStateOf(true) }
                  if (showDialog) {
                      AlertDialog(
                          onDismissRequest = { showDialog = false },
                          text = {
                              var textState by remember { mutableStateOf("") }
                              TextField(
                                  value = textState,
                                  onValueChange = { textState = it },
                              )
                          },
                          confirmButton = {
                              Button(onClick = { showDialog = false }) {
                                  Text("确定")
                              }
                          }
                      )
                  }
              }
          }
      }
  }
  

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