Roson讲Qt#21 Quick Controls 2之CheckBox

逃离我推掉我的手 2022-09-11 01:15 167阅读 0赞

# 1.概念 #

CheckBox提供了一个选项按钮，可以打开(选中)或关闭(未选中)。复选框通常用于从一组选项中选择一个或多个选项。对于更大的选项集，比如列表中的选项，可以考虑使用CheckDelegate。  
CheckBox从AbstractButton继承其API。例如，复选框的状态可以用checked属性设置。除了checked和unchecked的状态之外，还有第三种状态:partially checked(部分选取)。partially checked可以使用属性tristate来启用。此状态表示无法确定常规的已检查/未检查状态;通常是因为其他状态会影响复选框。比如当在一个树视图中选择了几个子节点时，这种状态非常有用。

外观：

![20210910143741736.png][]

#  #

# 2.导入语句 #

import QtQuick.Controls 2.2

# 3.属性介绍 #

## 3.1 enumeration checkState ##

此属性保存复选框的复选状态，可选值如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16][]

## 3.2 bool tristate ##

此属性用于确定复选框是否为partially checked状态复选框。  
在下面的图片中，第一个复选框是partially checked状态:

![20210910144351621.png][]

此属性默认值是false，即默认情况下复选框只有两种状态。

# 4.信号 #

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

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

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

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

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

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

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

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

**信号响应**

CheckBox {
    	checked: true
    	text: qsTr("First")
    	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
    
        CheckBox {
            id: control
            text: qsTr("CheckBox")
            checked: true
    
            indicator: Rectangle {//指示器区域的背景，为1个矩形
                implicitWidth: 26   //隐式宽度
                implicitHeight: 26  //隐式高度
                x: control.leftPadding  //指示器背景的x坐标
                y: parent.height / 2 - height / 2   //指示器背景的y坐标
                radius: 3   //指示器背景四个角的弧度
                border.color: control.down ? "#17a81a" : "#21be2b"  //指示器背景边框颜色
                color: "#ffffff"    //指示器背景颜色
    
                //指示器区域-一般是一个对钩，这里定义的是一个矩形，选中时会显示一个绿色的矩形，未选中时显示空白
                Rectangle {
                    width: 14   //宽度
                    height: 14  //高度
                    x: 6    //指示器区域起点的x坐标
                    y: 6    //指示器区域起点的y坐标
                    radius: 2   //指示器区域四个角的弧度
                    color: control.down ? "#17a81a" : "#21be2b" //设置选中时和未选中时的颜色
                    visible: control.checked    //设置指示器区域仅在被选中中可见
                }
            }
    
            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  //左侧内边距
            }
        }
    
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

[20210910143741736.png]: /images/20220829/025702fae25349cfa0e405420a6f326d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b459f919fdb547559784ff9885d21279.png
[20210910144351621.png]: /images/20220829/d2754c76d00a4d27a6542834e146c1b2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/0ee5b4561d824c1699e6812a04ecbc03.png