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

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

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

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

Auto complete text view in compose

android

android-jetpack-compose