如何在Kotlin Compose中实现底部弹窗式分享组件？

一、组件名称与搜索关键词 #

• 你要实现的这个组件，官方标准名称就是Modal Bottom Sheet，分享弹窗是基于它定制的业务样式
• 推荐搜索关键词：
  • Jetpack Compose Modal Bottom Sheet
  • Compose 底部分享弹窗实现
  • Compose ModalBottomSheetLayout 自定义

二、基础实现示例 #

Compose官方提供了ModalBottomSheetLayout组件，无需从零实现弹出逻辑，直接基于它定制分享样式即可：

@Composable
fun ShareBottomSheetDemo() {
    val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = "分享到",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                // 分享选项行，可替换为实际平台图标
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceAround
                ) {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Icon(Icons.Default.Share, contentDescription = "微信")
                        Text(text = "微信", fontSize = 12.sp, modifier = Modifier.padding(top = 4.dp))
                    }
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Icon(Icons.Default.Share, contentDescription = "QQ")
                        Text(text = "QQ", fontSize = 12.sp, modifier = Modifier.padding(top = 4.dp))
                    }
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Icon(Icons.Default.Share, contentDescription = "微博")
                        Text(text = "微博", fontSize = 12.sp, modifier = Modifier.padding(top = 4.dp))
                    }
                }
                // 取消按钮
                Button(
                    onClick = { scope.launch { sheetState.hide() } },
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 24.dp)
                ) {
                    Text(text = "取消")
                }
            }
        }
    ) {
        // 主内容区：触发分享的按钮
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = { scope.launch { sheetState.show() } }) {
                Text(text = "打开分享弹窗")
            }
        }
    }
}

三、自定义优化提示 #

• 调整弹窗高度：通过sheetContent的布局高度控制，或设置sheetState的skipPartiallyExpanded = true，让弹窗仅支持全屏/隐藏两种状态
• 定制样式：替换图标为各平台官方图标，调整文字颜色、间距、按钮样式等
• 自定义遮罩：通过ModalBottomSheetLayout的scrimColor参数修改背景遮罩的颜色和透明度

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