脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C 语言 → QT Quick自定义组件

QT+Quick实现自定义组件的示例详解

 更新时间：2022年11月23日 08:31:38   作者：音视频开发老舅  
这篇文章主要为大家详细介绍了如何利用QT+Quick实现自定义组件（按钮、下拉菜单等），文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下

按钮

添加ZButton.qml

import QtQuick 2.14
import QtQuick.Window 2.14
/*
    文件名即自定义控件名
    使用别名导出属性：相当于函数的变量形参
    不同的是导出的属性，调用控件是可以不使用(赋值)
*/
Rectangle {
    id: root
 
    //导出自定义属性
    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()
        }
 
    }
}

注意

在自定义导出属性的时候不要和最外层的组件的属性名重复，会覆盖掉默认的属性。

使用

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选中状态，down按下状态，hovered悬停状态
    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
    //每个item的高度
    property int itemHeight: height
    //每个item文本的左右padding
    property int itemPadding: 10
    //下拉按钮左右距离
    property int indicatorPadding: 3
    //下拉按钮图标
    property url indicatorSource: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/double-arrow.png"
    //圆角
    property int radius: 4
    //最多显示的item个数
    property int showCount: 5
    //文字颜色
    property color textColor: "#333333"
    property color textSelectedColor: "#222222"
    //model数据左侧附加的文字
    property string textLeft: ""
    //model数据右侧附加的文字
    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
        //按钮图标
        Image {
            id: box_indicator_img
            anchors.centerIn: parent
            source: control.indicatorSource
        }
    }
 
    //box显示item
    contentItem: T.TextField{
        //control的leftPadding会挤过来，不要设置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
        //默认鼠标选取文本设置为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 {
        //默认向下弹出，如果距离不够，y会自动调整（）
        y: control.height
        width: control.width
        //根据showCount来设置最多显示item个数
        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
            //按行滚动SnapToItem ;像素移动SnapPosition
            snapMode: ListView.SnapToItem
            //ScrollBar.horizontal: ScrollBar { visible: false }
            ScrollBar.vertical: ScrollBar { //定制滚动条
                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
    }
}

效果

到此这篇关于QT+Quick实现自定义组件的示例详解的文章就介绍到这了,更多相关QT Quick自定义组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • C++Smart Pointer 智能指针详解

    C++Smart Pointer 智能指针详解

    这篇文章主要为大家详细介绍了C++Smart Pointer 智能指针，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • QT编写地图实现设备点位的示例代码

    QT编写地图实现设备点位的示例代码

    在地图应用的相关项目中，在地图上标识一些设备点，并对点进行交互这个功能用的最多的，于是需要一套机制可以动态的添加、删除、清空、重置。本文将详细介绍这些功能如何实现，需要的可以参考一下
    2022-01-01
  • C++实现LeetCode(309.买股票的最佳时间含冷冻期)

    C++实现LeetCode(309.买股票的最佳时间含冷冻期)

    这篇文章主要介绍了C++实现LeetCode(309.买股票的最佳时间含冷冻期),本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • c语言重要的字符串与内存函数

    c语言重要的字符串与内存函数

    这篇文章主要介绍一些c语言中常用字符串函数和内存函数的使用和注意事项，并且为了帮助读者理解和使用，也都模拟实现了他们的代码,需要的朋友可以参考一下
    2021-09-09
  • C语言打印某一年的日历

    C语言打印某一年的日历

    这篇文章主要为大家详细介绍了C语言打印某一年的日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • C语言完整特性详情

    C语言完整特性详情

    这篇文章主要介绍了C# 10的相关资料方法,感兴趣的朋友可以参考下文
    2021-08-08
  • 用C++实现队列的程序代码

    用C++实现队列的程序代码

    本篇文章是对使用C++实现队列的程序代码进行了详细的分析介绍，需要的朋友参考下
    2013-05-05
  • C++中的对象初始化操作代码

    C++中的对象初始化操作代码

    对象初始化可以分为默认初始化、直接初始化、拷贝初始化以及值初始化。本文重点给大家介绍C++中的对象初始化操作代码，感兴趣的朋友跟随小编一起看看吧
    2021-12-12
  • Cmake中强大的输出函数message示例解析

    Cmake中强大的输出函数message示例解析

    这篇文章主要介绍了Cmake中强大的输出函数message解析,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • OpenCV 通过Mat遍历图像的方法汇总

    OpenCV 通过Mat遍历图像的方法汇总

    对图像中的所有点或特殊点进行运算，所以遍历图像就显得很重要，如何高效的遍历图像是一个很值得探讨的问题，本文给大家带来了多种方法操作OpenCV 通过Mat遍历图像，感兴趣的朋友一起看看吧
    2022-02-02

最新评论