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
        }
    }
}

演示

视频讲解

相关推荐
行云流水剑1 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
门前云梦3 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
0x7CF4 小时前
QT3D学习笔记——圆台、圆锥
qt·学习·3d
qq_386322695 小时前
华为网路设备学习-24(路由器OSPF - 特性专题)
学习·华为·智能路由器
viperrrrrrrrrr75 小时前
大数据学习(132)-HIve数据分析
大数据·hive·学习
2401_878454536 小时前
node.js的初步学习
学习·node.js
Clair-Sean7 小时前
【JavaSE】多线程基础学习笔记
笔记·python·学习
moxiaoran57537 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
不做无法实现的梦~8 小时前
rm视觉学习1-自瞄部分
学习
꧁坚持很酷꧂8 小时前
FreeRTOS学习02_任务管理
stm32·学习