a

    allan.conda

    1 year ago
    We have a requirement to have a row with two boxes, and the width of each box is same as the widest box. Any idea how to achieve this optimally in Compose? I have a working solution but it requires multiple passes and flickers in the process.
    Dominaezzz

    Dominaezzz

    1 year ago
    Layout modifier maybe
    Mihai Popa

    Mihai Popa

    1 year ago
    You can try:
    Row(Modifier.width(IntrinsicSize.Max)) {
        Box1(Modifier.weight(1f))
        Box2(Modifier.weight(1f))
    }
    d

    dbaelz

    1 year ago
    Yeah, Box1 and 2 as Box and in combination with
    propagateMinConstraints = true
    in the Boxes it should work.
    Works without, but the background color must be set on the box. Did try it out quick and dirty and looks fine. Thanks @Mihai Popa, I'm sure I need that in the future, too. 😉
    Box(
        modifier = Modifier.fillMaxSize().background(Color.Yellow),
        contentAlignment = Alignment.Center
    ) {
        Row(
            Modifier.width(IntrinsicSize.Max).fillMaxHeight()
        ) {
            Box(
                modifier = Modifier.fillMaxHeight().weight(1f).background(Color.Green)
            ) {
                Text(text = "Short")
            }
    
            Spacer(Modifier.width(16.dp))
    
            Box(
                modifier = Modifier.fillMaxHeight().weight(1f).background(Color.Blue)
            ) {
                Text(text = "Long Box")
            }
        }
    }
    a

    allan.conda

    1 year ago
    Huh, I considered
    IntrinsicSize.Max
    but didn’t think that would work. Would you mind explaining how this code works? Weight is relative to siblings and the maximum width. I don’t understand where IntrinsicSize.Max bases the size from. Anyway, let me try this. 😄 Edit: Works! Thanks