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

Question

DropdownMenu 可组合项未与 Dialog 可组合项内的 OutlinedTextField 的宽度对齐。它稍微向右移动。但是，将 DropdownMenu 放在 Dialog 可组合项之外效果很好。我该如何解决这个问题？

下拉菜单可组合

@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)
                    }
                }
            }

        }
    }


}

可组合对话框

@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

此错误与您试图强制 Dialog 比 Modifier.requiredWidth 预期的更大这一事实有关。视觉上是可行的，但是 DropdownMenu 使用 alert window 尺寸来布局，这个尺寸比你绘制的视图小。

实际上还有另一种方法可以使对话框视图占据整个宽度（小填充除外）不会导致此错误：

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