Qt Quick 常用控件：Button（按钮）用法及自定义

最新推荐文章于 2024-03-14 21:15:14 发布

程序员老舅

最新推荐文章于 2024-03-14 21:15:14 发布

阅读量3.3k

点赞数 1

分类专栏： Qt开发文章标签： qt qt开发 qt教程 C++ QML

本文链接：https://blog.csdn.net/m0_60259116/article/details/129324764

版权

Qt开发专栏收录该内容

643 篇文章 264 订阅

订阅专栏

本文介绍了QML中Button的基本使用，包括导入QtQuick.Controls2.5库，设置属性如flat、highlighted、enabled等，以及信号槽连接如onClicked事件。还展示了如何自定义按钮样式，包括纯代码方式改变颜色、使用图片资源实现三态按钮，以及创建包含图标的自定义Rectangle按钮。

摘要由CSDN通过智能技术生成

1、简介

Button 是很常见的控件

Button QML Type

Push-button that can be clicked to perform a command or answer a question. More...

Import Statement: import QtQuick.Controls 2.5

Since: Qt 5.7

Inherits: AbstractButton

Inherited By: RoundButton and ToolButton

根据以上可知，在 QML 中要使用 Buttoon，需要先导入控件库 import QtQuick.Controls 2.5，使用其它控件也是一样，都需要导入这个库。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

在界面上添加一个按钮：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Button{
        x:100  // 设置按钮的横坐标
        y:100  // 设置纵坐标
        text:"我是按钮"   // 按钮文本
 
        // 信号槽连接
        onClicked: {
            console.log("我被点击了")
        }
    }
}

上面只设置了 Button 基本的文本属性和 onClicked 事件处理，下面说说 QML 按钮的其它属性及用法。

2、属性

flat

此属性决定按钮是否为扁平。除非按下或选中按钮，否则通常不会绘制按钮的背景。默认值为 false。

highlighted

此属性决定按钮是否突出显示。可以突出显示一个按钮，以吸引用户的注意。它对键盘交互没有影响。默认值为false。

enabled

设置是否使能。默认值为 true。

font.pointSize

设置字体大小。

3、信号槽连接

在 Button 的父类 AbstractButton 可以找到如下信号：

canceled()
clicked()
doubleClicked()
pressAndHold()
pressed()
released()
toggled()

按钮信号槽写法：on + 信号首字母大写，例如下面的代码，写了一个点击事件，代码如下：

// 信号槽连接，单击信号
onClicked: {
	console.log("我被点击了")
}

槽函数代码的 3 种写法

（1）调用外部 JS 函数；

（2）函数调用时大括号也可以不写；

（3）用控件的 id 调用，例如给 Button 添加了一个属性 id:myButoon。

Button{
    id:myButoon
    x:100 
    y:100
    text:"我是按钮"

    // 信号槽连接，单击信号
    onClicked: {
        console.log("我被点击了")
    }

    // 模拟外部JS函数
    function slotDouble(){
        console.log("我被双击了")
    }

    // 1.调用外部 JS 函数
    //onDoubleClicked: {
    //slotDouble();
    //}

    // 2.函数调用时大括号也可以不写
    //onDoubleClicked: slotDouble()

    // 3.用控件的 id 调用
    //onDoubleClicked: myButoon.slotDouble()
}

4、自定义按钮

先看下实现效果，未点击任何按钮时：

点击确定按钮时：

点击 OK 按钮时：

（1）纯代码方式，使用 color 属性来设置点击前和点击后的字体、背景和边框颜色以美化按钮，MyButton.qml 的内容如下：

import QtQuick 2.9
import QtQuick.Controls 2.4

