Jetpack Compose可展开标签页高度控制：如何解决内容溢出遮挡按钮问题

固定标签高度防止溢出 #

当前你的标签容器是无高度约束的Column，展开内容高度增加后会把其余标签挤出容器，可通过高度权重分配解决：

• 外层承载所有标签的Column已经通过weight(6f)固定了总高度，不会超出父容器范围
• 给每个Card增加动态高度规则：非选中态仅保留标题高度，选中态占完容器内剩余高度
• 给展开的内容区域增加高度限制和滚动属性，内容超长时仅内部滚动
  核心代码修改参考：

// 以第一个BASE INFORMATION标签为例，其余标签同理修改
Card(
    shape = RoundedCornerShape(32.dp),
    // 动态分配高度：选中态占剩余高度，非选中态仅包裹内容
    modifier = if (selectedItem == 0) Modifier.weight(1f) else Modifier.wrapContentHeight()
) {
    Column(
        Modifier
            .clickable { selectedItem = 0 }
            .fillMaxWidth()
            .fillMaxHeight() // 选中态占满分配的高度
            .background(MoroPurple)
            .padding(10.dp)
    ) {
        Text("BASE INFORMATION", style = MaterialTheme.typography.h1)
        AnimatedVisibility(
            visible = 0 == selectedItem,
        ) {
            // 内容区域占满当前Card除标题外的剩余高度，开启内部滚动
            Column(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .verticalScroll(rememberScrollState())
                // 如果内容很长可替换为LazyColumn，写法一致
            ) {
                //原有内容...
            }
        }
    }
}

解决内部滚动与外层标签切换的滑动冲突 #

LazyColumn/滚动Column默认会优先消费滑动事件，导致外层的上下切换逻辑不触发，可通过嵌套滚动拦截实现边界触发切换：

// 先定义嵌套滚动处理逻辑，放在EventDetail方法开头
val localScrollState = rememberLazyListState()
val nestedScrollConnection = remember(selectedItem) {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            val scrollY = available.y
            // 向下滑且内部已经滚动到顶部，触发切上一个标签
            if (scrollY > 0 && localScrollState.firstVisibleItemIndex == 0 
                && localScrollState.firstVisibleItemScrollOffset == 0) {
                selectedItem = (selectedItem - 1).coerceIn(0, 3)
                return Offset(0f, scrollY)
            }
            // 向上滑且内部已经滚动到底部，触发切下一个标签
            val lastItemIndex = localScrollState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: -1
            if (scrollY < 0 && lastItemIndex == localScrollState.layoutInfo.totalItemsCount - 1) {
                selectedItem = (selectedItem + 1).coerceIn(0, 3)
                return Offset(0f, scrollY)
            }
            return super.onPreScroll(available, source)
        }
    }
}
// 给内部滚动组件添加嵌套滚动修饰符
LazyColumn(
    state = localScrollState,
    modifier = Modifier
        .weight(1f)
        .fillMaxWidth()
        .nestedScroll(nestedScrollConnection)
) {
    //原有列表内容...
}

修改后内部滚动时只有到了内容的顶/底部才会触发标签切换，正常滚动内容时不会触发切换逻辑。

内容的提问来源于stack exchange，提问作者mama