Koltin/jetpack compose - rozmieszczenie slidera

Zrobiłem taki layout za pomocą jetpack compose:

Teraz potrzebuję to nieco zmodyfikować do takiej postaci ( tablet):

Myślałem, że da się to zrobić, a pomocą Row i Column ale wygląda na to, że nie.
Proszę o jakieś wskazówki.

Powinieneś być w stanie zrobić to za pomocą Row i Column, opisz swój problem dokładniej.

Btw, poprawny dział powinien być Mobilne.

Pokombinowałem i jest lepiej :-) ale...wygląda to tak ( na razie ćwiczę dwa slidery):

a oba prostokąty powinny być identyczne bo mają ustawione dokładnie takie same parametry . Dlaczego tak jest ?
Domyślam się, że czerwony jako pierwszy przykrywa ten żółty ale dlaczego nie są rozsunięte proporcjonalnie?
Wiem że pytania na poziomie przedszkola ale na takim właśnie poziomie jestem :-)

Tu kod:

package com.example.rozmiarslidera

import android.os.Bundle
import android.transition.Slide
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.rozmiarslidera.ui.theme.RozmiarSlideraTheme
import kotlin.math.roundToInt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RozmiarSlideraTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainContent()
                }
            }
        }
    }
}

@Composable
fun MainContent(){
    var sliderPosition_1 by remember { mutableStateOf(0F)}
    var sliderPosition_2 by remember { mutableStateOf(0F)}
Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.DarkGray)
        .padding(12.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
    Box(
        Modifier
            .background(Color.Red)
            .fillMaxSize(0.5F)
            //.fillMaxWidth()
    ) {
        Text(
            text = " Position: ${(sliderPosition_1 *100).roundToInt()}",
        )
        Slider(
            value = sliderPosition_1,
            onValueChange = {sliderPosition_1= it} )
    }

    Box(
        Modifier
            .background(Color.Yellow)
            .fillMaxSize(0.5F)
    ) {
        Text(
            text = " Position: ${(sliderPosition_2 *100).roundToInt()}",
        )
        Slider(
            value = sliderPosition_2,
            onValueChange = {sliderPosition_2= it} )
    }
}


}

Jeszcze małe poprawki i wygląda na to, że one są jednak obok siebie:

Tu poprawiony kod:

Box(
        Modifier
            .background(Color.Yellow)
            .fillMaxSize(0.3F)
            .padding(12.dp)
            .background(Color.LightGray)

Z tekstem idzie łatwo i zgodnie z oczekiwaniami:

@Composable
fun MainContent(){
Row(
    Modifier
        .background(Color.Red)
        .fillMaxSize(0.3F)
        .padding(12.dp)
        .background(Color.LightGray),
    verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center


) {
    Column(Modifier
        .background(Color.Red)
    ) {
        Text(
            text = " Pierwsze pole",
        style = MaterialTheme.typography.h4
            )


        Text(
            text = " Drugie pole",
                    style = MaterialTheme.typography.h4
        )
    }

    Column(Modifier
        .background(Color.Yellow)

    ) {
        Text(
            text = " Pierwsze pole",
            style = MaterialTheme.typography.h4)
        Text(
            text = " Drugie pole",
            style = MaterialTheme.typography.h4)
    }
}





}

Przy czterech polach jest też ciekawie

A to tylko taki prosty zabieg:

Column() {
                       MainContent()
                       MainContent()
                   }

Odpowiadam sobie sam:

Utworzyłem drugą, bliźniaczą funkcję i to zadziałało ponieważ niezależnie mogłem zmienić rozmiar dolnych boxów.
Nie do końca rozumiem jak to działa( wymiarowanie) i ustawiam to na wyczucie ale efekt jest taki jaki chciałem uzyskać.

 Column(
                       
                   ) {
                       MainContent()
                       MainContent_2()
                   }

Tu różnice w rozmiarach boxów w kolejności:
Górny lewy:

.fillMaxWidth(0.49F)
                .fillMaxHeight(0.3F)

Górny prawy:

.fillMaxWidth(1F)
                .fillMaxHeight(0.3F)

Dolny lewy:

.fillMaxWidth(0.49F)
                .fillMaxHeight(0.45F)

Dolny prawy:

.fillMaxWidth(1F)
                .fillMaxHeight(0.45F)