QML之Button

短命女 2022-06-02 09:53 397阅读 0赞

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事件处理。

![这里写图片描述][SouthEast]

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

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，那我们就按一会看看：  
![这里写图片描述][SouthEast 1]

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

\-> flat : bool

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

Button { text: "Ok" flat: true }
    
            Button { text: "Ok2" flat: false }

![这里写图片描述][SouthEast 2]

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

\-> 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" //颜色

![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220602/95a20087e534489791adb5ab8eff8029.png
[SouthEast 1]: /images/20220602/37aef3bc709b47b9822883d2452d0c81.png
[SouthEast 2]: /images/20220602/c2258ec9fad7409f991914736214eed8.png
[SouthEast 3]: /images/20220602/aae06775c9754d8aaa7731b7bbcc1044.png