如何在Android Jetpack Compose的ModalBottomSheet顶部添加标题和右侧关闭按钮

要实现这个需求，你可以在ModalBottomSheet的内容区域最顶部放置一个Row布局，利用Arrangement.SpaceBetween让标题居左、关闭按钮居右，同时和底部的拖拽手柄（DragHandle）配合协调。以下是完整的实现代码：

@Composable
fun TitleModalBottomSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(
        onDismissRequest = onDismiss,
        windowInsets = WindowInsets.ime,
        dragHandle = { BottomSheetDefaults.DragHandle() },
        containerColor = Color.White
    ) {
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(4.dp)
        ) {
            // 标题栏区域
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 12.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "ModalBottomSheet标题",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.SemiBold
                )
                IconButton(
                    onClick = onDismiss
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = "关闭弹窗"
                    )
                }
            }

            // 弹窗主体内容（可根据需求替换）
            Text(
                modifier = Modifier.padding(16.dp),
                text = "这里是弹窗的主体内容区域"
            )
        }
    }
}

关键细节说明 #

• 布局逻辑：通过Row的Arrangement.SpaceBetween实现标题与关闭按钮的左右分布，verticalAlignment = Alignment.CenterVertically保证两者垂直居中对齐。
• 关闭按钮：使用IconButton包裹关闭图标，点击事件直接调用onDismiss关闭弹窗，推荐用padding替代offset调整位置，更符合Compose布局规范。
• 样式优化：给标题添加字号、字重增强视觉层级，给Row添加内边距让内容与边缘保持合理间距，提升界面美观度。
• API适配：将原代码中的asset参数替换为imageVector，适配Jetpack Compose较新版本的API（asset已被标记为过时）。

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