I have a hard time understanding

Column

,

Row

,

modifier=

and

Gravity

Do anyone have reasonable (sane) explanation on how I can achieve following tricky thing (see picture). Here's the code where this layout is built, I want the "5 Center End me!" to be centered vertically (up-down) (as shown), but I can't find any reasonable way to do it in dev03, this was achievable in dev02...

@Composable
fun CardGravityTest()
{
    Card(
            modifier = Spacing(all = 4.dp),
            color = Color.LightGray,
            shape = RoundedCornerShape(
                    5.dp
            )
    ){
        Column {
            Row {
                Surface(color = Color.Red,
                        modifier = Spacing(all = 4.dp)) {
                    Text(text = "1 XX")
                }
                Column(modifier = Flexible(1f) wraps Expanded wraps Spacing(4.dp)){
                    Surface(color = Color.Green){
                        Text(text="2 Flexible wraps Expanded(1f) wraps Spacing(4.dp) x x xx xxx xxxx x xx xxx x xxx")
                    }
                    Surface(color = Color.Magenta){
                        Text(text = "3 Second line xxxxx xxx xx xxxxx xxxx")
                    }
                }
                Column() {
                    Surface(color = Color.DarkGray) {
                        Text(text = "4 Column: OK High on top!")
                    }

                    Surface(color = Color.Yellow,
                            modifier = Gravity.End){
                        Text(text = "5 Center End me!",
                                modifier = Gravity.End)
                    }
                }
            }

            Divider()

            Row (modifier = Spacing(top = 4.dp)){
                Column (modifier = Flexible(1f) wraps Expanded){
                    Surface(color = Color.Blue, modifier = Gravity.Start) {
                        Text(text = "6 Row spacing top, Column Flexible(1f) wraps Expanded, Surface gravity start")
                    }
                }
                Column(modifier = Flexible(1f) wraps Expanded){
                    Surface(color = Color.Cyan, modifier = Gravity.End) {
                        Text(text = "7 Column Flexible wraps Expanded, Surface gravity end, " +
                                "paragraphstyle TextAlign.end ", paragraphStyle = ParagraphStyle(textAlign = TextAlign.End))
                    }
                }
            }

            Row {
                Surface(modifier = Spacing(all = 4.dp), color = Color.White) {
                    Text(text = "8 on Row")
                }
                Surface(modifier = Spacing(all = 4.dp), color = Color.Green)
                {
                    Text(text = "9 on Row")
                }
                Column(modifier = Gravity.Center wraps Flexible(1f)){
                    Surface(color = Color.Red) {
                        Text(text = "10 col center flex, line 1")
                    }
                    Surface(color = Color.DarkGray)
                    {
                        Text(text = "11 line 2 xxxxxx")
                    }
                }
                Column(modifier = Gravity.Center wraps Expanded) {
                    Surface(color = Color.Magenta, modifier = Gravity.End) {
                        Text(text = "12 col cnt mod end")
                    }
                }
            }


        }
    }
}

I took a look at your code. The layout problem here is that the height of the Row is not known when asking the Column that contains 4 and 5 to do its layout. Because you want Row to wrap the Column horizontally. But what if the Column containing 4 and 5 was taller than the one containing 2 and 3? You would have to relayout the Column containing 2 and 3. Anyways, the solution is to wrap the Row in a MaxIntrinsicHeight component. This will prelayout the Row, such that its final height will be known when laying out the Columns. (note that MaxIntrinsicHeight will soon be exposed as a modifier). Then you need to add an ExpandedHeight modifier to the Column containing 4 and 5 to make sure it fills the available space of the Row. Then you can add

Gravity.End wraps Align.CenterVertically

modifier to the Surface of 5. This will make sure the Text is centered vertically in the remaining space after 4.

The screenshot is taken from an emulator, here the the column is not stretched to the bottom... ...but anyhow, I'll take your suggestions into consideration and change the code. Thanx for responding. I really miss a good documentation on layots (rows, columns and gravity, what is possible and not).

Oh yes, indeed CenterVertically is not in dev03 😞

You were right about dev02 (I actually rechecked my code, I knew 🤔 I hav fought about this and found a solution, and actually ended in wrapping near like you did here, but then in dev02 ). I'll try this as you suggests. Thank you for good advices!!