我如何控制喷气背包中的高度组成可扩展标签 [英] 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 ...
}
}
}
}
这篇关于我如何控制喷气背包中的高度组成可扩展标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
