android - 如何使 Jetpack Compose DropDown Menu 弹出项目更宽？

Question

我有一个 Dropdown可用作选择的可组合 View 。

@Composable
fun <T> DropdownDemo(modifier: Modifier, items: List<T>, selected: MutableState<T>) {
    var expanded by remember { mutableStateOf(false) }
    Box(modifier = modifier.fillMaxWidth()) {
        Text(
            selected.value.toString(),
            modifier = Modifier
                .background(Color.LightGray)
                .fillMaxWidth()
                .clickable(
                    onClick = { expanded = true })
                .padding(16.dp, 0.dp)
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier.fillMaxWidth(),
        ) {
            items.forEachIndexed { index, select ->
                DropdownMenuItem(
                    onClick = {
                        selected.value = items[index]
                        expanded = false
                    },
                    modifier = Modifier.fillMaxWidth(),
                ) {
                    Text(text = select.toString(), modifier = Modifier.fillMaxWidth())
                }
            }
        }
    }
}

没有点击时，Text显示的是填满整个宽度。但是，单击并展开时，弹出窗口无法完全展开，即使我设置了Modifier.fillMaxWidth()在 DropdownMenu和 DropdownMenuItem .

我怎样才能弹出DropdownMenu更宽的？

Answer 1

您可以复制 DropdownMenuItemContent 并对其进行修改以允许传入最小和最大宽度

@Composable
fun AdjustableWidthDropdownMenuItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    minWidth: Dp = 112.dp,
    maxWidth: Dp = 280.dp,
    content: @Composable RowScope.() -> Unit,
) {
    Row(
        modifier = modifier
            .clickable(
                enabled = enabled,
                onClick = onClick,
                interactionSource = interactionSource,
                indication = rememberRipple(true)
            )
            .fillMaxWidth()
            .sizeIn(
                minWidth = minWidth,
                maxWidth = maxWidth,
                minHeight = 48.dp
            )
            .padding(contentPadding),
        verticalAlignment = Alignment.CenterVertically
    ) {
        val typography = MaterialTheme.typography
        ProvideTextStyle(typography.subtitle1) {
            val contentAlpha = if (enabled) ContentAlpha.high else ContentAlpha.disabled
            CompositionLocalProvider(LocalContentAlpha provides contentAlpha) {
                content()
            }
        }
    }
}