Jetpack Compose中如何在Alert Dialog标题后添加Divider

DevOps 小满

2026-8-2

解决Material3 AlertDialog标题后添加Divider显示在上方的问题

问题原因

Material3的AlertDialog标题区域默认使用了Arrangement.Bottom的垂直排列策略，当你直接在title参数中放置多个组件时，它们会从容器底部开始向上排列，导致Divider出现在标题文本的上方。

解决方案

在title的内容中嵌套一个自定义的Column组件，显式设置垂直排列为Arrangement.Top，让组件按照从上到下的顺序渲染。同时可以给Divider添加顶部内边距，优化视觉间距。

修改后的代码

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.letsgetchecked.app.common.DialogOptionsData

@Composable
fun <T> DialogOptionsView(
    optionData: DialogOptionsData<T>,
) {
    AlertDialog(
        onDismissRequest = {},
        confirmButton = {},
        title = {
            Column(verticalArrangement = Arrangement.Top) {
                Text(text = optionData.header)
                // 添加顶部内边距，让分割线和标题保持合适间距
                Divider(modifier = Modifier.padding(top = 8.dp))
            }
        },
        text = {
            LazyColumn {
                items(optionData.items) {
                    Text(text = "$it")
                }
            }
        },
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewDialogOptions() {
    val items = listOf(1, 2)
    val dataItems = DialogOptionsData(header = "Header", items = items)
    DialogOptionsView(dataItems)
}