Roson讲Qt#23 Quick Controls 2之Switch(开关按钮)

客官°小女子只卖身不卖艺 2022-08-28 15:59 203阅读 0赞

# 1.概念 #

Switch是一个开关按钮，可以拖动或打开(选中)或关闭(未选中)。开关通常用于在两种状态之间进行选择。对于更大的选项集，比如列表中的选项，可以考虑使用SwitchDelegate。  
Switch从AbstractButton继承其API。例如，可以使用checked属性设置开关的状态。

#    2.导入语句 #

import QtQuick.Controls 2.2

#    3.属性 #

## 3.1 real position\[read-only\] ##

此属性保存指示器的逻辑位置。该位置表示为指示器大小的一个分数，在0.0 - 1.0范围内。

## 3.2 real visualPosition\[read-only\] ##

此属性保存指示器的可视位置。该位置表示为指示器大小的一个分数，在0.0 - 1.0范围内。

上面两个属性都是只读的，区别不大。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

#  #

# 4.信号 #

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

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

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

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

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

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

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

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

Switch {
    
    	text: qsTr("Wi-Fi")
    	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.自定义样式 #

import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    
    ApplicationWindow {
        title: "My Application"
        width: 640
        height: 480
        visible: true
    
        ColumnLayout {
            //Switch由三个视觉项组成:背景、内容项和指示灯。
            Switch {
                id: control
                text: qsTr("Switch")
    
                indicator: Rectangle {//指示器区域的背景，为1个矩形
                    implicitWidth: 48  //隐式宽度
                    implicitHeight: 26  //隐式高度
                    x: control.leftPadding  //指示器背景的x坐标
                    y: parent.height / 2 - height / 2   //指示器背景的y坐标
                    radius: 13   //指示器背景四个角的弧度
                    color: control.checked ? "#17a81a" : "#ffffff"    //指示器背景区域在开关被打开时的填充颜色
                    border.color: control.checked ? "#17a81a" : "#cccccc"  //指示器背景区域在开关被打开时的边框颜色
    
                    //指示器区域
                    Rectangle {
                        x: control.checked ? parent.width - width : 0    //指示器区域起点的x坐标
                        width: 26   //宽度
                        height: 26  //高度
                        radius: 13   //指示器区域四个角的弧度
                        color: control.down ? "#cccccc" : "#ffffff" //设置开关被按下时的指示器的填充颜色
                        border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"    //设置开关打开时的指示器的边框颜色
                    }
                }
    
                contentItem: Text {
                    text: control.text  //文本
                    font: control.font  //文本字体
                    opacity: enabled ? 1.0 : 0.3    //文本透明度
                    color: control.down ? "#17a81a" : "#21be2b" //文本颜色
                    verticalAlignment: Text.AlignVCenter    //垂直方向对齐方式
                    leftPadding: control.indicator.width + control.spacing  //左侧内边距
                }
            }
    
            Switch {
                text: qsTr("Bluetooth")
            }
        }
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_12_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_12_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_11_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4400fe31500946ec97c6c5d2f93df668.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/670349e734294a7e86a12f8f6200f430.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/36b24fdb651445a78e51b849fb4b2bdb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_12_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/5d2410b9491146b0b1393fb0c5c4d2ed.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a553d9f48ccf469aa783aeddfb4e46e8.png