点击时未调用列可点击 lambda 块 - jetpack compose

Question

Column(
    Modifier
        .padding(0.dp).clickable {
            expanded = !expanded
        }) {
    OutlinedTextField(
        value = selectedText,
        readOnly = true,
        onValueChange = {
            selectedText = it
            onItemSelected(selectedText)
        },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                //This value is used to assign to the DropDown the same width
                textfieldSize = coordinates.size.toSize()
            },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = pearl,
            unfocusedIndicatorColor = ash,
            backgroundColor = white
        ),
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { expanded = !expanded })
        },
        shape = RoundedCornerShape(12.dp),
        placeholder = {
            Text(text = hint)
        }, maxLines = 1, singleLine = true

    )
 DropdownMenu(
  expanded = expanded,
    ...
 )
    

我在 jetpack compose 中有一个下拉菜单，我需要在单击列时显示下拉菜单，但是在点击时不会调用列的可单击 lambda 块。 可能是什么问题？

Answer 1

OutlinedTextField “窃取”了点击事件。 您可以使用interactionSource 来处理该TextField 的事件，而不是使用单击事件。

在代码中声明要捕获事件的交互源并将其传递给 OutlinedTextField。

var expanded by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }
val isPressed: Boolean by interactionSource.collectIsPressedAsState()

if (isPressed) {
    expanded = true
}

Column(
    Modifier
        .padding(0.dp)) {
    OutlinedTextField(
        value = selectedText,
        interactionSource = interactionSource,
        readOnly = true,
        onValueChange = {
            selectedText = it
            onItemSelected(selectedText)
        },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                //This value is used to assign to the DropDown the same width
                textfieldSize = coordinates.size.toSize()
            },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = pearl,
            unfocusedIndicatorColor = ash,
            backgroundColor = white
        ),
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { expanded = !expanded })
        },
        shape = RoundedCornerShape(12.dp),
        placeholder = {
            Text(text = hint)
        }, maxLines = 1, singleLine = true

    )
 DropdownMenu(
  expanded = expanded,
  onDismissRequest = { expanded = false }
    ...
 )