Qt/QML学习-ComboBox

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("ComboBox")

    ComboBox {
        id: comboBox
        // 列表项数据模型
        model: ListModel {
            ListElement { name: "点赞"; color: "black"}
            ListElement { name: "关注"; color: "red" }
            ListElement { name: "投币"; color: "blue" }
        }
        // 显示文本对应的数据模型属性
        textRole: "name"
        // 选项改变
        onCurrentTextChanged: {
            logText.text = currentText
        }
        // ComboBox内容视图
        contentItem: Text {
            font.pointSize: 30
            text: comboBox.displayText
            color: "green"
            leftPadding: 10
        }
        // ComboBox背景视图
        background: Rectangle {
            color: "yellow"
            border.width: 1
        }
        // 选项视图代理
        delegate: ItemDelegate {
            width: comboBox.width
            height: comboBox.height
            // 选项内容视图
            contentItem: Text {
                text: name
                font.pointSize: 30
                color: model.color
                verticalAlignment: Text.AlignVCenter
            }
            // 选项背景视图
            background: Rectangle {
                color: comboBox.highlightedIndex === index?
                           "yellow": "transparent"
            }
        }
        // 指示器
        indicator: Rectangle {
            x: comboBox.width - width
            y: 0
            width: 50
            height: comboBox.height
            color: "transparent"
            Canvas {
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext('2d')
                    ctx.beginPath()
                    ctx.moveTo(10, 10)
                    ctx.lineTo(40, 10)
                    ctx.lineTo(25, height-10)
                    ctx.closePath()
                    ctx.fillStyle = "blue"
                    ctx.fill()
                    ctx.strokeStyle = "black"
                    ctx.lineWidth = 2
                    ctx.stroke()
                }
            }
        }
    }

    // 演示
    Text {
        id: logText
        anchors.left: comboBox.right
        anchors.leftMargin: 20
        font.pointSize: 30
    }
}

演示

相关推荐
deng-c-f7 小时前
Linux C/C++ 学习日记(28):KCP协议(四):如何实现更复杂的业务:将连接状态的管理进行封装,用户只需实现发送、接收、断开的处理逻辑。
学习·网络编程·kcp
Algebraaaaa10 小时前
什么是前端、后端与全栈开发,Qt属于什么?
开发语言·前端·qt
立志成为大牛的小牛10 小时前
数据结构——二十三、并查集的终极优化(王道408)
开发语言·数据结构·笔记·学习·程序人生·考研
大美B端工场-B端系统美颜师10 小时前
工控软件开发选择难?Electron、Qt、WPF 对比
qt·electron·wpf
QT 小鲜肉11 小时前
【个人成长笔记】Qt Creator快捷键终极指南:从入门到精通
开发语言·c++·笔记·qt·学习·学习方法
feiyangqingyun12 小时前
Qt项目作品在苹果macos上编译运行效果/视频监控系统/物联网平台等
开发语言·qt·macos
QT 小鲜肉13 小时前
【数据结构与算法基础】05. 栈详解(C++ 实战)
开发语言·数据结构·c++·笔记·学习·算法·学习方法
A9better14 小时前
嵌入式开发学习日志40——stm32之I2C协议层
stm32·单片机·嵌入式硬件·学习
ha204289419414 小时前
Linux操作系统学习之---线程控制
java·linux·学习
Laplaces Demon16 小时前
Spring 源码学习(十四)—— HandlerMethodArgumentResolver
java·开发语言·学习