QT+Quick實(shí)現(xiàn)自定義組件的示例詳解
更新時(shí)間：2022年11月23日 08:31:38 作者：音視頻開發(fā)老舅
這篇文章主要為大家詳細(xì)介紹了如何利用QT+Quick實(shí)現(xiàn)自定義組件（按鈕、下拉菜單等），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
按鈕
添加ZButton.qml
import QtQuick 2.14
import QtQuick.Window 2.14
/*
文件名即自定義控件名
使用別名導(dǎo)出屬性：相當(dāng)于函數(shù)的變量形參
不同的是導(dǎo)出的屬性，調(diào)用控件是可以不使用(賦值)
*/
Rectangle {
id: root
//導(dǎo)出自定義屬性
property alias text: label.text
property alias fontSize: label.font.pointSize
property alias textColor: label.color
property alias bgColor: root.color
property alias borderRadius: root.radius
property alias borderColor: root.border.color
property alias borderWidth: root.border.width
signal clicked
width: 116; height: 36
color: "blue"
border.color: "#f3f3f3"
border.width: 1
radius: 4
Text {
id: label
anchors.centerIn: parent
text: "按鈕"
font.family: "微軟雅黑"
font.pointSize: parent.height/3
color: "white"
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: "PointingHandCursor"
onEntered: {
root.opacity = 0.8
}
onExited: {
root.opacity = 1
}
onClicked: {
root.clicked()
}
}
}注意
在自定義導(dǎo)出屬性的時(shí)候不要和最外層的組件的屬性名重復(fù)，會(huì)覆蓋掉默認(rèn)的屬性。
使用
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
width: 640
height: 240
visible: true
title: qsTr("Hello World")
ZButton{
text: "我是按鈕"
height: 36
width: 100
fontSize: 12
borderRadius: 18
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 10
}
}
顯示效果
下拉菜單
添加ZComboBox.qml
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Templates 2.14 as T
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
T.ComboBox {
id:control
//checked選中狀態(tài)，down按下狀態(tài)，hovered懸停狀態(tài)
property color backgroundTheme: "#fefefe"
//下拉框背景色
property color backgroundColor: control.down ? "#eeeeee": control.hovered ? Qt.lighter(backgroundTheme) : backgroundTheme
//邊框顏色
property color borderColor: Qt.darker(backgroundTheme)
//item高亮顏色
property color itemHighlightColor: "#eeeeee"
//item普通顏色
property color itemNormalColor: backgroundTheme
//每個(gè)item的高度
property int itemHeight: height
//每個(gè)item文本的左右padding
property int itemPadding: 10
//下拉按鈕左右距離
property int indicatorPadding: 3
//下拉按鈕圖標(biāo)
property url indicatorSource: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/double-arrow.png"
//圓角
property int radius: 4
//最多顯示的item個(gè)數(shù)
property int showCount: 5
//文字顏色
property color textColor: "#333333"
property color textSelectedColor: "#222222"
//model數(shù)據(jù)左側(cè)附加的文字
property string textLeft: ""
//model數(shù)據(jù)右側(cè)附加的文字
property string textRight: ""
implicitWidth: 120
implicitHeight: 30
spacing: 0
leftPadding: padding
rightPadding: padding + indicator.width + spacing
font{
family: "微軟雅黑"
pixelSize: 16
}
//各item
delegate: ItemDelegate {
id: box_item
height: control.itemHeight
//Popup如果有padding，這里要減掉2*pop.padding
width: control.width
padding: 0
contentItem: Text {
text: control.textLeft+
(control.textRole
? (Array.isArray(control.model)
? modelData[control.textRole]
: model[control.textRole])
: modelData)+
control.textRight
color: (control.highlightedIndex == index)
? control.textSelectedColor
: control.textColor
leftPadding: control.itemPadding
rightPadding: control.itemPadding
font: control.font
elide: Text.ElideRight
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
}
hoverEnabled: control.hoverEnabled
background: Rectangle{
radius: control.radius
color: (control.highlightedIndex == index)
? control.itemHighlightColor
: control.itemNormalColor
//item底部的線
Rectangle{
height: 1
width: parent.width-2*control.radius
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
color: Qt.lighter(control.itemNormalColor)
}
}
}
indicator: Item{
id: box_indicator
x: control.width - width
y: control.topPadding + (control.availableHeight - height) / 2
width: box_indicator_img.width+control.indicatorPadding*2
height: control.height
//按鈕圖標(biāo)
Image {
id: box_indicator_img
anchors.centerIn: parent
source: control.indicatorSource
}
}
//box顯示item
contentItem: T.TextField{
//control的leftPadding會(huì)擠過來，不要設(shè)置control的padding
leftPadding: control.itemPadding
rightPadding: control.itemPadding
text: control.editable
? control.editText
: (control.textLeft+control.displayText+control.textRight)
font: control.font
color: control.textColor
verticalAlignment: Text.AlignVCenter
//默認(rèn)鼠標(biāo)選取文本設(shè)置為false
selectByMouse: true
//選中文本的顏色
selectedTextColor: "green"
//選中文本背景色
selectionColor: "white"
clip: true
//renderType: Text.NativeRendering
enabled: control.editable
autoScroll: control.editable
readOnly: control.down
inputMethodHints: control.inputMethodHints
validator: control.validator
renderType: Text.NativeRendering
background: Rectangle {
visible: control.enabled && control.editable
border.width: parent && parent.activeFocus ? 1 : 0
border.color: control.itemHighlightColor
color: "transparent"
}
}
//box框背景
background: Rectangle {
implicitWidth: control.implicitWidth
implicitHeight: control.implicitHeight
radius: control.radius
color: control.backgroundColor
border.color: control.borderColor
}
//彈出框
popup: T.Popup {
//默認(rèn)向下彈出，如果距離不夠，y會(huì)自動(dòng)調(diào)整（）
y: control.height
width: control.width
//根據(jù)showCount來設(shè)置最多顯示item個(gè)數(shù)
implicitHeight: control.delegateModel
?((control.delegateModel.count<showCount)
?contentItem.implicitHeight
:control.showCount*control.itemHeight)+2
:0
//用于邊框留的padding
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
//按行滾動(dòng)SnapToItem ;像素移動(dòng)SnapPosition
snapMode: ListView.SnapToItem
//ScrollBar.horizontal: ScrollBar { visible: false }
ScrollBar.vertical: ScrollBar { //定制滾動(dòng)條
id: box_bar
implicitWidth: 10
visible: control.delegateModel&&(control.delegateModel.count>showCount)
//background: Rectangle{} //這是整體的背景
contentItem: Rectangle{
implicitWidth:10
radius: width/2
color: box_bar.pressed
? Qt.rgba(0.6,0.6,0.6)
: Qt.rgba(0.6,0.6,0.6,0.5)
}
}
}
//彈出框背景（只有border顯示出來了，其余部分被delegate背景遮擋）
background: Rectangle{
border.width: 1
border.color: control.borderColor
radius: control.radius
}
}
}
使用方式
import QtQuick 2.14
import QtQuick.Window 2.14
Window {
width: 640
height: 280
visible: true
title: qsTr("Hello World")
ZComboBox{
width: 160
height: 36
model: ["小明","小紅","小剛"]
editable: false
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 10
}
}效果
到此這篇關(guān)于QT+Quick實(shí)現(xiàn)自定義組件的示例詳解的文章就介紹到這了,更多相關(guān)QT Quick自定義組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了C 讀取ini文件的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了基于openCV實(shí)現(xiàn)人臉檢測(cè)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
QT編寫地圖實(shí)現(xiàn)設(shè)備點(diǎn)位的示例代碼
在地圖應(yīng)用的相關(guān)項(xiàng)目中，在地圖上標(biāo)識(shí)一些設(shè)備點(diǎn)，并對(duì)點(diǎn)進(jìn)行交互這個(gè)功能用的最多的，于是需要一套機(jī)制可以動(dòng)態(tài)的添加、刪除、清空、重置。本文將詳細(xì)介紹這些功能如何實(shí)現(xiàn)，需要的可以參考一下2022-01-01
本文給大家分享的是如何使用C語言的指針原來來實(shí)現(xiàn)語法樹，并給大家提供了詳細(xì)的實(shí)例代碼，希望大家能夠喜歡2019-02-02
Linux/Manjaro如何配置Vscode的C/C++編譯環(huán)境
這篇文章主要介紹了Linux/Manjaro配置Vscode的C/C++編譯環(huán)境,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了C++作用域與生命周期的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)c++，感興趣的朋友可以了解下2020-08-08
VC6實(shí)現(xiàn)激活后臺(tái)窗口最佳方法
這篇文章主要介紹了VC6實(shí)現(xiàn)激活后臺(tái)窗口最佳方法,實(shí)例分析了VC操作后臺(tái)窗口的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了Qt實(shí)現(xiàn)鬧鐘小程序，利用Qt的designer設(shè)計(jì)需要的鬧鐘界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了在C語言編程中設(shè)置和獲取代碼組數(shù)的方法,分別為setgroups()函數(shù)和getgroups()函數(shù)的使用,需要的朋友可以參考下2015-08-08
C語言數(shù)據(jù)結(jié)構(gòu)不掛科指南之線性表詳解
線性表是由?n(n≥0)個(gè)數(shù)據(jù)元素組成的有窮序列，這篇文章主要來和大家來了C語言數(shù)據(jù)結(jié)構(gòu)中的線性表，感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09