How can I control heights in jetpack compose exandable tabs

Question

PROBLEM:

I am working with a vertical list of tabs where one tab is always open

A container contains the list and under the container there is a button

When a tab is open the content is sometimes pushes the other tabs out of the container. (under the button)

QUESTION:

How can I make the tabs always fill out the container and then scroll the content inside the tab when it is open?

I tried with a LazyColumn inside the card but it removed the swiping mechanism when I swipe over the lazycolumn.

fun EventDetail(){
    var selectedItem by rememberSaveable { mutableStateOf(0) }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MoroDarkPurple)
    ) {
        Column(
            verticalArrangement = Arrangement.spacedBy(10.dp),
            modifier = Modifier
                .padding(10.dp)
                .fillMaxSize()
                .weight(6f)
                .swipeableTopBottom(
                    onTop = {
                        selectedItem = (selectedItem - 1).coerceIn(0, itemsCount)
                    },
                    onBottom = {
                        selectedItem = (selectedItem + 1).coerceIn(0, itemsCount)
                    },
                )
        ) {

            Card(
                shape = RoundedCornerShape(32.dp)
            ) {
                Column(
                    Modifier
                        .clickable {
                            selectedItem = 0
                        }
                        .fillMaxWidth()
                        .background(MoroPurple)
                        .padding(10.dp)
                ) {
                    Text("BASE INFORMATION", style = MaterialTheme.typography.h1)
                    AnimatedVisibility(
                        visible = 0 == selectedItem,
                    ) {
                        Column {
                            //content ...
                        }
                    }
                }
            }

            Card(
                shape = RoundedCornerShape(32.dp)
            ) {
                Column(
                    Modifier
                        .clickable {
                            selectedItem = 1
                        }
                        .fillMaxWidth()
                        .background(MoroPurple)
                        .padding(10.dp)
                ) {
                    Text("URLS", style = MaterialTheme.typography.h1)
                    AnimatedVisibility(
                        visible = 1 == selectedItem,
                    ) {
                        Column {
                            Image(
                                painter = rememberImagePainter(
                                    data = imageUrl,
                                    builder = {
                                        transformations(CircleCropTransformation())
                                    }
                                ),
                                contentDescription = "Event image",
                                modifier = Modifier.size(256.dp)
                            )
                            //content ...
                        }
                    }
                }
            }

            Card(
                shape = RoundedCornerShape(32.dp)
            ) {
                Column(
                    Modifier
                        .clickable {
                            selectedItem = 2
                        }
                        .fillMaxWidth()
                        .background(MoroPurple)
                        .padding(10.dp)
                ) {
                    Text("DESCRIPTION", style = MaterialTheme.typography.h1)
                    AnimatedVisibility(
                        visible = 2 == selectedItem,
                    ) {
                        Column {
                            //content ...
                        }
                    }
                }
            }

            Card (
                shape = RoundedCornerShape(32.dp)
                    ) {
                Column(
                    Modifier
                        .clickable {
                            selectedItem = 3
                        }
                        .fillMaxWidth()
                        .background(MoroPurple)
                        .padding(10.dp)
                ) {
                    Text("BOOLEANS", style = MaterialTheme.typography.h1)
                    AnimatedVisibility(
                        visible = 3 == selectedItem,
                    ) {
                        Column {
                            //content ...
                        }
                    }
                }
            }
        }
        Card(
            modifier = Modifier
                .weight(1f)
                .padding(start = 0.dp, end = 0.dp, top = 0.dp, bottom = 0.dp),
            shape = RoundedCornerShape(topStart = 64.dp, topEnd = 64.dp)
        ) {
            Button(
                onClick = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MoroPurple)
                    .padding(16.dp),
                shape = RoundedCornerShape(32.dp),
                colors = ButtonDefaults.buttonColors(
                    contentColor = MoroPurple,
                    backgroundColor = MoroDarkPurple,

                    ),
            ) {
                Text(text = "Save", style = MaterialTheme.typography.h1)
            }
        }
    }
}

Answer 1

Just add weights to the Column s.

Like so,

Card(
    shape = RoundedCornerShape(32.dp),
) {
    Column(
        Modifier
            .clickable {
                selectedItem = 0
            }
            .fillMaxWidth()
            .background(MoroPurple)
            .padding(10.dp),
    ) {
        Text("BASE INFORMATION", style = MaterialTheme.typography.h1)
        AnimatedVisibility(
            visible = 0 == selectedItem,
        ) {
            Column(
                modifier = Modifier.weight(1f),
            ) { //This right here, you should be good to go after this
                //content ...
            }
        }
    }
}