Qt/QML学习-ComboBox

QML学习

• ComboBox例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: 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: 30text: comboBox.displayTextcolor: "green"leftPadding: 10}// ComboBox背景视图background: Rectangle {color: "yellow"border.width: 1}// 选项视图代理delegate: ItemDelegate {width: comboBox.widthheight: comboBox.height// 选项内容视图contentItem: Text {text: namefont.pointSize: 30color: model.colorverticalAlignment: Text.AlignVCenter}// 选项背景视图background: Rectangle {color: comboBox.highlightedIndex === index?"yellow": "transparent"}}// 指示器indicator: Rectangle {x: comboBox.width - widthy: 0width: 50height: comboBox.heightcolor: "transparent"Canvas {anchors.fill: parentonPaint: {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 = 2ctx.stroke()}}}}// 演示Text {id: logTextanchors.left: comboBox.rightanchors.leftMargin: 20font.pointSize: 30}
}

演示

• 视频讲解