时间戳

首页 > 解决方案 > 下拉菜单剪辑/缩小项目 Jetpack Compose

android - 下拉菜单剪辑/缩小项目 Jetpack Compose

问题描述

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

@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()andSurface()代替，DropdownMenuItem()但结果是相似的。
  2. 赋予MyMenuItem()作品宽度；但我希望它根据内容自动调整大小。

标签： androidkotlinandroid-jetpack-composeandroid-jetpack

解决方案

一般来说，要创建这样的布局，您只需Modifier.weight(1f)将Text.

Modifier.width(IntrinsicSize.Max)您还需要Column使宽度等于最宽的项目，但在您的情况下，它已经内置于DropdownMenu.

但是随后会弹出此错误，它不允许您正确调整MyMenuItem内部大小Icon。请加一个星号以引起更多关注。

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

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

结果：

推荐阅读