DropdownMenu 未与 Dialog 可组合项中文本字段的宽度对齐

Question

The DropdownMenu composable is not aligning to the width of the OutlinedTextField which is inside a Dialog composable. It is shifted slightly to the right. However, placing the DropdownMenu outside the Dialog composable works fine. How can I fix this?

DropdownMenu Composable

@Composable
fun MyDropdownMenu() {
    var mExpanded = rememberSaveable { mutableStateOf(false) }
    var mSelectedText = rememberSaveable { mutableStateOf("") }
    var mTextFieldSize = remember { mutableStateOf(Size.Zero) }
    val mCategories = listOf(
        "Produce",
        "Bakery",
        "Meats",
        "Dairy",
        "Deli",
        "Beverages",
        "Frozen"
    )
    val icon = if (mExpanded.value)
        Icons.Filled.KeyboardArrowUp
    else
        Icons.Filled.KeyboardArrowDown
    Column {

        Box {
            OutlinedTextField(
                value = mSelectedText.value,
                readOnly = true,
                onValueChange = { mSelectedText.value = it },
                label = { Text(text = "Category") },
                trailingIcon = {
                    Icon(icon, null,
                        Modifier.clickable { mExpanded.value = !mExpanded.value })
                },
                modifier = Modifier.onGloballyPositioned { coordinates ->
                mTextFieldSize.value = coordinates.size.toSize()
            }.fillMaxWidth(),
            )

            DropdownMenu(
                expanded = mExpanded.value,
                onDismissRequest = { mExpanded.value = false },
                modifier =  Modifier
                      .width(with(LocalDensity.current) { mTextFieldSize.value.width.toDp()})
            ) {
                mCategories.forEach { label ->
                    DropdownMenuItem(onClick = {
                        mSelectedText.value = label
                        mExpanded.value = false
                    }) {
                        Text(text = label)
                    }
                }
            }

        }
    }


}

Dialog Composable

@Composable
fun AddItemDialog(
    onConfirmClicked: () -> Unit,
    onDismiss: () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss
    ) {
        Surface(
            shape = MaterialTheme.shapes.medium,
            color = MaterialTheme.colors.surface,
            modifier = Modifier
                .requiredWidth(LocalConfiguration.current.screenWidthDp.dp * 0.96f)
                .padding(4.dp)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 16.dp, bottom = 0.dp, start = 16.dp, end = 16.dp)
            ) {
                Text(text = "Add an item", style = MaterialTheme.typography.subtitle1)

                MyDropdownMenu()
                
                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                    TextButton(onClick = onDismiss) {
                        Text(text = "Cancel")
                    }
                    TextButton(onClick = onConfirmClicked) {
                        Text(text = "OK")
                    }
                }
            }
        }
    }
}

Answer 1

This bug is related to the fact that you're trying to force Dialog to be bigger than it's expected with Modifier.requiredWidth . Visually it works, but DropdownMenu uses alert window size to layout, and this size is smaller than your drawn view.

There is actually another way to make the dialog view take up the entire width (except for a small padding) that does not cause this bug:

Dialog(
    onDismissRequest = {  },
    properties = DialogProperties(usePlatformDefaultWidth = false),
) {