I wanna do some kind of Composable Inheritance. I ...

# compose

[Pablo]

I wanna do some kind of Composable Inheritance. I need a parent composable with a Scaffold, and the childrens must have the inner content to the scaffold. How can I apply the innerPadding to the inherited children?

Parent:

@Composable
fun SectionScreen(
    section: Section,
    modifier: Modifier = Modifier,
    content: @Composable (modifier: Modifier) -> Unit,
) {
    Scaffold(
        modifier = modifier,
        topBar = {
            Text(text = "Top Section Header -> sectionID: ${section.sectionID}")
        },
        bottomBar = {
            Text(text = "Top Section Footer -> sectionID: ${section.sectionID}")
        }
    ) { innerPadding ->
        content(Modifier.padding(innerPadding))
    }
}

Children:

@Composable
fun InfoSectionScreen(section: Section, modifier: Modifier = Modifier) = SectionScreen(
    section = section,
    modifier = modifier,
) {
    Column(
        modifier = modifier
    ) {
        Text(text = "Section Content -> sectionID: ${section.sectionID}")
    }
}

As you can see, the issue is in this line:

content(Modifier.padding(innerPadding))

I need to pass the innerpAdding but I don't know how to receive it on InfoSectionScreen

[Mitch Ware]

What if you just pass in the padding value as a primitive, and then let the child Composable within content apply the modifier itself?

Parent:

@Composable
fun SectionScreen(
    section: Section,
    modifier: Modifier = Modifier,
    content: @Composable (padding: Dp) -> Unit,
) {
    Scaffold(
        modifier = modifier,
        topBar = {
            Text(text = "Top Section Header -> sectionID: ${section.sectionID}")
        },
        bottomBar = {
            Text(text = "Top Section Footer -> sectionID: ${section.sectionID}")
        }
    ) { innerPadding ->
        content(innerPadding)
    }
}

Child:

@Composable
fun InfoSectionScreen(section: Section, modifier: Modifier = Modifier) = SectionScreen(
    section = section,
    modifier = modifier,
) { paddingValue ->
    Column(
        modifier = modifier.padding(paddingValue)
    ) {
        Text(text = "Section Content -> sectionID: ${section.sectionID}")
    }
}

[Mitch Ware]

(idk if Dp is the right type for the padding param, but hopefully you get the idea)

[Pablo]

yep it works like that, I was testing that solution seconds ago

[Pablo]

thank you very much

[Pablo]

instead of content: @Composable (padding: Dp) -> Unit, it should be content: @Composable (paddingValues: PaddingValues) -> Unit,

[Pablo]

but the idea is the same, works perfectly 🙂