QML学习
- Tumbler例程
- 视频讲解
- 代码
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Tumbler {id: tumbleranchors.centerIn: parent// 只显示3个视图visibleItemCount: 3// 绘制背景视图background: Rectangle {border.width: 1radius: 10}// 模型model: ListModel {ListElement { value: "视图1" }ListElement { value: "视图2" }ListElement { value: "视图3" }ListElement { value: "视图4" }ListElement { value: "视图5" }}// 代理delegate: Rectangle {width: 100height: 50color: "transparent"Text {anchors.centerIn: parenttext: valuefont.bold: truefont.pointSize: 15color: tumbler.currentItem === this.parent? "red": "black"Rectangle {y: parent.height + 5color: "green"width: parent.widthheight: 2}}MouseArea {anchors.fill: parenthoverEnabled: trueonEntered: {color = "gray"opacity: 0.5}onExited: {color = "transparent"opacity: 1}}}// 是否循环wrap: true// 视图加载完成时Component.onCompleted: {tumbler.currentIndex = 1tumbler.currentIndex = 0}}
}
演示
视频讲解
