如何使用trailingIcon同步OutlinedTextField上的焦点？- Android Jetpack Compose

pdkcd3nj 于 2023-06-20 发布在 Android

关注(0)|答案(2)|浏览(127)

在我的例子中，我使用OutlinedTextField中的trailingIcon来扩展DropdownMenu。如果使用，请单击结尾的图标-下拉菜单将展开，但OutlinedTextField不会聚焦。此外，使用单击OutlinedTextField时-下拉菜单不会展开，但OutlinedTextField将处于焦点位置。

@Composable
fun DownMenuTextField(
    @StringRes titleId: Int,
    selectedText: String,
    suggestions: List<String>,
    onValueChange: (String) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }
    var textFieldSize by remember { mutableStateOf(Size.Zero) }
    val icon = if (expanded) Icons.Filled.ArrowDropUp else Icons.Filled.ArrowDropDown

    Column {
        OutlinedTextField(
            value = selectedText,
            readOnly = true,
            onValueChange = { onValueChange(it) },
            modifier = Modifier
                .fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    textFieldSize = coordinates.size.toSize()
                },
            label = {
                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                    Text(
                        text = stringResource(titleId),
                        style = MaterialTheme.typography.body2
                    )
                }
            },
            trailingIcon = {
                Icon(icon, "contentDescription",
                    Modifier.focusable(false)
                    .clickable { expanded = !expanded })
            }
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .width(with(LocalDensity.current) { textFieldSize.width.toDp() })
        ) {
            suggestions.forEach { label ->
                DropdownMenuItem(onClick = {
                    onValueChange(label)
                    expanded = false
                }) {
                    Text(text = label)
                }
            }
        }
    }
}

点击trailingIcon：

单击OutlinedTextField：

当用户单击trailingIcon或OutlinedTextField时如何操作-始终OutlinedTextField将被聚焦，下拉菜单将被展开

android

来源：https://stackoverflow.com/questions/69143424/how-can-sync-focuse-on-outlinedtextfield-with-use-trailingicon-android-jetpa

2条答案

按热度按时间

kfgdxczn1#

您可以在TextField获得焦点后展开下拉菜单，onFocusChanged修饰符对此很有用。
然后在onDismissRequest中或选择项目时，可以使用LocalFocusManager清除焦点。
有一句话离题了。我建议你总是使用modifier作为最后一个参数：在这种情况下，您不需要在末尾添加逗号，这使得添加新的/删除不必要的修饰符变得更容易

val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
var expanded by remember { mutableStateOf(false) }
var selectedOption by remember { mutableStateOf(options[0]) }
val icon = if (expanded) Icons.Filled.ArrowDropUp else Icons.Filled.ArrowDropDown
val focusManager = LocalFocusManager.current

Column {
    OutlinedTextField(
        value = selectedOption,
        readOnly = true,
        onValueChange = {},
        trailingIcon = {
            Icon(icon, null)
        },
        modifier = Modifier
            .fillMaxWidth()
            .onFocusChanged {
                expanded = it.isFocused
            }
    )

    DropdownMenu(
        expanded = expanded,
        onDismissRequest = {
            expanded = false
            focusManager.clearFocus()
        },
        modifier = Modifier
            .fillMaxWidth()
    ) {
        options.forEach { label ->
            DropdownMenuItem(onClick = {
                selectedOption = label
                expanded = false
                focusManager.clearFocus()
            }) {
                Text(text = label)
            }
        }
    }
}

结果：