So I have an Issue about understanding the modifier.wheigt(), so as I understand the function just divides the space and I am doing the Practice Tutorial about the “ComposeQuadrant” and the solution of the tutorial is:

text

So I wanted to try a naive alternative and deleted every modifier.wheigt(1f) command and used two rows and two columns instead like ->

So instead of

@Composable
fun ComposeQuadrantApp() {
    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(title = stringResource(R.string.c1t1),
                description = stringResource(R.string.c1t2),
                backgroundColor = Color(0xFFEADDFF),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.c2t1),
                description = stringResource(R.string.c2t2),
                backgroundColor = Color(0xFFD0BCFF),
                modifier = Modifier.weight(1f)
            )
        }
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.c3t1),
                description = stringResource(R.string.c3t2),
                backgroundColor = Color(0xFFB69DF8),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.c4t1),
                description = stringResource(R.string.c4t2),
                backgroundColor = Color(0xFFF6EDFF),
                modifier = Modifier.weight(1f)
            )
        }
    }
}

I removed every Modifier.weight and edited it like that:

@Composable
fun ComposeQuadrantApp2() {
    Column(Modifier.fillMaxWidth()) {
        Row() {
            Column(){
                ComposableInfoCard(title = stringResource(R.string.c1t1),
                    description = stringResource(R.string.c1t2),
                    backgroundColor = Color(0xFFEADDFF),
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.c2t1),
                    description = stringResource(R.string.c2t2),
                    backgroundColor = Color(0xFFD0BCFF),
                    modifier = Modifier.weight(1f)
                )
            }

        }
        Row() {
            Column(){
                ComposableInfoCard(
                    title = stringResource(R.string.c3t1),
                    description = stringResource(R.string.c3t2),
                    backgroundColor = Color(0xFFB69DF8)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.c4t1),
                    description = stringResource(R.string.c4t2),
                    backgroundColor = Color(0xFFF6EDFF)
                )
            }

        }
    }
}

And the difference is likedifference