QML —— SwipeView、PageIndicator组合示例（附完整源码）
示例效果
介绍
SwipeView提供了一个基于滑动的导航模型，由一组页面组成。一次只能看到一个页面。用户可以通过横向滑动在页面之间导航。请注意，SwipeView本身是完全不可见的。建议将其与PageIndicator结合使用，以向用户提供有多个页面的视觉线索。
PageIndicator用于指示包含多个页面的容器中的当前活动页面。PageIndicator由呈现页面的委托项组成。如下图:
源码
main.cpp
#include
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window
{
id: root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
SwipeView
{
id: swipeViewID
currentIndex: pageIndicator.currentIndex
anchors.fill: parent
width: parent.width
Tab_CheckBox{width: root.width}
Tab_DelayButton{width: root.width}
Page
{
title: "空页面"
Label
{
anchors.centerIn: parent
text: "Home";
font.bold: true;
font.pixelSize: 28;
}
}
TabTest{width: root.width}
}
PageIndicator
{
id: pageIndicator
interactive: true
count: swipeViewID.count
currentIndex: swipeViewID.currentIndex
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
Tab_CheckBox.qml
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.5
Item
{
Rectangle
{
id: resultHolder;
color: "#a0a0a0";
width: 220;
height: 80;
anchors.centerIn: parent;
visible: false;
z: 2;
opacity: 0.8;
border.width: 2;
border.color: "#808080";
radius: 8;
Text
{
id: result;
anchors.fill: parent;
anchors.margins: 5;
font.pointSize: 16;
color: "blue";
font.bold: true;
wrapMode: Text.Wrap;
}
Button
{
anchors.right: parent.right
anchors.rightMargin: 3
anchors.top: parent.top
anchors.topMargin: 3
width: 18
height: 18
Image
{
source: "qrc:/Image/close.png"
anchors.fill: parent
}
onClicked: {resultHolder.visible=false}
}
}
Rectangle
{
anchors.fill: parent
color: "#cafa8f"
Text
{
id: selectID
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 10
text: qsTr("选择你喜欢的水果(可多选):")
font.family: "微软雅黑"
font.pixelSize: 16
}
ColumnLayout
{
id: columnLayoutID
spacing: 12
anchors.top: selectID.bottom
anchors.topMargin: 10
anchors.left: selectID.left
anchors.leftMargin: 30
Repeater
{
id: checkBoxList
model: ["苹果","香蕉","西瓜","桃子","哈密瓜","菠萝"]
CheckBox
{
text: modelData
font.family: "微软雅黑"
onClicked: resultHolder.visible = false;
}
}
}
Button
{
text: qsTr("确认选择")
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: columnLayoutID.bottom
anchors.topMargin: 10
onClicked:
{
let str = [];
for(let index = 0;index<checkBoxList.count;++index)
{
var tCheckBox = checkBoxList.itemAt(index)
if(tCheckBox.checked){str.push(tCheckBox.text)}
console.log(tCheckBox.text,tCheckBox.checked)
}
if(str.length > 0)
{
result.text = str.join();
resultHolder.visible = true;
}
}
}
}
}
Tab_DelayButton.qml
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
Rectangle
{
id: root
color: "#fcfcfc"
ColumnLayout
{
anchors.centerIn: parent
spacing: 10
RowLayout
{
width: parent.width
spacing: 20
Text
{
text: qsTr("延迟控件,完成进度(%):")
font.family: qsTr("微软雅黑")
font.pixelSize: 20
}
Text
{
id: progressID
font.family: qsTr("微软雅黑")
font.pixelSize: 16
color: "green"
text: Math.floor(delayID.progress * 100)
}
Repeater
{
model: 3
DelayButton
{
Layout.maximumWidth: 50
Layout.minimumHeight: 30
property var normalList : ["qrc:/Image/resource/icoLike.png","qrc:/Image/resource/icoCoin.png","qrc:/Image/resource/icoCollect.png"];
property var runList : ["qrc:/Image/resource/icoLike_Pressed.png","qrc:/Image/resource/icoCoin_Pressed.png","qrc:/Image/resource/icoCollect_Pressed.png"];
property var okList : ["qrc:/Image/resource/icoLike_Ok.png","qrc:/Image/resource/icoCoin_Ok.png","qrc:/Image/resource/icoCollect_Ok.png"];
property var imgPath: normalList[index]
Connections
{
target: delayID
onProgressChanged:
{
if(delayID.progress == 0)
imgPath = normalList[index]
else if(delayID.progress < 1)
imgPath = runList[index]
else if(delayID.progress == 1)
imgPath = okList[index]
myDelayCanvasID.requestPaint()
console.log(index,progress,imgPath)
}
}
Rectangle
{
anchors.fill: parent
color: root.color
Canvas
{
id: myDelayCanvasID
anchors.fill: parent
onPaint:
{
var minValue = Math.min(width,height)
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = "red"
ctx.lineWidth = 1
ctx.beginPath()
ctx.arc(width / 2, height / 2, minValue/2, 0,3.14*2*delayID.progress)
ctx.stroke()
}
}
}
Image
{
id: imgID
z:1
anchors.centerIn: parent
source: imgPath
}
}
}
}
DelayButton
{
id: delayID
text: qsTr("长按..")
delay: 2000
}
}
}
TabTest.qml
import QtQuick 2.0
import QtQuick.Layouts 1.12
Rectangle
{
id: root
color: "gray"
GridLayout
{
anchors.centerIn: root
columns: 2
rowSpacing: 20
columnSpacing: 20
Text
{
color:"white"
text: qsTr("输入数量:")
font.family: "微软雅黑"
font.pixelSize: 18
}
Rectangle
{
width: 150
height: 25
border.color: "white"
clip: true
TextInput
{
id: textID
anchors.fill: parent
anchors.centerIn: parent
font.family: "微软雅黑"
font.pixelSize: 14
selectByMouse: true
verticalAlignment:TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignLeft
}
}
Text
{
color:"white"
text: qsTr("输入长度:")
font.family: "微软雅黑"
font.pixelSize: 18
}
Rectangle
{
width: 150
height: 25
border.color: "white"
clip: true
TextInput
{
id: lengthID
anchors.fill: parent
anchors.centerIn: parent
font.family: "微软雅黑"
font.pixelSize: 14
selectByMouse: true
verticalAlignment:TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignLeft
}
}
}
}
源码下载
关注
笔者 - jxd