QT QML初体验随笔之QQuickView(15)

利用最基础的Item做出手机的滑动分页显示效果

1.依赖

QT QML初体验随笔之QQuickView(14)

2.添加所在基础

QT QML初体验随笔之QQuickView(12)

3.要素

四大状态：复原，左翻页，右翻页，空状态
鼠标控制
鼠标拖拽范围：2/3
自动翻页区间：鼠标拖拽距离超过控件宽度一半，否则复原（状态切换，空状态此时很重要）
初始页和最后页的一面的拖拽无效复原。
鼠标拖拽时控制相邻页跟随：通过控件的x坐标变化槽控制（效果挺好，代码感觉不是太好）
动画效果：先快后慢

4.代码

单页

import QtQuick 2.0

Rectangle {
id: hView;

// 尺寸
height: parent.height;
width: parent.width;

// 颜色
// color: "transparent";

// 基础配置
// 索引值
property int index: 0;
// hView总数量
property int hViewCnt: 0;
// 状态
state: "NULL";

states: [
State {
name: "back";

PropertyChanges {
target: hView;
x: parent.x;
}
},

State {
name: "head_left";

PropertyChanges {
target: hView;
x: -parent.width;
}
},

State {
name: "head_right";

PropertyChanges {
target: hView;
x: parent.width;
}
},

State {
name: "NULL";
}

]

// 动画效果
transitions: [
Transition {
PropertyAnimation{
property: "x";
easing {
type: Easing.InOutBack;
overshoot: 0.1;
}
duration: 300;
}
}
]

// 鼠标区域
MouseArea {
// 锚布局
anchors.fill: parent;

// 拖拽
drag {
target: hView;
axis: Drag.XAxis;
minimumX: -parent.width/3*2;
maximumX: parent.width/3*2;
}

// 释放
onReleased: {

hView.state = "NULL";

if(Math.abs(hView.x) >= parent.width/2)
{
if(0 != hView.x)
{
if(hView.index > 0 && hView.index < hView.hViewCnt-1)
{
hView.x/Math.abs(hView.x) > 0? hView.state = "head_right": hView.state = "head_left";
}
else if(0 == hView.index)
{
hView.x/Math.abs(hView.x) > 0? hView.state = "back": hView.state = "head_left";
}
else if(hView.index == (hView.hViewCnt-1))
{
hView.x/Math.abs(hView.x) > 0? hView.state = "head_right": hView.state = "back";
}
}
}
else
{
hView.state = "back";
}
}
}

}


组合页控件

import QtQuick 2.0

import "../Base"

Item {
id: hViewGrp;

// 限制
clip: true;

// 尺寸
width: parent.width;
height: parent.height;

// 信号
signal curViewIndexChanged(int index);

// 重置窗口位置
function resetViewPos(curViewIndex, x)
{
for(var i = 0; i < hViewGrp.children.length; ++i)
{
if(hViewGrp.children[i].index === (curViewIndex-1))
{
hViewGrp.children[i].x = x - hViewGrp.width;
}
else if(hViewGrp.children[i].index === (curViewIndex+1))
{
hViewGrp.children[i].x = x + hViewGrp.width;
}

if(hViewGrp.children[i].x === hViewGrp.x)
{
curViewIndexChanged(hViewGrp.children[i].index);
}
}
}

HView_Kingmei {
id: hVew3;

index: 3;
hViewCnt: hViewGrp.children.length;

color: "blue";

onXChanged: {
resetViewPos(index, x);
}
}

HView_Kingmei {
id: hVew2;

index: 2;
hViewCnt: hViewGrp.children.length;

color: "magenta";

onXChanged: {
resetViewPos(index, x);
}
}

HView_Kingmei {
id: hVew1;

index: 1;
hViewCnt: hViewGrp.children.length;

color: "red";

onXChanged: {
resetViewPos(index, x);
}

}

HView_Kingmei {
id: hView0;

index: 0;
hViewCnt: hViewGrp.children.length;

// color: "light green";

onXChanged: {
resetViewPos(index, x);
}

AnimatedImage {
id: gif;

// anchors.centerIn: parent;
anchors.fill: parent;

source: "Image/Girl.gif";
}
}
}



pageView控件

import QtQuick 2.0

import "../Base"
import "../Base_1"

Item {
id: pageView;

clip: true;

// 尺寸
width: parent.width;
height: parent.height;

// 背景
Background_Kingmei {
id: background;

// 锚布局
anchors.fill: parent;

// 元素透明度
opacity: 0.1;
}

// 视图群
HViewGrp_Kingmei {
id: hViewGrp;

// 锚布局
// anchors.fill: background;
onCurViewIndexChanged: {
indicatorCtrl.setCurIndex(index);
}
}

IndicatorCtrl_Kingmei {
id: indicatorCtrl;

anchors.horizontalCenter: pageView.horizontalCenter;
anchors.bottom: pageView.bottom;
anchors.bottomMargin: 10;
}
}

5.效果

4000

6.总结

鼠标拖拽控制相邻页跟随，代码设计的不是太好
组合页控件，初始是页层层叠加覆盖，有瑕疵
如果将所有页横向布局嵌入父元素，利用Clip，整体滑动是不是代码更简洁？