快捷導(dǎo)航

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

效果