在撰写中自动完成文本视图

Question

我想在撰写中创建一个自动完成文本视图，并且我创建了一个包含TextField和DropDown菜单的可组合项。我在此解决方案中看到的问题是，当展开下拉菜单时，文本字段不再可操作，我无法在其中输入任何文本。关于如何解决这个问题有什么建议吗？代码如下

@Composable
fun AutoCompleteText(
    value: String,
    onValueChange: (String) -> Unit,
    onOptionSelected: (String) -> Unit,
    modifier: Modifier = Modifier,
    label: @Composable (() -> Unit)? = null,
    suggestions: List<String> = emptyList()
) {
    Column(modifier = modifier) {
        OutlinedTextField(
            value = value,
            onValueChange = { text -> if (text !== value) onValueChange(text) },
            modifier = Modifier.fillMaxWidth(),
            label = label,
        )
        DropdownMenu(
            expanded = suggestions.isNotEmpty(),
            onDismissRequest = {  },
            modifier = Modifier.fillMaxWidth()
        ) {
            suggestions.forEach { label ->
                DropdownMenuItem(onClick = {
                    onOptionSelected(label)
                }) {
                    Text(text = label)
                }
            }
        }
    }
}

Answer 1

DropdownMenu有一个名为 的属性PopupProperties，您可以使用它来禁用可聚焦性。这应该允许您能够继续输入OutlinedTextField：

OutlinedTextField(
  value = value,
  onValueChange = { text -> if (text !== value) onValueChange(text) },
  modifier = Modifier.fillMaxWidth(),
  label = label,
)
DropdownMenu(
  expanded = suggestions.isNotEmpty(),
  onDismissRequest = {  },
  modifier = Modifier.fillMaxWidth(),
  // This line here will accomplish what you want
  properties = PopupProperties(focusable = false)
) {
  suggestions.forEach { label ->
    DropdownMenuItem(onClick = {
      onOptionSelected(label)
    }) {
      Text(text = label)
    }
  }
}