> 文章列表 > QML控件和对话框之按钮类控件

QML控件和对话框之按钮类控件

QML控件和对话框之按钮类控件

按钮类控件

  • ExclusiveGroup
  • Button
  • CheckBox
  • RadioButton
  • Switch

ExclusiveGroup

一般的按钮都包含一个exelusiveGroup属性,需要指定一个ExclusiveGroup类型的对象。ExclusiveGroup类型可以包含多个Action对象,使得这些Action能够彼此互斥。当Action被添加到ExclusiveGroup时,ExclusiveGroup对象会自动赋值给每一个Action对象的Action::exclusiveGroup属性.

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueExclusiveGroup {id: radioInputGroupAction { id: dabRadioInput; text: "DAB"; checkable: true }Action { id: fmRadioInput; text: "FM"; checkable: true }Action { id: amRadioInput; text: "AM"; checkable: true }}toolBar: ToolBar {id: mainToolBar; width: parent.widthRow {anchors.fill: parentToolButton{ action: dabRadioInput }ToolButton{ action: fmRadioInput }ToolButton{ action: amRadioInput }}}
}

ExclusiveGroup仅支持将Action对象添加为自己的子元素,所以当我们需要使用其他控件时,只能显式地将ExclusiveGroup对象赋值给这些元素各自的exclusiveGroup属性。例如上面的例子还可以使用如下代码实现。

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueExclusiveGroup {id: radioInputGroup//        Action { id: dabRadioInput; text: "DAB"; checkable: true }//        Action { id: fmRadioInput; text: "FM"; checkable: true }//        Action { id: amRadioInput; text: "AM"; checkable: true }}toolBar: ToolBar {id: mainToolBar; width: parent.widthRow {anchors.fill: parentToolButton{id: dabRadioInput ; text: "DAB";checkable: true; exclusiveGroup: radioInputGroup}ToolButton{id: fmRadioInput ; text:  "FM"checkable: true; exclusiveGroup: radioInputGroup}ToolButton{id: amRadioInput ; text: "AM"checkable: true; exclusiveGroup: radioInputGroup}}}
}

Button

Button对应着C++中的QPushButton,是QtQuick Controls中最普通的按钮。Button既可以使用Action进行初始化,也可以通过自己的属性初始化。

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueButton {x: 10; y: 10text: qsTr("按钮")}
}

Button类型有一个menu属性,可以为这个按钮添加菜单。

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueButton {id: menuBtnx: 10; y: 10 ; width:100text: qsTr("Button with Menu")menu: Menu {MenuItem { text: qsTr("Button Item1")}MenuItem { text: qsTr("Button Item2")}}}
}

与QPushButton一样,Button也提供了checkable和checked属性,可以将按钮设置为有状态的形式。Button的exclusiveGroup属性可以将几个Button对象组成一个互斥的组,当其中之一被选择时,其余会自动取消选择。

CheckBox

CheckBox对应着C++中的QCheckBox,是一个复选框。通常用于设置或取消应用程序中相对独立的选项。
CheckBox可以有选中和未选中两种状态。另外,CheckBox还可以处于一种“部分选中”的状态,也就是说,CheckBox实际是有3种状态,部分选中的状态在带有子项的选择中,比如在树状列表中尤为常见。可以通过partiallyCheckedEnabled 属性来启用部分选中状态。代码中可以设置checkedState属性值为Qt.ParitallyChecked来将CheckBox设置为部分选中。

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueCheckBox {width: 140text: qsTr("3 - state Check Box")partiallyCheckedEnabled: true}
}

RadioButton

RadioButton对应着C++中的QRadioButton,是一个单选框。通常用于表示“多个选项中的一个”这种选择,一般需要将几个RadioGroup放在一个互斥的组中使用,当其中之一被选择时,其余可以自动取消选择。

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueColumn {ExclusiveGroup { id: group}RadioButton {text: qsTr("From top")exclusiveGroup: groupchecked: true}RadioButton {text: qsTr("From cursor")exclusiveGroup: group}}
}

Switch

Swtich是从移动平台引人的一个控件,用于表示相对独立的、具有启用和禁用两种状态的情况。Switch非常类似于CheckBox或者互斥成组的RadioButton

ApplicationWindow {id: window; width: 800; height: 600;//  QQmlApplicationEngine加载的需要设置这个属性否则窗口会显示不出来visible: trueColumn {spacing: 8Switch { checked: true}Switch { checked: false}}
}