Row

SimpleAlignByInRow

@Composable
fun SimpleAlignByInRow() {
    Row(Modifier.fillMaxHeight()) {
        // The center of the magenta Box and the baselines of the two texts will be
        // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
        // for all children we want to take part in the alignment. For example, alignByBaseline()
        // means that the baseline of the text should be aligned with the alignment line
        // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
        // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
        // effect.
        Box(
            modifier =
                Modifier.size(80.dp, 40.dp)
                    .alignBy { it.measuredHeight / 2 }
                    .background(Color.Magenta)
        )
        Text(
            text = "Text 1",
            fontSize = 40.sp,
            modifier = Modifier.alignByBaseline().background(color = Color.Red),
        )
        Text(text = "Text 2", modifier = Modifier.alignByBaseline().background(color = Color.Cyan))
    }
}

SimpleRow

@Composable
fun SimpleRow() {
    Row {
        // The child with no weight will have the specified size.
        Box(Modifier.size(40.dp, 80.dp).background(Color.Magenta))
        // Has weight, the child will occupy half of the remaining width.
        Box(Modifier.height(40.dp).weight(1f).background(Color.Yellow))
        // Has weight and does not fill, the child will occupy at most half of the remaining width.
        // Therefore it will occupy 80.dp (its preferred width) if the assigned width is larger.
        Box(Modifier.size(80.dp, 40.dp).weight(1f, fill = false).background(Color.Green))
    }
}