我如何控制喷气背包中的高度组成可扩展标签

How can I control heights in jetpack compose exandable tabs(我如何控制喷气背包中的高度组成可扩展标签)
本文介绍了我如何控制喷气背包中的高度组成可扩展标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问题:

我正在使用垂直选项卡列表,其中一个选项卡始终处于打开状态

一个容器包含列表,容器下面有一个按钮

当选项卡打开时,内容有时会将其他选项卡推出容器。(在按钮下)

问题:

如何使选项卡始终填满容器,然后在选项卡打开时滚动选项卡中的内容?

我尝试使用卡内的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)
            }
        }
    }
}

推荐答案

只需向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 ...
            }
        }
    }
}

这篇关于我如何控制喷气背包中的高度组成可扩展标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to target newer versions in .gitlab-ci.yml using auto devops (java 11 instead of 8 and Android 31 instead of 29)(如何在.gitlab-ci.yml中使用自动开发工具(Java 11而不是8,Android 31而不是29)瞄准较新的版本)
Android + coreLibraryDesugaring: which Java 11 APIs can I expect to work?(Android+core LibraryDesugering:我可以期待哪些Java 11API能够工作?)
How to render something in an if statement React Native(如何在If语句中呈现某些内容Reaction Native)
How can I sync two flatList scroll position in react native(如何在本机Reaction中同步两个平面列表滚动位置)
Using Firebase Firestore in offline only mode(在仅脱机模式下使用Firebase FiRestore)
Crash on Google Play Pre-Launch Report: java.lang.NoSuchMethodError(Google Play发布前崩溃报告:java.lang.NoSuchMethodError)