qml实现双指左右滑动，上下滑动

qml使用SwipeView控件配合MultiPointTouchArea多点触摸控件实现双指轻化左右切换，上下切换

效果展示：

通过MultiPointTouchArea判断是上下滑动还是左右滑动且是不是双指触发

源码：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 960
    height: 540

    property var topPages: [
        {
            name:"垂直页面一",
            color:"#f6ef37"
        },
        {
            name:"垂直页面二",
            color:"#36ab60"
        },
        {
            name:"垂直页面三",
            color:"#3bb8f9"
        }
    ]

    property var bottomPages: [
        {
            name:"水平页面一",
            color:"#d42379"
        },
        {
            name:"水平页面二",
            color:"#bfbfbf"
        },
        {
            name:"水平页面三",
            color:"#e89abe"
        }
    ]
    property bool isVertical: false //判断是否是
    

    SwipeView {
        id: horizontalSwipeView
        width: parent.width
        height: parent.height
        orientation: isVertical ? Qt.Vertical : Qt.Horizontal //垂直方向  Qt.Horizontal
        interactive: false  // 禁用默认的SwipeView交互

        Repeater {
            model: isVertical ? topPages : bottomPages //垂直方向
            delegate: Rectangle {
                width: horizontalSwipeView.width
                height: horizontalSwipeView.height
                color: modelData.color

                Text {
                    anchors.centerIn: parent
                    color: "white"
                    text: modelData.name
                }

                // 双指触摸检测
                MultiPointTouchArea {
                    anchors.fill: parent
                    minimumTouchPoints: 2
                    maximumTouchPoints: 2
                    property real startPointX1;
                    property real startPointX2;
                    property real startPointY1;
                    property real startPointY2;
                    property bool swipeDetected: false;  // 滑动检测标志
                    onPressed: {
                        if (touchPoints.length === 2) {
                            startPointX1 = touchPoints[0].x
                            startPointX2 = touchPoints[1].x
                            startPointY1 = touchPoints[0].y
                            startPointY2 = touchPoints[1].y
                        }
                    }

                    onReleased: {
                        // 重置起始点
                        startPointX1 = 0
                        startPointX2 = 0
                        startPointY1 = 0
                        startPointY2 = 0
                        swipeDetected = false;
                    }

                    onUpdated: {
                        if (!swipeDetected && touchPoints.length === 2) {
                            var point1 = touchPoints[0]
                            var point2 = touchPoints[1]
                            var deltaX1 = point1.x - startPointX1
                            var deltaX2 = point2.x - startPointX2
                            var deltaY1 = point1.y - startPointY1
                            var deltaY2 = point2.y - startPointY2
                            var moveArrow = Math.abs(deltaX1) + Math.abs(deltaX2) - Math.abs(deltaY1) - Math.abs(deltaY2);

                            console.log("deltaX1==",deltaX1);
                            console.log("deltaX2==",deltaX2);
                            console.log("deltaY1==",deltaY1);
                            console.log("deltaY2==",deltaY2);


                            console.log("触发滑动函数moveArrow==",moveArrow)
                            if (moveArrow > 0) { // 水平滑动
                                if (deltaX1 < -50 && deltaX2 < -50) { // 双指均向左滑动
                                    isVertical = false;
                                    swipeRight();
                                    swipeDetected = true;  // 设置标志
                                    console.log("触发滑动函数==swipeRight")
                                } else if (deltaX1 > 50 && deltaX2 > 50) { // 双指均向右滑动
                                    isVertical = false;
                                    swipeLeft()
                                    swipeDetected = true;  // 设置标志
                                    console.log("触发滑动函数==swipeLeft")
                                }
                            } else { // 垂直滑动
                                if (deltaY1 < -50 && deltaY2 < -50) { // 双指均向上滑动
                                    isVertical = true;
                                    swipeUp();
                                    swipeDetected = true;  // 设置标志
                                } else if (deltaY1 > 50 && deltaY2 > 50) { // 双指均向下滑动
                                    isVertical = true;
                                    swipeDown();
                                    swipeDetected = true;  // 设置标志
                                }
                            }
                        }
                    }

                    function swipeRight() {
                        if (horizontalSwipeView.currentIndex < bottomPages.length - 1) {
                            horizontalSwipeView.currentIndex++;
                        } else {
                            horizontalSwipeView.currentIndex = 0;
                        }
                    }

                    function swipeLeft() {
                        if (horizontalSwipeView.currentIndex > 0) {
                            horizontalSwipeView.currentIndex--;
                        } else {
                            horizontalSwipeView.currentIndex = bottomPages.length - 1;
                        }
                    }

                    function swipeUp() {
                        if (horizontalSwipeView.currentIndex < topPages.length - 1) {
                            horizontalSwipeView.currentIndex++
                        } else {
                            horizontalSwipeView.currentIndex = 0
                        }
                    }

                    function swipeDown() {
                        if (horizontalSwipeView.currentIndex > 0) {
                            horizontalSwipeView.currentIndex--
                        } else {
                            horizontalSwipeView.currentIndex = topPages.length - 1
                        }
                    }
                }
            }
        }

    }


}

总结

对于qml实现需要的功能模块时候，优先寻找Qt官方是否存在对应效果的控件，对该控件进行自定义，做出自己想要的效果。若官方没有，那就从最基本的元素开始手撸咯!