“DropDownMenuItem在Android Jetpack Compose中无法正常工作”

huangapple go评论52阅读模式
英文:

DropDownMenuItem doesn't work properly in Android jetpack compose

问题

I want to show a drop down list item in my application but it doesn't work. It shows an error No value passed for parameter 'text'. I checked the DropdownMenuItem() function it shows the following arguments:

@Composable
@ComposableInferredTarget
public fun DropdownMenuItem(
    text: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier,
    leadingIcon: @Composable() (() -> Unit)?,
    trailingIcon: @Composable() (() -> Unit)?,
    enabled: Boolean,
    colors: MenuItemColors,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource
): Unit

My code is:

@Composable
fun dropDownMenu() {

    var expanded by remember { mutableStateOf(false) }
    val suggestions = listOf("Kotlin", "Java", "Dart", "Python")
    var selectedText by remember { mutableStateOf("") }

    var textfieldSize by remember { mutableStateOf(Size.Zero)}

    val icon = if (expanded)
        Icons.Filled.KeyboardArrowUp
    else
        Icons.Filled.KeyboardArrowDown

    Column(Modifier.padding(20.dp)) {
        OutlinedTextField(
            value = selectedText,
            onValueChange = { selectedText = it },
            modifier = Modifier
                .fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    //This value is used to assign to the DropDown the same width
                    textfieldSize = coordinates.size.toSize()
                },
            label = {Text("Label")},
            trailingIcon = {
                Icon(icon,"contentDescription",
                    Modifier.clickable { expanded = !expanded })
            }
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .width(with(LocalDensity.current){textfieldSize.width.toDp()})
        ) {
            suggestions.forEach { label ->
                DropdownMenuItem(onClick = {
                    selectedText = label
                    expanded = false
                }) {
                    Text(text = label)
                }
            }
        }
    }
}

I tried to resolve the issues by the following code:

DropdownMenuItem(text = {label}, onClick = {
    selectedText = label
    expanded = false
})

It pops up a blank window without showing any item list but the item is clickable. When I click on the blank window it writes the item on the field.

How can I show my items when I press the drop-down icon?

英文:

I want to show a drop down list item in my application but it doesn't work. It shows an error No value passed for parameter 'text'. I checked the DropdownMenuItem() function it shows the following argumens:

@Composable
@ComposableInferredTarget
public fun DropdownMenuItem(
    text: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier,
    leadingIcon: @Composable() (() -> Unit)?,
    trailingIcon: @Composable() (() -> Unit)?,
    enabled: Boolean,
    colors: MenuItemColors,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource
): Unit

My code is:


@Composable
fun dropDownMenu() {

    var expanded by remember { mutableStateOf(false) }
    val suggestions = listOf("Kotlin", "Java", "Dart", "Python")
    var selectedText by remember { mutableStateOf("") }

    var textfieldSize by remember { mutableStateOf(Size.Zero)}

    val icon = if (expanded)
        Icons.Filled.KeyboardArrowUp
    else
        Icons.Filled.KeyboardArrowDown


    Column(Modifier.padding(20.dp)) {
        OutlinedTextField(
            value = selectedText,
            onValueChange = { selectedText = it },
            modifier = Modifier
                .fillMaxWidth()
                .onGloballyPositioned { coordinates ->
                    //This value is used to assign to the DropDown the same width
                    textfieldSize = coordinates.size.toSize()
                },
            label = {Text("Label")},
            trailingIcon = {
                Icon(icon,"contentDescription",
                    Modifier.clickable { expanded = !expanded })
            }
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .width(with(LocalDensity.current){textfieldSize.width.toDp()})
        ) {
            suggestions.forEach { label ->
                DropdownMenuItem(onClick = {
                    selectedText = label
                    expanded = false
                }) {
                    Text(text = label)
                }
            }
        }
    }

}

I tried to resolve the issues by the following code:

DropdownMenuItem(text = {label}, onClick = {
                    selectedText = label
                    expanded = false
                })

It pops up a blank window without showing any item list but the item is clickable. When I click on the blank window it write the item on the field.

How can I show my items when I press the drop down icon?

答案1

得分: 1

你需要结合两种方法。text 不是 DropdownMenuItem 的最后一个参数,因此您不能使用尾随 lambda 语法。text = {label} 可以编译通过,但 text@Composable () -> Unit,所以仅传递 label 不会显示任何内容。您需要这样做:

DropdownMenuItem(
    text = { Text(text = label) },
    ...
)
英文:

You have to combine both your approaches. text is not the last parameter of DropdownMenuItem, so you cannot use trailing lambda syntax. text = {label} would compile, but text is @Composable () -> Unit, so just passing label won't display anything. What you have to do is this:

DropdownMenuItem(
    text = { Text(text = label) },
    ...
)

huangapple
  • 本文由 发表于 2023年6月26日 15:07:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76554278.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定