Hello all! Is it possible to get attributes, say ...

# compose

[Billy Newman]

Hello all! Is it possible to get attributes, say for instance the background color, of composable that is passed as a parameter? See reply for example.

[Billy Newman]

Something like this:

@Composable
fun Content(someComposable: (@Composable () -> Unit)? = null) {
  val background = someComposable?.background()  // This does not work
}

[Kirill Grouchnikov]

There is no such thing. This someComposable is not a view / container / component in the traditional sense. It may emit one UI component, it may emit more than one, or it may not emit anything.

[Billy Newman]

Ok makes sense. Ideas on another to achieve what I am after? Looking into a custom scope for that composable. Still not 100% sure how to implement, but something like this:

interface CustomScope {
   
   @Stable
   fun Modifier.background(background: Color): Modifier

}

@Composable
fun Content(someComposable: (@Composable CustomScope.() -> Unit)? = null) {
...
}

[Adam Powell]

what exactly is it that you're after? The compose way is generally to tell your children what to do and expect them to do it, not assemble your children and then query their state after the fact

[Adam Powell]

it's highly unusual for a parent to ask a child about the nature of its background drawing and wanting to do that is a bit of an encapsulation break, like using reflection to inspect the private properties of an object

[Billy Newman]

Sure, specifically I have a common composable for a draggable view. That draggable view has a “drag handle view” at the top. However that common view can also be customized with a header:

@Composable
fun CommonContent(header: (@Composable () -> Unit)? = null) {
  DragHandle()

  header?.invoke()
}

@Composable
fun CustomContent() {

  CommonContent() {
    // custom header
    Column(Modifier.background(Color.Blue)) { ... }
  }
}

I would like for the drag handle view to have the same background color as the custom header. And I don’t really want to duplicate code. IE in this case a drag handle is “common” and should always be present regardless of the custom header.

[Casey Brooks]

Since your custom header is a child of CommonContent, you can use CompositionLocals to implicitly pass parameters down through the composition tree https://developer.android.com/jetpack/compose/compositionlocal

[Chris Sinco [G]]

Adding to Casey’s suggestion, using colors from MaterialTheme like MaterialTheme.colors.background can be useful here because from the code POV you are using a semantic color key, but can use CompositionLocal to override in specific parts in the hierarchy if needed.

[Chris Sinco [G]]

You could also consider a color parameter for DragHandle that defaults to something

[Billy Newman]

Sure I can always pass more information in the CommonContent composable…

@Composable
fun CommonContent(
  header: (@Composable () -> Unit)? = null,
  headerColor: Color = Color.White
) {
  DragHandle(headerColor)

  header?.invoke()
}

But where does that end. Passing in every attribute the drag handle would have in common with the header component seems excessive.

[Billy Newman]

Not sure I fully understand how to use CompositionLocals in this case. Not really sure I want to pass parameters “down”

[Billy Newman]

Also @Adam Powell looking at implementations of customs scopes like Row and Column, they end up using:

interface ParentDataModifier : Modifier.Element {
    /**
     * Provides a parentData, given the [parentData] already provided through the modifier's chain.
     */
    fun Density.modifyParentData(parentData: Any?): Any?
}

To allow the child to modify something on the parent right? Seems like exactly what I am trying to do.

[Chris Sinco [G]]

Not really sure I want to pass parameters “down”

Right, this is where CompositionLocals can be useful as it passes things down in the hierarchy, and it works particularly well for color overrides at certain parts of a UI hierarchy

[Casey Brooks]

It would look something like this:

val LocalHeaderColor = compositionLocalOf { Color.Unspecified }

@Composable
fun CommonContent(
  header: (@Composable () -> Unit)? = null,
  headerColor: Color = Color.White
) {
    CompositionLocalProvider(LocalHeaderColor provides headerColor) {
        DragHandle()
        header?.invoke()
    }
}

The content of both DragHandle and the header lambda can then reference the configured header color with LocalHeaderColor.current, without having to pass it explicitly through function parameters

[Billy Newman]

Casey, thanks for the example, still new to compose. I will give this a go, I greatly appreciate the help!

[Chris Sinco [G]]

+1 great example Casey!

[Adam Powell]

the ParentDataModifiers and scoped modifier factories are less about modifying something on the parent and more about the parent passing down the capability for child elements to annotate the layout nodes they emit in a particular way