d

    doubov

    2 years ago
    👋 Question with regard to getting match_parent behavior for inner Composables. For example:
    @Composable
    fun Greeting(name: String) {
        val state = state { TextFieldValue("Hello $name") }
    
        Row(modifier = Modifier.fillMaxWidth() + Modifier.wrapContentHeight()) {
            Box(modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight(), backgroundColor = Color.Yellow)
            Column(modifier = Modifier.weight(1f)) {
                TextField(
                    modifier = Modifier.fillMaxWidth() + Modifier.wrapContentHeight(),
                    value = state.value,
                    onValueChange = {
                        state.value = it
                    }
                )
                Text(
                    text = "TextField text: ${state.value.text}",
                    modifier = Modifier.padding(vertical = 8.dp) + Modifier.fillMaxWidth() + Modifier.wrapContentHeight()
                )
                Text(text = "Finish", modifier = Modifier.fillMaxWidth() + Modifier.wrapContentHeight())
            }
            Box(modifier = Modifier.width(32.dp), backgroundColor = Color.Yellow)
        }
    }
    Produces in my opinion, unexpected layout:
    I was expecting left-most Box with yellow background to match the parent (Row) height (whose height is set to wrapContentHeight).
    How do I modify this layout to get the match_parent behavior?
    v

    V Badalyan

    2 years ago
    i think you mistake in plus sign in Modifiets
    d

    doubov

    2 years ago
    What do you mean?
    v

    V Badalyan

    2 years ago
    you can't with mode plus fixrd with becouse it's different yype
    Modifier.fillMaxWidth() + Modifier.wrapContentHeight(),
    look to example
    d

    doubov

    2 years ago
    yeah, I’ve looked, but there’s no documentation about match_parent behavior
    any idea what I’d have to do to get the match_parent behavior for the inner
    Box
    Composables?
    Also, what makes you think that those Modifiers aren’t combinable?
    v

    V Badalyan

    2 years ago
    fiilwidth = match parent
    d

    doubov

    2 years ago
    Box(modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight(), backgroundColor = Color.Yellow)
    that’s what I have for the inner
    Box
    , but it ends up taking up the whole height of the screen
    I even removed
    Modifier.fillMaxWidth()
    from the parent
    Row
    just in case those Modifiers aren’t compatible as your said, but it’s still the same result
    v

    V Badalyan

    2 years ago
    Modifiers.one().two().three
    use dot!
    modifier = Modifier.width(32.dp) + Modifier.fillMaxHeight()
    ->
    modifier = Modifier.width(32.dp).fillMaxHeight()
    d

    doubov

    2 years ago
    That shouldn’t make a difference. Under the hood, those syntaxes result in the same code
    ppvi

    ppvi

    2 years ago
    you are calling fillMaxHeighton the yellow box, why do you expect it to be shorter?
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    2 years ago
    Does it work if you use the
    preferredHeight(IntrinsicSize.Max)
    on your Row, as in the sample in the kdoc: https://developer.android.com/reference/kotlin/androidx/ui/layout/package-summary#(androidx.ui.core.Modifier).preferredHeight(androidx.ui.layout.IntrinsicSize)
    d

    doubov

    2 years ago
    Thanks for the replies. Yeah,
    IntrinsicSize.Max
    seems to do the trick. I was wary of using it since it is in Experimental state.
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    2 years ago
    All of Compose is in the experimental state 😉
    Sean McQuillan [G]

    Sean McQuillan [G]

    2 years ago
    Catching up here – fillMaxHeight will grow the composable to whatever the maximum constraint allowed is. In this case that's the entire screen. It's only keyed off the constraints from the parent so it's not able to respond to child or sibling sizing. IntrinsicSize is the correct solution if you want to fill only the size needed to layout the parent for other children.
    It helped me build a mental model for compose layout to realize that it's intended to be single pass and it works by modifying the (min, max) constraints passed to children. That's why
    fillMaxHeight
    works this way – it's filling the maximum allowed height by the parent. The parent specifying
    wrapContentHeight
    does not add a second layout pass to resize it when its children are measured, but simply changes the min constraint to 0.
    This takes some getting used to coming from Android views. The main advantage you get is that there's no way to express non-performant O(2^n) UIs using
    wrap_content
    or
    layout_weight
    in Compose.
    d

    doubov

    2 years ago
    Interesting, thanks for the info