无法使 ExposeDropdownMenu 与 OutlinedTextField 宽度相同

Question

我遇到以下问题 - 下拉菜单项的宽度与 OutlinedTextField 的宽度不同

寻找解决方案 - 发现以下内容：

1. 添加变量以保持textField宽度：

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

2. 将值设置onGloballyPositioned为TextField

   onGloballyPositioned { coordinates ->
       textFieldSize = coordinates.size.toSize()
   }
   

3. 读取其中的值ExposedDropdownMenu

   ExposedDropdownMenu(
       expanded = expanded,
       onDismissRequest = { expanded = false },
       modifier = Modifier
           .background(Color.White)
           .width(with(LocalDensity.current) { textFieldSize.width.toDp() })
   )
   

问题是它可以很好地与 一起工作DropdownMenu，但不能与 一起工作ExposedDropdownMenu。有什么问题？

这是完整的代码：

var expanded by remember { mutableStateOf(false) }
val genderList by remember { mutableStateOf(listOf("Male", "Female")) }
var textFieldSize by remember { mutableStateOf(Size.Zero) }

val icon = if (expanded)
    Icons.Filled.ArrowDropUp
else
    Icons.Filled.ArrowDropDown

ExposedDropdownMenuBox(
    modifier = modifier
        .clickable(onClick = { expanded = true }),
    expanded = expanded,
    onExpandedChange = { expanded = !expanded }
) {
    OutlinedTextField(
        value = "",
        onValueChange = {},
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                textFieldSize = coordinates.size.toSize()
            },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = BorderColor,
            unfocusedIndicatorColor = Color.Transparent,
            focusedIndicatorColor = BrandColor,
            focusedLabelColor = BrandColor,
        ),
        leadingIcon = {
            Image(
                painter = painterResource(id = R.drawable.ic_complete_registration_sex),
                contentDescription = null
            )
        },
        trailingIcon = { Icon(icon, null) },
        shape = RoundedCornerShape(Dimen.Dimen14),
        label = {
            Text(
                "Choose Gender",
                style = PoppinsNormalStyle14
            )
        },
        readOnly = true
    )

    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
        modifier = Modifier
            .background(Color.White)
            .width(with(LocalDensity.current) { textFieldSize.width.toDp() })
    ) {
        genderList.forEach {
            DropdownMenuItem(
                onClick = { expanded = false },
            ) {
                Text(it, style = PoppinsNormalStyle12Gray2)
            }
        }
    }
}

Answer 1

ExposedDropdownMenuBox旨在为您计算宽度，因此您不必使用所有这些onGloballyPositioned相关逻辑。

事实上，它不起作用是一个已知问题。

在修复之前，建议使用DropdownMenuwith Modifier.exposedDropdownSize()（此修饰符将应用 计算出的宽度ExposedDropdownMenuBox）而不是ExposedDropdownMenu：

DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    modifier = Modifier
        .background(Color.White)
        .exposedDropdownSize()
) {
    genderList.forEach {
        DropdownMenuItem(
            onClick = { expanded = false },
        ) {
            Text(it, style = PoppinsNormalStyle12Gray2)
        }
    }
}