Jetpack Compose中Popup组件为何无法实现圆角效果？

问题出在Popup的内容容器未跟随Surface的圆角裁剪，导致视觉上仍能看到方形的Popup边缘。以下是两种可行的解决方式：

方法一：给Surface添加显式裁剪 #

在Surface的Modifier中加入clip修饰符，确保内容与背景都按圆角裁剪，同时保留shape属性用于生成阴影：

Popup(
    alignment = Alignment.Center
) {
    Surface(
        shape = MaterialTheme.shapes.medium,
        modifier = modifier
            .fillMaxWidth(0.9f)
            .clip(MaterialTheme.shapes.medium)
    ) {
        Column(modifier = Modifier.padding(15.dp)) {
            folderAccessInstructions.forEach { string ->
                Text(text = string)
            }
        }
    }
}

方法二：外层容器统一裁剪 #

在Surface外层包裹一个Box，给Box添加裁剪修饰符，让整个Popup的内容区域都按圆角处理：

Popup(
    alignment = Alignment.Center
) {
    Box(
        modifier = Modifier.clip(MaterialTheme.shapes.medium)
    ) {
        Surface(
            shape = MaterialTheme.shapes.medium,
            modifier = modifier.fillMaxWidth(0.9f)
        ) {
            Column(modifier = Modifier.padding(15.dp)) {
                folderAccessInstructions.forEach { string ->
                    Text(text = string)
                }
            }
        }
    }
}

额外优化（Compose 1.4.0+） #

如果你的项目使用Jetpack Compose 1.4.0及以上版本，可直接设置Popup的backgroundColor为透明，彻底消除潜在的默认方形背景：

Popup(
    alignment = Alignment.Center,
    backgroundColor = Color.Transparent
) {
    Surface(
        shape = MaterialTheme.shapes.medium,
        modifier = modifier.fillMaxWidth(0.9f)
    ) {
        Column(modifier = Modifier.padding(15.dp)) {
            folderAccessInstructions.forEach { string ->
                Text(text = string)
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者user13926345