Jetpack 撰写带圆角的下拉菜单

Abd*_*bri 2 android menu kotlin android-jetpack-compose

您好,我不知道如何在 jetpack compose 中制作切角菜单1.0.0-beta02。我尝试用表面包裹 while 菜单,但没有用。

    TopAppBar(
        modifier = Modifier
            .statusBarsPadding(),
        title = {
            Text(text = "Title")
        },
        actions = {
            var menuExpanded by remember { mutableStateOf(false) }

            IconButton(onClick = { menuExpanded = true }) {
                Icon(Icons.Default.MoreVert, contentDescription = null)
            }

            DropdownMenu(
                expanded = menuExpanded,
                onDismissRequest = {
                    menuExpanded = false
                },
            ) {
                DropdownMenuItem(onClick = {}) {
                    Text("Item 2")
                }
            }
        },
    )

Run Code Online (Sandbox Code Playgroud)

这给了我

没有切角

但我需要这样的东西,它是四舍五入的。

带有材质主题的菜单

Gab*_*tti 7

使用1.0.x的默认形状由使用中的属性DropdownMenu定义 (检查您的主题)。mediumshapesMaterialTheme

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(4.dp),  //<- used by `DropdownMenu`
    large = RoundedCornerShape(0.dp)
)
Run Code Online (Sandbox Code Playgroud)

您可以在主题中更改此值,也可以仅在DropdownMenu.
就像是:

    MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(16.dp))) {
        DropdownMenu(
            expanded = menuExpanded,
            onDismissRequest = {
                menuExpanded = false
            }                
        ) {
            DropdownMenuItem(onClick = {}) {
                Text("Item 2")
            }
            DropdownMenuItem(onClick = {}) {
                Text("Item 3")
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

  • 请注意,“compose.material3”库中的“DropdownMenu”使用“extraSmall”形状而不是“medium”。 (7认同)