Roson讲Qt#20 Quick Controls 2之Button(按钮)

墨蓝 2022-09-11 00:27 157阅读 0赞

# 1.概念 #

**Button**：是一个可点击的控件，它可以启动一个动作，或者打开或关闭一个弹出窗口。按钮通常有一个文本标签，但它也可以包含一个图标。当弹出框或对话框需要执行操作时，按钮是一个非常合适的控件。最常见的例子是OK, Apply, Cancel, Close, Yes, No, 和Help按钮。按钮的默认外观如下：

![20210910105730600.png][]

# 2.导入语句 #

import QtQuick.Controls 2.2

# 3.属性介绍 #

## bool flat ##

此属性用于表示按钮是否为平面按钮。平面按钮通常不会绘制背景，除非它被按下或选中。默认值为false。

Button {
            text: "Push Me"
            anchors.centerIn: parent
            flat:true
        }

显示：

## ![20210910110745735.png][]  ##

## bool highlighted ##

此属性保持按钮是否高亮显示。为了吸引用户的注意力，按钮可以被高亮显示。它对键盘交互没有影响。默认值为false。

Button {
            text: "Push Me"
            anchors.centerIn: parent
            highlighted:true
        }

显示：

![20210910110923728.png][]

# 4.信号 #

当按钮被用户激活时，它会发出clicked()信号。 连接到这个信号来执行按钮的动作。 除此之外，按钮还提供如下信号：canceled()， doubleclick ()， pressed()， released()和pressAndHold()。

**void canceled()**  
当按钮在被按下时失去鼠标抓取，或者当它将发出释放信号但鼠标光标不在按钮内时，将发出此信号。

**void clicked()**  
当用户通过触摸、鼠标或键盘单击按钮时，就会发出这个信号。

**void doubleClicked()**  
当用户通过触摸或鼠标双击按钮时发出此信号。

**void pressAndHold()**  
当用户通过触摸或鼠标按下按钮**且不松开**时，就会发出这个信号。

**void pressed()**  
当用户通过触摸、鼠标或键盘按下按钮时，就会发出这个信号。

**void released()**  
当用户通过触摸、鼠标或键盘释放按钮时，就会发出这个信号。

**void toggled()**  
当用户通过触摸、鼠标或键盘切换按钮开关状态时，就会发出此信号。

**按钮信号响应**

通过在信号名前面加on来构造一个响应函数，然后在冒号后面开始写处理信号的代码。

Button {
            text: "Push Me"
            anchors.centerIn: parent
            highlighted:true
    
            onClicked: {console.log("onClicked")}
            onReleased: {console.log("onReleased")}
            onPressed: {console.log("onPressed")}
            onCanceled: {console.log("onCanceled")}
            onDoubleClicked: {console.log("onDoubleClicked")}
            onPressAndHold: {console.log("onPressAndHold")}
        }

# 5.自定义按钮样式 #

Button {
            id: control
            text: "Push Me"
            anchors.centerIn: parent
    
            //按钮由两个视觉项组成:背景项和内容项。
            contentItem: Text {
                text: control.text  //文本
                font: control.font  //字体
                opacity: enabled ? 1.0 : 0.3    //文本的透明度
                color: control.down ? "#17a81a" : "#21be2b" //文本颜色
                horizontalAlignment: Text.AlignHCenter  //水平对齐方式
                verticalAlignment: Text.AlignVCenter    //垂直对齐方式
                elide: Text.ElideRight  //设置文本的省略策略
            }
    
            background: Rectangle {
                implicitWidth: 100  //隐式宽度，在没有设置width属性时用此项来定义自然宽度
                implicitHeight: 40  //隐式高度，在没有设置height属性时用此项来定义自然高度
                opacity: enabled ? 1 : 0.3  //背景透明度
                border.color: control.down ? "#17a81a" : "#21be2b"  //边框颜色
                border.width: 1 //边框宽度
                radius: 2   //边框圆角弧度
            }
        }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16][]

[20210910105730600.png]: /images/20220829/3e541b72d2d445ee858fb42f2f684812.png
[20210910110745735.png]: /images/20220829/ce98b18f1b994f5db47b8b021a58d8e4.png
[20210910110923728.png]: /images/20220829/4aed94f865d2462c95881dabee2ecfc6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/923db192e4a54ad4939c74fb719ddd14.png