Button {
    id: root_Button
    font.pointSize: 16 // 设置字体大小

    property color clr_font: "#ffffff"
    property color clr_backNormal: "#498ff8"
    property color clr_backPress: "#0066FF"
    property color clr_boardNormal: "#498ff8"
    property color clr_boardPress: "#0066FF"

    // 设置按钮文本
    contentItem: Text {
        id: text2
        text: root_Button.text
        font: root_Button.font
        opacity: enabled ? 1.0 : 0.3
        color: clr_font
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    // 设置按钮背景
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        color: root_Button.down ? clr_backPress : clr_backNormal
        border.color: root_Button.down ? clr_boardPress : clr_boardNormal
        border.width: 1
        radius: 6
    }
}

（2）使用三张图片资源来实现按钮的三态，ThreeIconButton.qml 的内容如下：

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Button
{
    id: root_Button
    property string nomerPic: "qrc:/image/ok.png"
    property string hoverPic: "qrc:/image/ok1.png"
    property string pressPic: "qrc:/image/ok2.png"

    style: ButtonStyle {
        background:Rectangle{
            implicitHeight: root_Button.height
            implicitWidth:  root_Button.width

            color: "transparent"  // 设置背景透明，否则会出现默认的白色背景

            BorderImage {
                anchors.fill: parent
                source: control.hovered ? (control.pressed ? pressPic : hoverPic) : nomerPic;
            }
        }
    }
}

（3）使用 Rectangle 来重写按钮，同时显示图标和下方的提示文本，以及定义了点击和释放信号槽，MyIconButton.qml 的内容如下：

import QtQuick 2.0

Rectangle {
    id: rec

    property alias img_src: icon.source
    property alias btn_txt: button.text

    property color clr_enter: "#dcdcdc"
    property color clr_exit: "#ffffff"
    property color clr_click: "#aba9b2"
    property color clr_release: "#ffffff"

    //自定义点击信号
    signal clickedLeft()
    signal clickedRight()
    signal release()

    width: 130
    height: 130
    radius: 10

    Image {
        id: icon
        width: 80
        height: 80
        source: "qrc:/camera.png"
        fillMode: Image.PreserveAspectFit
        clip: true
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.margins: 10
    }

    Text {
        id: button
        text: qsTr("button")

        anchors.top: icon.bottom
        anchors.topMargin: 5
        anchors.horizontalCenter: icon.horizontalCenter
        anchors.bottom: icon.bottom
        anchors.bottomMargin: 5

        font.bold: true
        font.pointSize: 14
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true

        //接受左键和右键输入
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            //左键点击
            if (mouse.button === Qt.LeftButton)
            {
                parent.clickedLeft()
//                console.log(button.text + " Left button click")
            }
            else if(mouse.button === Qt.RightButton)
            {
                parent.clickedRight()
            }
        }

        //按下
        onPressed: {
            color = clr_click
        }

        //释放
        onReleased: {
            color = clr_enter
            parent.release()
        }

        //指针进入
        onEntered: {
            color = clr_enter
        }

        //指针退出
        onExited: {
            color = clr_exit
        }
    }
}

（4）实际调用代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    Grid {
         columns : 3
         rows: 2
         spacing: 80
         anchors.centerIn: parent

         MyButton{
             id: btnCancle
             width: 100
             height: 50
             text: "取消"
             clr_font: "#498ff8"
             clr_backNormal: "#ffffff"
             clr_backPress: "#DEE4ED"
             clr_boardNormal: "#498ff8"
             clr_boardPress: "#498ff8"

         }

         MyButton{
             id: btnOk
             width: 100
             height: 50
             text: "确定"
         }

         ThreeIconButton {
             width: 150
             height: 60
             text: "OK"
         }

         MyIconButton {
             id: btn_camera
             img_src: "qrc:/image/camera.png";
             btn_txt: "相机"
             onClickedLeft: console.log(btn_txt + " Left button click")
         }

         MyIconButton {
             id: btn_video
             img_src: "qrc:/image/dianshiju.png";
             btn_txt: "视频"
             onClickedLeft: console.log(btn_txt + " Left Button click")
         }

         MyIconButton {
             id: btn_audio
             img_src: "qrc:/image/music.png";
             btn_txt: "音乐"
             onClickedLeft: console.log(btn_txt + " Left Button click")
         }
    }
}