Qt Quick - Switch理论

一、概述

Switch 是一个单选按钮，其实就是叫开关控件的嘛，可以拖动或打开(选中)或关闭(未选中)。Switch 通常用于在两种状态之间进行选择。对于较大的选项集，如列表中的选项，请考虑使用SwitchDelegate。

Switch从AbstractButton继承了它的API。例如，可以用checked属性设置开关的状态。

开关是很常见也很广泛的一种操作形式，轻点一下即可完成打开和关闭的操作。现实中，开关是以使电路开路、使电流中断或使其流到其他电路的电子元件。例如，墙壁开关、电源开关。

二、使用

实现效果：

实现代码：

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    
    
    id: window
    
    width: 300
    height: 300
    
    ColumnLayout
    {
    
    
        anchors.fill: parent

 		Switch {
    
    
            text: qsTr("Wi-Fi")
            Layout.alignment: Qt.AlignHCenter
        }
	}
}

三、定制化

实现效果

实现代码

    Switch {
    
    
              id: swit
              text: qsTr("WI-Fi")

              Layout.alignment: Qt.AlignHCenter

              indicator: Rectangle {
    
    
                  implicitWidth: 48
                  implicitHeight: 26
                  x: swit.leftPadding
                  y: parent.height / 2 - height / 2
                  radius: 13
                  color: swit.checked ? "#17a81a" : "#ffffff"
                  border.color: swit.checked ? "#17a81a" : "#cccccc"

                  Rectangle {
    
    
                      x: swit.checked ? parent.width - width : 0
                      width: 26
                      height: 26
                      radius: 13
                      color: swit.down ? "#cccccc" : "#ffffff"
                      border.color: swit.checked ? (swit.down ? "#17a81a" : "#21be2b") : "#999999"
                  }
              }

              contentItem: Text {
    
    
                  text: swit.text
                  font: swit.font
                  opacity: enabled ? 1.0 : 0.3
                  color: swit.down ? "#17a81a" : "#21be2b"
                  verticalAlignment: Text.AlignVCenter
                  leftPadding: swit.indicator.width + swit.spacing
              }
          }

四、开关的设计策略

开关的组成通常是 文本 + 开关控件的形式。这个在 Qt 封装的这个控件里面也是用了这个文本，只不过是文本在右边

1、这里的开关设计有几个策略
文本的表述尽量使用肯定句，不用使用否定词的语句

例如“不把我推荐给好友”，这个句子本身就是否定句，开关控件本身也有打开和关闭两个属性，这时为了理解此开关的含义需要绕弯理解，也可能是为了误导用户，提高转化率而设置的。

深度解析：开关设计

2、文本精练，避免重复用语

例如 “打开后”或“开启后”的副行文字，开关本身的空间已经包含了”打开后”，

深度解析：开关设计

3、使用简单句型，避免条件句等复合句型

例如“响铃模式振动”“静音模式振动”，这类句型本身含有一定的条件，且与其他的操作有着密切的关系。