kotlin 下拉菜单剪辑/缩小项目Jetpack合成

vuktfyat 于 2023-06-24 发布在 Kotlin

关注(0)|答案(2)|浏览(187)

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

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

kotlin

来源：https://stackoverflow.com/questions/69921390/drop-down-menu-clips-shrinks-items-jetpack-compose

2条答案

按热度按时间

c9x0cxw01#

一般来说，要创建这样的布局，您只需要将Modifier.weight(1f)应用到Text。
您还需要为Column添加Modifier.width(IntrinsicSize.Max)，以使宽度等于最宽的项，但在您的示例中，它已经内置在DropdownMenu中。
但是this bug弹出，这不允许您正确调整MyMenuItem的大小，其中包含Icon。请打上星星以引起更多的注意。
在这个bug被修复之前，作为一个临时的解决方案，你可以手动指定图标的大小，就像这样：

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

结果：

赞(0）回复(0）举报 2023-06-24

ddhy6vgd2#

尝试使用像这样的前导/尾随Icon：

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

赞(0）回复(0）举报 2023-06-24

我来回答

kotlin 下拉菜单剪辑/缩小项目Jetpack合成

注意：

2条答案

相关问题

热门标签

最新问答