QML之Button

最新推荐文章于 2025-05-27 09:46:12 发布

原创最新推荐文章于 2025-05-27 09:46:12 发布 · 1.8w 阅读

14 ·

CC 4.0 BY-SA版权

Qt 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了QML中Button控件的基本用法及其关键属性，包括如何响应点击事件、设置自动重复触发、平滑显示及高亮效果，并展示了如何设置按钮图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Button控件可以说是最常用的控件之一了，用户点击按钮可能会触发pressed,released,clicked信号，我们可以在qml文档中可以为其指定相应的信号处理器来响应用户操作。

下面让我们看下一个简单的Button定义。B

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML-Button")



    RowLayout {
        Button {
            text: "Ok"
            onClicked: console.log("OK Button clicked....")
        }

        Button {
            text: "Cancel"
            onClicked: console.log("Cancel Button clicked....")
        }
    }
}

这里我们定义了一个rowlayout来显示button，其中button只设置了基本的文本属性和clicked事件处理。

这里写图片描述

当我们点击按钮时候，会在控制台打印如下信息：

qml: OK Button clicked....
qml: Cancel Button clicked....

接下来我们一起简单了解下它常见的属性：

-> autoRepeat : bool
该属性用来控制是否在按住按钮的时候重复触发Pressed，Released和Clicked信号，默认值是false

如果我们设置为true，那么它会响应多次事件处理。

  Button {
            text: "Ok"
            autoRepeat: true
            onPressed: console.log("OK Button pressed....")
            onReleased: console.log("OK Button released....")
            onClicked: console.log("OK Button clicked....")
        }

正常点击：

qml: OK Button pressed....
qml: OK Button released....
qml: OK Button clicked....

咦，怎么和我们想的不太一样了，没有重复啊？怎么回事，看下官方文档：

This property holds whether the button repeats pressed(), released() and clicked() signals while the button is pressed and held down.

对了，是held，那我们就按一会看看：
这里写图片描述

果然一直在搞事情啊。。。。。。

-> flat : bool

该属性支持按钮是否平滑显示，如果设置为true，那么该按钮将不会显示背景，除非是按钮或者选中状态。

       Button {
            text: "Ok"
            flat: true
        }

        Button {
            text: "Ok2"
            flat: false
        }

这里写图片描述

显然，第一个按钮没有默认背景和边框的。。。符合预期，当然了，各位可别自己定义了按钮的背景样式，那样的话这个貌似你就看不出来了。。。。。

-> highlighted : bool
该属性用来设置是否高亮显示，以此来吸引用户的注意，它对键盘交互没有任何影响，默认值false

再来看看怎么设置按钮icon吧

           //display: AbstractButton.IconOnly //只显示icon
            //display: AbstractButton.TextOnly //只显示文字
           // display: AbstractButton.TextUnderIcon //文字在icon下边
            display: AbstractButton.TextBesideIcon  //文字在icon旁边
            icon.source: "images/Contacts_white_round.png" //icon路径
            icon.width:48 //宽度
            icon.height:48 //高度
            icon.color:"transparent" //颜色

这里写图片描述