windowskotlindesktop-applicationkotlin-multiplatform

Layout with a column and three rows where the middle one should take all the remaining space


I'd like to create a Jetpack Compose Desktop layout where there is:

  • top row for buttons
  • middle row for content taking up all the remaning space
  • bottom row for status labels

I tried this, but I cannot figure out how to make the middle row not to push the last row outside the visible area. Am I even using the correct components for this? I'm not sure if this is even achievable with columns and rows or I need something else?

@Preview
@Composable
fun AppPreview() {

    Box{
        Column {
            Row(Modifier.border(width = 1.dp, color = Color.Blue).fillMaxWidth()) { Text("top") }
            Row(Modifier.border(width = 1.dp, color = Color.Magenta).fillMaxWidth().fillMaxHeight()) { Text("middle") }
            Row(Modifier.border(width = 1.dp, color = Color.Green).fillMaxSize()) { Text("bottom") }
        }
    }
}

Solution

  • Update: Based on your comment.

    You can handle this by using Scaffold.

    Scaffold(
        topBar = {
            // top area
        },
        bottomBar = {
            // bottom area
        }
    ) { paddingValues ->
    
        // middle area
        Box(modifier = Modifier.padding(paddingValues))
    }