如何控制噴氣背包中的高度構成可擴展選項卡

Question

問題：

我正在使用一個垂直的選項卡列表，其中一個選項卡始終處於打開狀態

一個容器包含列表，在容器下有一個按鈕

When a tab is open the content is sometimes pushes the other tabs out of the container. （按鈕下方）

題：

如何讓標簽始終填滿容器，然后在標簽打開時滾動標簽內的內容？

我嘗試在卡內使用LazyColumn ，但是當我在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

只需將權重添加到Column s。

像這樣，

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 ...
            }
        }
    }
}