點擊時未調用列可點擊 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 }
    ...
 )