https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

03/09/2021, 1:11 AM
Copy code
@Composable
fun PadMyContentWithTitle(
    modifier: Modifier = Modifier,
    header: String = "",
    content: @Composable ColumnScope.() -> Unit
) {
    Column(modifier) {
        Text(text = header)
        content(modifier.padding(horizontal = 16.dp))
    }
}
I want to have a composable with that essentially takes in another compasable (slot) but pads it on the left and right and adds a Text on top of it. This is what I came up with but I can't actually call
content(modifier.padding(horizontal = 16.dp))
. Is the way around this just to nest the context in a Box/Column and apply padding to that?
👌 1
t

Timo Drick

03/09/2021, 2:14 AM
You cloud also provide the padding to the content e.g
Copy code
content: @Composable ColumnScope.(PaddingValues) -> Unit
Scaffold do it this way. But it depends on what you want.
🙏 1
☝️ 1
c

Colton Idle

03/09/2021, 3:05 AM
@Timo Drick neat little trick. Not sure I exactly follow, but would that basically mean that I would just have this instead:
Copy code
content(ColumnScope, PaddingValues(horizontal = 16.dp))
I did look into the Scaffold source but I am admittedly a little bit lost.
Adam Powell you responded "Yes", but just wanted to see if you could confirm whether a Box would work or not. I can't get it to work because of ColumnScope... but should I change ColumnScope or should I just use a Column instead of a Box?
i

Ian Lake

03/09/2021, 3:34 AM
You can always add another Box around your Column as an implementation detail. Kind of depends if you want a child to opt out (i.e., not apply your modifier if it wants to go edge to edge) or if you want to make it mandatory
t

Timo Drick

03/09/2021, 8:44 AM
If you content needs ColumnScope you have to encapsulate it into a column. Otherwise you could also forward the BoxScope
Copy code
@Composable
fun PadMyContentWithTitle(
    modifier: Modifier = Modifier,
    header: String = "",
    content: @Composable ColumnScope.() -> Unit
) {
    Column(modifier) {
        Text(text = header)
        Column(modifier.padding(horizontal = 16.dp)) {
            content()
        }
    }
}
c

Colton Idle

03/09/2021, 3:59 PM
I don't want the child to be able to opt out. So I think I will just wrap it in a column and be done with it. @Timo Drick how would I implement your original suggestion? I understand how wrapping in a column would work, but I'm curious how I could do it without that using the PaddingValues technique you suggested.
6 Views