先介绍一下 ExclusiveGroup。

ExclusiveGroup (互斥分组）本身是不可见元素，用于将若干个可选择元素组合在一起， 供用户选择其中的一个选项。你可以在 ExclusiveGroup 对象中定义 RadioButton、CheckBox、Action 等元素，此时不需要设置它们的 exclusiveGroup 属性；也可以定义一个只设置了 id 属性的 ExclusiveGroup 对象，在别处定义 RadioButton、CheckBox、Action 等元素时通过 id 初始化这些元素的 exclusiveGroup 属性。current 属性指向互斥分组中第一个选中的元素。

一、RadioButton

RadioButton用于多选一的场景，使用时需要通过 exclusiveGroup 属性为其指定一个分组。 它也可以和GroupBox结合使用。要使用RadioButton，需要导入Controls模块，这样： import QtQuick.Controls 1.2。

  • text 属性存储单选按钮的文本。

  • 单选按钮还有一个指示选中与否的小图标，一般显示在文本前面。给 style 属性设置自定义的 RadioButtonStyle 对象，可以定制 RadioButton 的外观。 checked 属性指示 RadioButton 是否被选中，也可以设置它来选中或取消选中。

  • hovered 是只读属性，指示鼠标是否悬停在 RadioButton 上。

  • pressed 属性在按钮被按下时为 true；当单选按钮被按下时，activeFocusOnPress 属性为 true，按钮获得焦点。

  • 如果你点击了一个单选按钮，则会触发clicked()信号。

1.1 RadioButtonStyle

RadioButtonStyle 用来定制一个 RadioButton，要使用它需要引入 QtQuick.Controls.Styles 1.x 模块。

  • background 属性定制背景，indicator 定制选中指示图标，label 定制单选按钮的文本，它们的类型都是 Component。

  • spacing 指定图标和文本之间的间隔。

  • control 指向使用 style 的 RadioButton 对象，组件内的对象可以通过 control 访问 RadioButton 的各种属性，如 focus、activeFocus、hovered 等。

下面的实例中我们会使用 RadioButtonStyle 来定制 RadioButton。

1.2 实例：选择你喜欢的手机操作系统

提供一个简单的实例，preferred_mobile_os.qml，内容如下：

  1. import QtQuick 2.2
  2. import QtQuick.Controls 1.2
  3. import QtQuick.Controls.Styles 1.2
  5. Rectangle {
  6.     width: 320;
  7.     height: 300;
  8.     color: "#d0d0d0";
  10.     Rectangle {
  11.         id: resultHolder;
  12.         color: "#a0a0a0";
  13.         width: 200;
  14.         height: 60;
  15.         anchors.centerIn: parent;
  16.         visible: false;
  17.         z: 2;
  18.         opacity: 0.8;
  19.         border.width: 2;
  20.         border.color: "#808080";
  21.         Text {
  22.             id: result;
  23.             anchors.centerIn: parent;
  24.             font.pointSize: 20;
  25.             color: "blue";
  26.             font.bold: true;
  27.         }
  28.     }
  30.     ExclusiveGroup {
  31.         id: mos;
  32.     }
  34.     Component {
  35.         id: radioStyle;
  36.         RadioButtonStyle {
  37.             indicator: Rectangle {
  38.                 implicitWidth: 16;
  39.                 implicitHeight: 12;
  40.                 radius: 6;
  41.                 border.color: control.hovered ? "darkblue" : "gray";
  42.                 border.width: 1;
  43.                 Rectangle {
  44.                     anchors.fill: parent;
  45.                     visible: control.checked;
  46.                     color: "#0000A0";
  47.                     radius: 5;
  48.                     anchors.margins: 3;
  49.                 }
  50.             }
  51.             label: Text {
  52.                 color: control.activeFocus ? "blue" : "black";
  53.                 text: control.text;
  54.             }
  55.         }
  56.     }
  58.     Text {
  59.         id: notation;
  60.         text: "Please select the best mobile os:"
  61.         anchors.top: parent.top;
  62.         anchors.topMargin: 16;
  63.         anchors.left: parent.left;
  64.         anchors.leftMargin: 8;
  65.     }
  67.     RadioButton {
  68.         id: android;
  69.         text: "Android";
  70.         exclusiveGroup: mos;
  71.         anchors.top: notation.bottom;
  72.         anchors.topMargin: 4;
  73.         anchors.left: notation.left;
  74.         anchors.leftMargin: 20;
  75.         checked: true;
  76.         focus: true;
  77.         activeFocusOnPress: true;
  78.         style: radioStyle;
  79.         onClicked: resultHolder.visible = false;
  80.     }
  81.     RadioButton {
  82.         id: ios;
  83.         text: "iOS";
  84.         exclusiveGroup: mos;
  85.         anchors.top: android.bottom;
  86.         anchors.topMargin: 4;
  87.         anchors.left: android.left;
  88.         activeFocusOnPress: true;
  89.         style: radioStyle;
  90.         onClicked: resultHolder.visible = false;
  91.     }
  92.     RadioButton {
  93.         id: wp;
  94.         text: "Windows Phone";
  95.         exclusiveGroup: mos;
  96.         anchors.top: ios.bottom;
  97.         anchors.topMargin: 4;
  98.         anchors.left: android.left;
  99.         activeFocusOnPress: true;
  100.         style: radioStyle;
  101.         onClicked: resultHolder.visible = false;
  102.     }
  103.     RadioButton {
  104.         id: firefox;
  105.         text: "Firefox OS";
  106.         exclusiveGroup: mos;
  107.         anchors.top: wp.bottom;
  108.         anchors.topMargin: 4;
  109.         anchors.left: android.left;
  110.         activeFocusOnPress: true;
  111.         style: radioStyle;
  112.         onClicked: resultHolder.visible = false;
  113.     }
  114.     RadioButton {
  115.         id: sailfish;
  116.         text: "Sailfish OS";
  117.         exclusiveGroup: mos;
  118.         anchors.top: firefox.bottom;
  119.         anchors.topMargin: 4;
  120.         anchors.left: android.left;
  121.         activeFocusOnPress: true;
  122.         style: radioStyle;
  123.         onClicked: resultHolder.visible = false;
  124.     }
  126.     Button {
  127.         id: confirm;
  128.         text: "Confirm";
  129.         anchors.top: sailfish.bottom;
  130.         anchors.topMargin: 8;
  131.         anchors.left: notation.left;
  132.         onClicked: {
  133.             result.text = mos.current.text;
  134.             resultHolder.visible = true;
  135.         }
  136.     }
  137. }

实例定义了 5 个 RadioButton，分别代表 5 个移动操作系统，这些单选按钮同属于 mos 这个 ExclusiveGroup。我使用锚布局来安排界面元素的位置。

用于显示结果的 Text 对象处于界面中央，一开始是隐藏的，当点击 “Confirm” 按钮时显示用户的选择结果。当用户点击某个 RadioButton 时触发 clicked 信号，我在 onClicked 信号处理器内隐藏显示结果的 Text 对象。

QML 文件内嵌入了一个 RadioButtonStyle 组件，将选中图标变成了椭圆形，将选中时的文字变成了蓝色。RadioButton 通过 radioStyle 这个id来引用组件。

执行 “qmlscene preferred_mobile_os.qml” 命令，效果如下图所示。

二、CheckBox

CheckBox，复选框，顾名思义，你可以在一组选项中选择一个或多个选项，这些选项之间互不影响。像 RadioButton —样，CheckBox 可以显示一个提示选中与否的小图标，以及一行简单的文本。

相比 RadioButton，CheckBox 多了两个属性：partiallyCheckedEnabled 属性指示是否允许部分选中状态，默认为 false；checkedState 记录选中状态，它的值可能是 Qt.UnChecked、 Qt.Checked 或 Qt.PartiallyChecked。

2.1 CheckBoxStyle

与 RadioButtonStyle 类似，CheckBoxStyle 用来定制 CheckBox。需要注意的是，如果你指定了 exdusiveGroup 属性，那么同属于一个互斥组的复选框， 也可以达到多选一的效果。CheckBoxStyle 的属性与 RadioButtonStyle 几乎完全一样，唯一不同的是 control 属性的类型是 CheckBox。

2.2 实例：那些你喜欢的爱情电影

一个简单的实例，preferred_movies.qml，内容如下：

  1. import QtQuick 2.2
  2. import QtQuick.Controls 1.2
  3. import QtQuick.Controls.Styles 1.2
  5. Rectangle {
  6.     width: 320;
  7.     height: 300;
  8.     color: "#d0d0d0";
  10.     Rectangle {
  11.         id: resultHolder;
  12.         color: "#a0a0a0";
  13.         width: 220;
  14.         height: 80;
  15.         anchors.centerIn: parent;
  16.         visible: false;
  17.         z: 2;
  18.         opacity: 0.8;
  19.         border.width: 2;
  20.         border.color: "#808080";
  21.         radius: 8;
  22.         Text {
  23.             id: result;
  24.             anchors.fill: parent;
  25.             anchors.margins: 5;
  26.             font.pointSize: 16;
  27.             color: "blue";
  28.             font.bold: true;
  29.             wrapMode: Text.Wrap;
  30.         }
  31.     }
  33.     Component {
  34.         id: checkStyle;
  35.         CheckBoxStyle {
  36.             indicator: Rectangle {
  37.                 implicitWidth: 14;
  38.                 implicitHeight: 14;
  39.                 border.color: control.hovered ? "darkblue" : "gray";
  40.                 border.width: 1;
  41.                 Canvas {
  42.                     anchors.fill: parent;
  43.                     anchors.margins: 3;
  44.                     visible: control.checked;
  45.                     onPaint: {
  46.                         var ctx = getContext("2d");
  47.                         ctx.save();
  48.                         ctx.strokeStyle = "#C00020";
  49.                         ctx.lineWidth = 2;
  50.                         ctx.beginPath();
  51.                         ctx.moveTo(0, 0);
  52.                         ctx.lineTo(width, height);
  53.                         ctx.moveTo(0, height);
  54.                         ctx.lineTo(width, 0);
  55.                         ctx.stroke();
  56.                         ctx.restore();
  57.                     }
  58.                 }
  59.             }
  60.             label: Text {
  61.                 color: control.checked ? "blue" : "black";
  62.                 text: control.text;
  63.             }
  64.         }
  65.     }
  67.     Text {
  68.         id: notation;
  69.         text: "Please select the best love movies:"
  70.         anchors.top: parent.top;
  71.         anchors.topMargin: 16;
  72.         anchors.left: parent.left;
  73.         anchors.leftMargin: 8;
  74.     }
  76.     Column {
  77.         id: movies;
  78.         anchors.top: notation.bottom;
  79.         anchors.topMargin: 8;
  80.         anchors.left: notation.left;
  81.         anchors.leftMargin: 20;
  82.         spacing: 8;
  83.         CheckBox {
  84.             text: "廊桥遗梦";
  85.             style: checkStyle;
  86.             onClicked: resultHolder.visible = false;
  87.         }
  88.         CheckBox {
  89.             text: "人鬼情未了";
  90.             style: checkStyle;
  91.             onClicked: resultHolder.visible = false;
  92.         }
  93.         CheckBox {
  94.             text: "触不到的恋人";
  95.             style: checkStyle;
  96.             onClicked: resultHolder.visible = false;
  97.         }
  98.         CheckBox {
  99.             text: "西雅图夜未眠";
  100.             style: checkStyle;
  101.             onClicked: resultHolder.visible = false;
  102.         }
  103.     }
  105.     Button {
  106.         id: confirm;
  107.         text: "Confirm";
  108.         anchors.top: movies.bottom;
  109.         anchors.topMargin: 8;
  110.         anchors.left: notation.left;
  111.         onClicked: {
  112.             var str = new Array();
  113.             var index = 0;
  114.             var count = movies.children.length;
  115.             for(var i = 0; i < count; i++){
  116.                 if(movies.children[i].checked){
  117.                     str[index] = movies.children[i].text;
  118.                     index++;
  119.                 }
  120.             }
  121.             if(index > 0){
  122.                 result.text = str.join();
  123.                 resultHolder.visible = true;
  124.             }
  125.         }
  126.     }
  127. }

我选择 4 部经典爱情片供用户选择，使用 Row 管理对应的 CheckBox。定义了一个 CheckBoxStyle 组件，将选中图标的选中状态变为方框内嵌红叉，将选中时的文字变成了蓝色。CheckBox 通过 checkStyle 这个 id 来引用组件。

执行 “qmlscene preferred_movies.qml” 命令，效果如下图所示。

三、GroupBox

GmupBox (分组框），用于将其他的窗口部件组合在一起显示，最常用的是将单选按钮或复选框放在分组框中显示，不过也可以将任何控件放在分组框内。使用分组框需要导入 QtQuick.Controls 1.x 模块。

  • 分组框一般在顶部有一个标题（title 属性），说明其用途。默认带有边框，不过可以设置 flat 属性为 true 来去掉左、右、底三条边的边框。

  • GroupBox 本身也支持选中，可以通过 checkable 属性来设置。当你设置 checkable 为 true 时，它的标题栏会出现一个复选框，如果你勾选了它，那么它的子控件就是可选中的，否则它的子控件就不可操作。当分组框可选时，checked 属性保存其选中状态。

  • 分组框的尺寸根据它的孩子们的尺寸计算而来。如果你想使用锚布局来管理分组框的孩子们，则需要显式指定分组框本身的尺寸。

  • contentltem 指向一个 Item 对象，代表分组框的内容区，在分组框内声明的孩子们，它们的父会被自动设置为 contentltem。而如果你动态创建分组框的孩子们，则需要显式地将 contentltem 指定为它们的父。

我们修改 4.2 节的实例，使用分组框将表示电影的 CheckBox 组合在一块。新的 QML 文档是preferred_movies_groupbox.qml，内容如下（注意，我略掉了与 4.2 节相同的部分）：

  1. Rectangle {
  2. 	...
  4.     GroupBox {
  5.         id: groupbox;
  6.         title: "请选择你最喜欢的爱情电影:";
  7.         anchors.top: parent.top;
  8.         anchors.topMargin: 8;
  9.         anchors.left: parent.left;
  10.         anchors.leftMargin: 20;
  11.         width: 280;
  12.         height: 160;
  13.         Column {
  14.             id: movies;
  15.             anchors.top: parent.top;
  16.             anchors.topMargin: 8;
  17.             spacing: 8;
  18.             CheckBox {
  19.                 text: "廊桥遗梦";
  20.                 style: checkStyle;
  21.                 onClicked: resultHolder.visible = false;
  22.             }
  23.             CheckBox {
  24.                 text: "人鬼情未了";
  25.                 style: checkStyle;
  26.                 onClicked: resultHolder.visible = false;
  27.             }
  28.             CheckBox {
  29.                 text: "触不到的恋人";
  30.                 style: checkStyle;
  31.                 onClicked: resultHolder.visible = false;
  32.             }
  33.             CheckBox {
  34.                 text: "西雅图夜未眠";
  35.                 style: checkStyle;
  36.                 onClicked: resultHolder.visible = false;
  37.             }
  38.         }
  39.     }
  41.     Button {
  42.         id: confirm;
  43.         text: "确认";
  44.         anchors.top: groupbox.bottom;
  45.         anchors.topMargin: 8;
  46.         anchors.left: parent.left;
  47.         anchors.leftMargin: 20;
  48.         onClicked: {
  49.             var str = new Array();
  50.             var index = 0;
  51.             var count = movies.children.length;
  52.             for(var i = 0; i < count; i++){
  53.                 if(movies.children[i].checked){
  54.                     str[index] = movies.children[i].text;
  55.                     index++;
  56.                 }
  57.             }
  58.             if(index > 0){
  59.                 result.text = str.join();
  60.                 resultHolder.visible = true;
  61.             }
  62.         }
  63.     }
  64. }

使用 qmlscene 加载 preferred_movies_groupbox.qml，效果如下图所示。

请对照下图和 4.2 节的图，看看使用分组框的效果与不使用分组框时的效果有何不同。

参考：

《Qt Quick核心编程》第9章

Qt Quick 常用元素：RadioButton(单选框)，CheckBox(复选框) 与 GroupBox(分组框)的更多相关文章

  1. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

  2. Qt Quick 常用元素：Textinput 与 TextEdit 文本编辑框

    一.Textinput Textinput 用于编辑一行文本,类似于 QLineEdit. font 分组属性允许你设置 Textlnput 元素所用字体的各种属性,包括字体族(family).大 小 ...

  3. Qt Quick 常用元素：ComboBox(下拉列表) 与 ProgressBar(进度条)

    一.ComboBox ComboBox,即下拉列表框,由一个列表框和一个标签控件(或编辑控件)组成.ComboBox 的下拉列表是使用 Menu 实现的,列表内的每个条目对应一个 Menultem. ...

  4. Qt Quick 常用元素：TabView(选项卡) 与 Slider(滑块)

    一.TabView TabView 可以实现类似 Windows 任务管理器的界面,有人叫 TabView 为标签控件,有人又称之为选项卡控件,我们知道它就是这么个东西就行了.现在来介绍 TabVie ...

  5. [oldboy-django][2深入django]Form组件实现生成: select下拉框, checkbox复选框，radio单选框以及如何实现自定义数据格式要求

    1 需求 - 1Form组件如何实现生成选择类标签: select,check, radio - 默认值 - 保留上次输入的值 - 2自定义验证规则 - RegexField - -

  6. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  7. 2.12 单选框和复选框（radiobox、checkbox）

    2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框    1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...

  8. Selenium2学习（十五）-- 单选框和复选框（radiobox、checkbox）

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  9. Python+Selenium自动化-定位一组元素，单选框、复选框的选中方法

    Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法   之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...

随机推荐

  1. centos 8 重启网络 systemctl restart network 失效的解决办法

    参考: https://www.tecmint.com/set-static-ip-address-in-rhel-8/ https://www.tecmint.com/configure-netwo ...

  2. QT+OpenGL（01）--实现三角形渲染

    1.openglwidget.ui <ui version="4.0"> <author/> <comment/> <exportmacr ...

  3. vue引用bootstrap3

    引用bootstrap   yarn add bootstrap@3 基于jquery,因此还需要引用2个包,jquery和popper.js, yarn add jquery popper.js - ...

  4. Winform 美化

    首先,我们先来实现主界面的扁平化 此处分为两个步骤,第一步是更改winform自带的MainForm窗体属性,第二步是添加窗体事件. 将主窗体FormBorderStyle更改为None,这样就得到了 ...

  5. 写入文件writelines 换行问题

    知识点:在python中没有数组的概念,有列表.元组.字典的概念 问题描述: 在写循环语句的时候,我需要把输出的列表存放到文件上,但是如果没有换行的话,存下的文件就是一坨的字. 所以在存入文件的时候就 ...

  6. pycharm替换文件中所有相同字段方法

    1.打开要修改的文件 2.ctrl r调出替换功能,如图所示: 3.上面红框是需要更改的部分,下面红框是想要更改为部分,编辑后,点击“replace all”即可

  7. python 父类方法中使用不同的子类中的不同类对象

    # coding:utf-8 class Animal(object): def __init__(self): self._name = None self._f = None def eat(se ...

  8. JPA笔记2 OneToMany

    package one_to_many; import java.util.HashSet; import java.util.Set; import javax.persistence.Cascad ...

  9. js javascript 如何获取某个值在数组中的下标

    js 某个值在数组中的下标javascript中知道一个数组中的一个元素的值,如何获取数组下标JS 获取数组某个元素下标 函数方法 采用prototype原型实现方式,查找元素在数组中的索引值js查找 ...

  10. 微信小程序的线程架构

    小程序的线程架构 每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻 ...