如何控制喷气背包中的高度组成可扩展选项卡

Question

问题：

我正在处理一个标签的垂直列表，其中一个标签始终打开

容器包含列表，容器下方有一个按钮

当一个选项卡打开时，内容有时会将其他选项卡推出容器。 （在按钮下）

问题：

如何让标签始终填满容器，然后在标签打开时滚动标签内的内容？

我尝试在卡内使用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

只需将权重添加到 Columns。

这样，

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