Home > database >  Increase space between title and text of AlertDialog in Compose
Increase space between title and text of AlertDialog in Compose

Time:10-07

In a simple AlertDialog like the following

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

how can I set a spacing between title and the first TextButton?
I tried to set a .padding(top = X.dp) to the Column, or the first text button, but this seems to only create a space at the bottom of the AlertDialog.
Also setting a custom .height(X.dp) did not work.

I'm using Compose 1.0.3

CodePudding user response:

This is NOT an answer. It only provides info on why this is not possible.

The requirement seems not achievable at this point (6th Oct 2021) with the current compose version (1.0.3).
Will update this once that is possible.

The AlertDialog code does not respect the padding values provided.

AlertDialog.kt

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

The text offset used for the positioning is calculated like this.

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

The distance between the first text in the text composable and the last text in the title composable is always 36.sp.

The Alert Dialog code in compose seems too hackish currently and I could see a few TODO's in the code.

Hopefully, the code will be changed to handle more scenarios soon.

CodePudding user response:

I'm using this composable as first child inside Column

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

It's not perfect, but it works for my usecase.

  • Related