Qt/QML学习-Tumbler

QML学习

main.qml

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Tumbler {
        id: tumbler
        anchors.centerIn: parent
        // 只显示3个视图
        visibleItemCount: 3
        // 绘制背景视图
        background: Rectangle {
            border.width: 1
            radius: 10
        }

        // 模型
        model: ListModel {
            ListElement { value: "视图1" }
            ListElement { value: "视图2" }
            ListElement { value: "视图3" }
            ListElement { value: "视图4" }
            ListElement { value: "视图5" }
        }
        // 代理
        delegate: Rectangle {
            width: 100
            height: 50
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: value
                font.bold: true
                font.pointSize: 15
                color: tumbler.currentItem === this.parent? "red": "black"
                Rectangle {
                    y: parent.height + 5
                    color: "green"
                    width: parent.width
                    height: 2
                }
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    color = "gray"
                    opacity: 0.5
                }
                onExited: {
                    color = "transparent"
                    opacity: 1
                }
            }
        }
        // 是否循环
        wrap: true
        // 视图加载完成时
        Component.onCompleted: {
            tumbler.currentIndex = 1
            tumbler.currentIndex = 0
        }
    }
}

演示

视频讲解

相关推荐
头疼的程序员7 分钟前
MySQL学习之触发器
学习·mysql
ThreeYear_s1 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
新中地GIS开发老师4 小时前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
Studying 开龙wu5 小时前
机器学习监督学习实战五:六种算法对声呐回波信号进行分类
学习·算法·机器学习
软件开发技术深度爱好者5 小时前
HTML版英语学习系统
学习·html
nenchoumi31195 小时前
UE5 学习系列(二)用户操作界面及介绍
windows·学习·ue5·机器人
NULL指向我5 小时前
香橙派3B学习笔记9:Linux基础gcc/g++编译__C/C++中动态链接库(.so)的编译与使用
笔记·学习
ThreeYear_s6 小时前
基于FPGA的PID算法学习———实现PID比例控制算法
学习·算法·fpga开发
_李小白7 小时前
【OSG学习笔记】Day 18: 碰撞检测与物理交互
笔记·学习·游戏·3d