在 Compose 中增加 AlertDialog 的标题和文本之间的间距

Posted 2023-03-06

【中文标题】在 Compose 中增加 AlertDialog 的标题和文本之间的间距

【英文标题】：Increase space between title and text of AlertDialog in Compose

【发布时间】：2021-11-25 20:59:23

【问题描述】：

在一个简单的AlertDialog 中，如下所示

AlertDialog(
    modifier = Modifier,
    title = 
        Text(text = "Title")
    ,
    text = 
        Column(
            modifier = Modifier.fillMaxWidth()
        ) 
            TextButton() 
                Text("Text 1")
            
            TextButton() 
                Text("Text 2")
            
        
    ,
    confirmButton = ,
    dismissButton = 
)

如何设置标题和第一个 TextButton 之间的间距？ 我尝试将.padding(top = X.dp) 设置为列或第一个文本按钮，但这似乎只在AlertDialog 的底部创建了一个空格。 设置自定义.height(X.dp) 也不起作用。

我正在使用 Compose 1.0.3

【参考方案1】：

这不是答案。它仅提供有关为什么这是不可能的信息。

目前（2021 年 10 月 6 日），当前的 compose 版本 (1.0.3) 似乎无法满足要求。 如有可能，将更新此内容。

AlertDialog 代码不遵守提供的填充值。

AlertDialog.kt

// Baseline distance from the first line of the text to the last line of the title
private val TextBaselineDistanceFromTitle = 36.sp

用于定位的文本偏移量是这样计算的。

val textOffset = if (titlePlaceable == null) 
    TextBaselineDistanceFromTop.roundToPx()
 else 
    TextBaselineDistanceFromTitle.roundToPx()

可组合文本中的第一个文本与可组合标题中的最后一个文本之间的距离始终为36.sp。

compose 中的 Alert Dialog 代码目前看起来太老套了，我可以在代码中看到一些 TODO。

希望能尽快修改代码以处理更多场景。

【参考方案2】：

我在Column 中使用这个可组合作为第一个孩子

@Composable
fun HackySpacer(space: Dp) 
    Box(
        modifier = Modifier
            .height(space)
            .fillMaxWidth()
    ) 
        Text(text = "")
    
 

它并不完美，但它适用于我的用例。

【参考方案3】：

@Abhimanyu 完美地解释了为什么它现在不起作用，这是我用来实现所需填充的解决方法：将标题放在内容中。 AlertDialog 的title 参数是可选的，因此可以省略/设置为null，而是可以将实际标题放在text 参数中（保存对话框内容）。

@Composable
fun MyComposable() 
    AlertDialog(
        title = null,
        text = 
            Column 
                Text(
                    modifier = Modifier.padding(vertical = 16.dp),
                    text = "Actual title"
                )

                // Rest of the dialog content
            
        
    )

【参考方案4】：

现在可以使用来自Compose Material 3 的新AlertDialog。 title 和text 之间的默认间距更加合理，也可以在两者中添加Modifier.padding() 或Spacer()。

implementation("androidx.compose.material3:material3:1.0.0-alpha01")

androidx.compose.material3.AlertDialog(
    onDismissRequest = 
        openDialog.value = false
    ,
    title = 
        Text(text = "Title", modifier = Modifier.padding(50.dp))
    ,
    text = 
        Spacer(Modifier.height(50.dp))
        Text(text = "Turned on by default")
    ,
    confirmButton = 
        TextButton(
            onClick = 
                openDialog.value = false
            
        ) 
            Text("Confirm")
        
    ,
    dismissButton = 
        TextButton(
            onClick = 
                openDialog.value = false
            
        ) 
            Text("Dismiss")
        
    
)