SwiftUI自定义可展开底部容器：滚动冲突问题求助

核心思路 #

要实现这种滚动联动，关键是拦截并协调父容器和子滚动视图的拖拽事件。可以通过自定义GestureDetector结合NestedScrollConnection处理，纯Compose就能实现，不用依赖原生组件。

纯Compose完整实现方案 #

下面是符合需求的示例代码，能实现类似原生bottom sheet的滚动联动，且完全嵌入当前UI范围内：

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import kotlin.math.roundToInt

@Composable
fun CustomExpandableSheet() {
    val density = LocalDensity.current
    // 定义sheet最小/最大高度（dp转px方便计算偏移）
    val minHeight = with(density) { 150.dp.toPx() }
    val maxHeight = with(density) { 500.dp.toPx() }
    // 控制sheet展开/收起的偏移量
    var offsetY by remember { mutableStateOf(maxHeight - minHeight) }
    val currentHeight = maxHeight - offsetY

    // 子滚动视图状态（以LazyColumn为例）
    val listState = rememberLazyListState()

    // 嵌套滚动事件拦截逻辑
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // 子视图滚到顶部，且用户继续向下拖拽时，把事件交给父容器
                val dragDelta = available.y
                if (dragDelta > 0 && listState.firstVisibleItemIndex == 0 && listState.firstVisibleItemScrollOffset == 0) {
                    offsetY = (offsetY + dragDelta).coerceIn(0f, maxHeight - minHeight)
                    return available.copy(y = 0f) // 消费事件，不让子视图处理
                }
                return Offset.Zero
            }
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        // 主界面背景内容
        Text(text = "主界面内容", modifier = Modifier.fillMaxSize().padding(16.dp))

        // 自定义可展开Sheet
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .offset { IntOffset(0, offsetY.roundToInt()) }
                .draggable(
                    orientation = Orientation.Vertical,
                    state = rememberDraggableState { delta ->
                        offsetY = (offsetY + delta).coerceIn(0f, maxHeight - minHeight)
                    }
                )
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .nestedScroll(nestedScrollConnection) // 绑定嵌套滚动逻辑
            ) {
                // Sheet拖拽头部
                Text(text = "拖拽我展开/收起", modifier = Modifier.fillMaxWidth().padding(16.dp))
                // 子滚动列表
                LazyColumn(state = listState, modifier = Modifier.weight(1f)) {
                    items(50) { index ->
                        Text(text = "列表项 $index", modifier = Modifier.fillMaxWidth().padding(16.dp))
                    }
                }
            }
        }
    }
}

关键细节说明 #

• NestedScrollConnection：通过onPreScroll拦截子视图滚动事件，判断子视图是否已滚到边缘，若用户继续拖拽则把事件转交给父容器处理。
• Draggable修饰符：负责父容器的拖拽展开/收起逻辑，用coerceIn限制偏移范围，避免sheet超出最小/最大高度。
• 适配ScrollView：如果子视图是ScrollView，只需把LazyListState换成ScrollState，判断条件改为scrollState.value == 0即可，逻辑完全通用。

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