【Qt Quick】Button控件和Container容器（四）

|本文大概阅读时间5分钟。 |版权说明：原创文章，如需转载，请标明文章出处。https://blog.csdn.net/weixin_40192195/article/details/109217982

---

目录

一.前言1.Button Controls（按钮）1）Button2）CheckBox（复选框）3）RadioButton（单选按钮）4）DelayButton（延时按钮）5）RoundButton（圆形按钮）6）Switch（滑动）7）ToolButton（工具按钮） 2.Container（容器）1）Frame（框架）2）GroupBox（组合框）3）Pane（面板）4）ScrollView（滚动视图）

---

一.前言

本节介绍QML的按钮控件

1.Button Controls（按钮）

1）Button

点击按钮后会执行命令

ColumnLayout { Button { text: "Ok" onClicked: console.log("OK") } Button { text: "Cancel" onClicked: console.log("Cancel") } }

2）CheckBox（复选框）

ColumnLayout { CheckBox { checked: true text: qsTr("First") } CheckBox { text: qsTr("Second") } CheckBox { checked: true text: qsTr("Third") } }

3）RadioButton（单选按钮）

ColumnLayout { RadioButton { checked: true text: qsTr("First") } RadioButton { text: qsTr("Second") } RadioButton { text: qsTr("Third") } }

4）DelayButton（延时按钮）

DelayButton{ anchors.centerIn: parent text: "delay" delay: 2000 //延时调整出2000ms }

5）RoundButton（圆形按钮）

RoundButton { text: "ok" highlighted: true onClicked: console.log("OK") }

6）Switch（滑动）

ColumnLayout { Switch { checked: true text: qsTr("Push") } Switch { text: qsTr("PUSH") } }

7）ToolButton（工具按钮）

ToolBar { RowLayout { anchors.fill: parent ToolButton { text: qsTr("‹") onClicked: console.log("Ok") } Label { text: "Title" font.family: "ubuntu" } ToolButton { text: qsTr("⋮") onClicked: menu.open() } } Menu{ id:menu y:parent.height MenuItem{ text: "first" } MenuItem{ text: "second" } } }

---

2.Container（容器）

1）Frame（框架）

Frame { anchors.centerIn: parent ColumnLayout { anchors.fill: parent CheckBox { text: qsTr("E-mail") } CheckBox { text: qsTr("Calendar") } CheckBox { text: qsTr("Contacts") } } }

2）GroupBox（组合框）

GroupBox { anchors.centerIn: parent title: "GroupBox" ColumnLayout { anchors.fill: parent RadioButton { checked: true;text: qsTr("E-mail") } RadioButton { text: qsTr("Calendar") } RadioButton { text: qsTr("Contacts") } } }

3）Pane（面板）

Pane { anchors.centerIn: parent ColumnLayout { anchors.fill: parent RadioButton { checked: true;text: qsTr("E-mail") } RadioButton { text: qsTr("Calendar") } RadioButton { text: qsTr("Contacts") } } }

4）ScrollView（滚动视图）

ScrollView { anchors.centerIn: parent width: 200 height: 200 clip: true Label { text: "QML" font.pixelSize: 224 } }

---