下拉菜单项目被剪裁/缩小 Jetpack Compose。

Question

我正在创建一个下拉菜单，其中每个项目都包含文本元素和图标（中间有一个空格），但只有第一个文本完全显示。只有当有其他项目占用更多的空间时，该图标才可见。

@Preview(showSystemUi = true)
@Composable
fun MyScreen() {
    Box(Modifier.fillMaxSize(), Alignment.Center) {

        Box() {
            var expanded by remember { mutableStateOf(false) }

            IconButton(onClick = { expanded = !expanded }) {
                Icon(imageVector = Icons.Default.MoreVert, contentDescription = null)
            }

            DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
                MyMenuItem("item 1")           // Icon visible
                MyMenuItem("item 2")           // Icon visible
                MyMenuItem("item 3 long text") // Icon width shrunk to 0
                MyMenuItem("item 4 long te")   // Icon visible but shrunk
            }

        }
    }
}

@Composable
fun MyMenuItem(text: String) {
    DropdownMenuItem(onClick = { }) {
        Text(text)
        Spacer(modifier = Modifier.weight(1f))
        Icon(imageVector = Icons.Default.Check, contentDescription = null) // <-- Icon
    }
}

注意：

1. 我还尝试使用Row()和Surface()替换DropdownMenuItem()，但结果相似。
2. 给MyMenuItem()设置宽度可以解决问题；但我希望它能根据内容自动调整大小。

- Shreyash.K

Answer 1

通常情况下，要创建这样的布局，只需要对Text应用Modifier.weight(1f)。

您还需要对Column应用Modifier.width(IntrinsicSize.Max)，以使宽度等于最宽的项，但在您的情况下，已经内置在DropdownMenu中了。

但是，然后出现了此错误，它不允许您正确调整包含Icon的MyMenuItem的大小。请给它加星标以引起更多关注。

在修复此错误之前的临时解决方案是，手动指定图标的大小，如下所示：

// copied from the source code as it's internal
const val MaterialIconDimension = 24f

@Composable
fun MyMenuItem(text: String) {
    DropdownMenuItem(
        onClick = { }
    ) {
        Text(text, Modifier.weight(1f))
        Icon(
            imageVector = Icons.Default.Check, 
            contentDescription = null, 
            modifier = Modifier.size(MaterialIconDimension.dp)
        )
    }
}

结果：

- Phil Dukhov

---

昨天我按照你说的做法解决了这个问题。但是我不知道IntrinsicSize的bug。谢谢你告诉我！在这个bug被修复之前，这可能对其他人有用。 - Shreyash.K

“Modifier.weight(1f)” 是唯一对我有效的方法。我花了数小时寻找这个解决方案！ - kc_dev

Answer 2

尝试使用前导/尾随图标，就像这样：

DropdownMenuItem(
            text = { Text("New") },
            onClick = { onNewClicked() },
            trailingIcon = {
                Icon(imageVector = Icons.TwoTone.RestartAlt, contentDescription = "New Item")
            }
        )

- Rashko Dimitrov