QML之Button

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