PageCurl嵌套横向滚动交互异常及触发范围调整求助

问题描述 #

• 切换图片时无法触发真实的PageCurl滑动操作，仅屏幕边缘可触发该滑动
• 在doublePager的首张图片页面，仅需支持返回操作；在doublePager的第二张图片页面，仅需支持翻至下一个PageCurl页面
• 当前PageCurl仅在屏幕顶部或底部区域生效，需要调整为全屏幕边缘均可触发

现有实现代码 #

var currentIndex by remember { mutableIntStateOf(0) }
var isFirstPage by remember { mutableStateOf(true) }

val state = rememberPageCurlState()
val rowState = rememberScrollState()
val config = rememberPageCurlConfig(
    dragForwardEnabled = false,
    tapForwardEnabled = false,
    tapBackwardEnabled = false
)
val configFirstIndex = rememberPageCurlConfig(
    dragBackwardEnabled = false,
    tapForwardEnabled = false,
    tapBackwardEnabled = false
)

PageCurl(
    modifier = Modifier.fillMaxSize(),
    count = images.size,
    state = state,
    config = if (currentIndex == 0) config else configFirstIndex
) { indexPage ->
    if (indexPage != 0 && indexPage != images.size) {
        Box(
            modifier = Modifier
                .background(Color.Black)
        ) {
            Row(
                modifier = Modifier
                    .horizontalScroll(state = rowState)
            ) {
                AsyncImage(
                    model = images[indexPage],
                    placeholder = null,
                    error = null,
                    contentDescription = "The delasign logo",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Black)
                )
                AsyncImage(
                    model = "https://delasign.com/delasignBlack.png",
                    placeholder = null,
                    error = null,
                    contentDescription = "The delasign logo",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Black)
                )
            }
            LaunchedEffect(key1 = rowState.value) {
                currentIndex = if (rowState.value > 975 || isFirstPage) 1 else 0
            }
        }
        LaunchedEffect(key1 = state) {
            if (state.progress <= -0.65) {
                rowState.scrollTo(rowState.maxValue)
                isFirstPage = false
                currentIndex = 0
            } else if (state.progress >= 0.65) {
                rowState.scrollTo((rowState.value - 10000f).toInt())
                isFirstPage = false
                currentIndex = 1
            }
        }
    } else {
        isFirstPage = true
        AsyncImage(
            model = images[indexPage],
            placeholder = null,
            error = null,
            contentDescription = "The delasign logo",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Black)
        )
    }
}

尝试过的解决方案 #

尝试添加遮罩层禁用子组件滚动，代码如下：

BoxWithConstraints(modifier = modifier) {
    val overlayWidth = constraints.maxWidth * 0.1f
    Box(
        modifier = Modifier
            .width(overlayWidth.dp)
            .fillMaxHeight()
            .background(Color.Red)
    )
}

优化解决方案 #

核心修改点 #

1. 修复PageCurl触发区域与滑动冲突

   • 移除硬编码的滚动阈值，改用屏幕宽度动态计算，避免适配问题
   • 给Row添加触摸事件拦截，区分边缘与非边缘区域：边缘区域保留Row滚动，非边缘区域优先让PageCurl处理滑动
   • 调整PageCurl配置逻辑，根据当前页面状态动态启用/禁用拖拽方向

2. 控制doublePager页面操作权限

   • 结合currentIndex判断doublePager的当前页面：首张仅允许返回操作，第二张仅允许前进操作

修改后的完整代码 #

var currentIndex by remember { mutableIntStateOf(0) }
var isFirstPage by remember { mutableStateOf(true) }

val state = rememberPageCurlState()
val rowState = rememberScrollState()
val screenWidth = LocalConfiguration.current.screenWidthDp

// 动态生成PageCurl配置：根据页面状态控制拖拽权限
val pageCurlConfig by remember(currentIndex) {
    derivedStateOf {
        when {
            // 普通单图页面：启用默认拖拽逻辑
            indexPage == 0 || indexPage == images.size -> rememberPageCurlConfig()
            // doublePager首张页面：仅允许返回操作
            currentIndex == 0 -> rememberPageCurlConfig(
                dragForwardEnabled = false,
                tapForwardEnabled = false
            )
            // doublePager第二张页面：仅允许前进操作
            else -> rememberPageCurlConfig(
                dragBackwardEnabled = false,
                tapBackwardEnabled = false
            )
        }
    }
}

PageCurl(
    modifier = Modifier.fillMaxSize(),
    count = images.size,
    state = state,
    config = pageCurlConfig
) { indexPage ->
    if (indexPage != 0 && indexPage != images.size) {
        Box(
            modifier = Modifier
                .background(Color.Black)
        ) {
            Row(
                modifier = Modifier
                    .horizontalScroll(state = rowState)
                    // 拦截触摸事件：非边缘区域交给PageCurl处理
                    .pointerInput(Unit) {
                        detectHorizontalDragGestures(
                            onDragStart = { offset ->
                                val isEdgeArea = offset.x <= screenWidth * 0.1f || offset.x >= screenWidth * 0.9f
                                if (!isEdgeArea) consumeAllGestureEvents()
                            }
                        )
                    }
            ) {
                AsyncImage(
                    model = images[indexPage],
                    placeholder = null,
                    error = null,
                    contentDescription = "图片",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Black)
                )
                AsyncImage(
                    model = "https://delasign.com/delasignBlack.png",
                    placeholder = null,
                    error = null,
                    contentDescription = "Logo",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Black)
                )
            }

            LaunchedEffect(rowState.value) {
                // 用屏幕宽度的90%作为滚动阈值，替代硬编码数值
                val scrollThreshold = screenWidth * 0.9f
                currentIndex = if (rowState.value >= scrollThreshold.toInt() || isFirstPage) 1 else 0
            }
        }

        LaunchedEffect(state.progress) {
            when {
                state.progress <= -0.65 -> {
                    rowState.scrollTo(rowState.maxValue)
                    isFirstPage = false
                    currentIndex = 1
                }
                state.progress >= 0.65 -> {
                    rowState.scrollTo(0)
                    isFirstPage = false
                    currentIndex = 0
                }
            }
        }
    } else {
        isFirstPage = true
        AsyncImage(
            model = images[indexPage],
            placeholder = null,
            error = null,
            contentDescription = "图片",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Black)
        )
    }
}

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