qml使用SwipeView控件配合MultiPointTouchArea多点触摸控件实现双指轻化左右切换，上下切换
效果展示：
安卓双指滑动测试demo视频
通过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官方是否存在对应效果的控件，对该控件进行自定义，做出自己想要的效果。若官方没有，那就从最基本的元素开始手撸咯!