limki
limki

Reputation: 21

Jetpack Compose make nested subcomposables have matching widths

I have multiple composables (Text) forming a visual column and I would like to make them have the same width (though not necessarily for themselves, but to make column 2 aligned) The problem is I can't just move the column dimension inside (column of rows -> row of columns) because there are other elements involved (red is set to consume all available space and yellow takes up the whole width): simplified goal layout

I've looked into SubcomposeLayout but I can't see how I could fit the whole thing inside and measure the texts.

My current layout looks like this:

Column (parent layout)

I only have to work with a limited and static set of texts so worst case, I will add all of them into each field and make all but one invisible, but even a solution where I do this just once, measure it and only apply defaultMinSize to all of them would be nice.

Edit: I don't think this is achievable by simple weights Desired layout

Upvotes: 2

Views: 875

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363745

Just apply the weight modifier:

Column(

) {

    Row(Modifier.fillMaxWidth()){
       Text("Text1",Modifier.weight(1f).border(1.dp, Black))
       Text("Text2",Modifier.weight(1f).border(1.dp, Black))
       Text("Text3",Modifier.weight(1f).border(1.dp, Black))
    }
    Row(Modifier.fillMaxWidth()){
        Box(Modifier.fillMaxWidth().height(20.dp).background(Yellow))
    }
    Row(Modifier.fillMaxWidth()){
        Text("Text1",Modifier.weight(1f).border(1.dp, Black))
        Text("Text2",Modifier.weight(1f).border(1.dp, Black))
        Text("Text3",Modifier.weight(1f).border(1.dp, Black))
    }
}

enter image description here

Upvotes: 1

Related Questions