Enfrenté el siguiente problema: los elementos del menú desplegable no tienen el mismo ancho que OutlinedTextField

Busqué la solución, encontré lo siguiente:
Agregue la variable para mantener textField ancho del campo de texto:
var textFieldSize by remember { mutableStateOf(Size.Zero) } Establezca el valor en onGloballyPositioned de TextField
onGloballyPositioned { coordinates -> textFieldSize = coordinates.size.toSize() } Lea el valor en ExposedDropdownMenu
ExposedDropdownMenu( expanded = expanded, onDismissRequest = { expanded = false }, modifier = Modifier .background(Color.White) .width(with(LocalDensity.current) { textFieldSize.width.toDp() }) ) El problema es que funciona bien con DropdownMenu , pero no funciona con ExposedDropdownMenu . ¿Cuál es el problema?
Aquí está el código completo:
var expanded by remember { mutableStateOf(false) } val sexList 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() }) ) { sexList.forEach { DropdownMenuItem( onClick = { expanded = false }, ) { Text(it, style = PoppinsNormalStyle12Gray2) } } } }ExposedDropdownMenuBox está diseñado para calcular el ancho por usted para que no tenga que usar toda esta lógica relacionada con onGloballyPositioned .
El hecho de que no funcione es un problema conocido .
Hasta que se solucione, se recomienda usar DropdownMenu con Modifier.exposedDropdownSize() (este modificador aplicará el ancho calculado por ExposedDropdownMenuBox ) en lugar de ExposedDropdownMenu :
DropdownMenu( expanded = expanded, onDismissRequest = { expanded = false }, modifier = Modifier .background(Color.White) .exposedDropdownSize() ) { sexList.forEach { DropdownMenuItem( onClick = { expanded = false }, ) { Text(it, style = PoppinsNormalStyle12Gray2) } } }