Compose中的自动完成文本视图

Question

我想在Compose中创建一个自动完成文本视图，我创建了一个包含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)
                }
            }
        }
    }
}

- Francesc

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)
    }
  }
}

- ariets