├── images
    ├── logo.jpg
    ├── logo2.jpg
    └── logo3.jpg
├── assets
    └── preview.png
├── README.md
├── main.cpp
├── qml
    ├── MyDelayButton.qml
    ├── AboutDialog.qml
    ├── MyScrollView.qml
    ├── MyGroupBox.qml
    ├── MyCheckBox.qml
    ├── MyTextField.qml
    ├── MySlider.qml
    ├── MyRadioButton.qml
    ├── MyComboBox.qml
    ├── MySwipeView.qml
    ├── SettingsDialog.qml
    ├── MyRoundButton.qml
    ├── MySwitch.qml
    ├── MySeparator.qml
    ├── MyDrawer.qml
    ├── MyTumbler.qml
    ├── MyButton.qml
    ├── MyProgressBar.qml
    ├── MyToolTip.qml
    ├── MyBusyIndicator.qml
    ├── MyTabBar.qml
    ├── MyTextArea.qml
    ├── MyToolBar.qml
    ├── MyDialog.qml
    ├── MyLabel.qml
    ├── MyStackView.qml
    ├── MyMenu.qml
    └── main.qml
├── qmlexamples.pro
├── qmlexamples.qrc
└── LICENSE


/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waleon/QtQuickExamples/HEAD/images/logo.jpg


--------------------------------------------------------------------------------
/images/logo2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waleon/QtQuickExamples/HEAD/images/logo2.jpg


--------------------------------------------------------------------------------
/images/logo3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waleon/QtQuickExamples/HEAD/images/logo3.jpg


--------------------------------------------------------------------------------
/assets/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Waleon/QtQuickExamples/HEAD/assets/preview.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # QML Examples
 2 | 
 3 | Qt Quick 中的一系列控件示例
 4 | 
 5 | ![效果预览](assets/preview.png)
 6 | 
 7 | QML 相关内容见：[细说 QML](https://waleon.blog.csdn.net/category_9267924.html)
 8 | 
 9 | # 关于作者
10 | 
11 | 作者：[一去、二三里](https://waleon.blog.csdn.net/)，爱编程、爱学习、爱生活！
12 | 
13 | - [个人博客](https://waleon.blog.csdn.net/)
14 | - 个人微信：iwaleon（加我微信，邀请入 500 人微信群）
15 | - 个人 QQ：550755606
16 | - QQ 技术交流群：242790253
17 | 
18 | 更多干货，请扫码关注我的微信公众号，不要太惊喜哦~
19 | 
20 | ![微信公众号](https://raw.githubusercontent.com/Waleon/DesignPatterns/master/assets/qrcode.jpg)
21 | 


--------------------------------------------------------------------------------
/main.cpp:
--------------------------------------------------------------------------------
 1 | #include <QGuiApplication>
 2 | #include <QQmlApplicationEngine>
 3 | #include <QQuickStyle>
 4 | #include <QSettings>
 5 | #include <QQmlContext>
 6 | 
 7 | int main(int argc, char *argv[])
 8 | {
 9 |     QGuiApplication::setApplicationName("QMLExamples");
10 |     QGuiApplication::setOrganizationName("Waleon");
11 |     QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
12 | 
13 |     QGuiApplication app(argc, argv);
14 | 
15 |     QSettings settings;
16 |     QString style = settings.value("style").toString();
17 |     QQuickStyle::setStyle(style);
18 | 
19 |     QQmlApplicationEngine engine;
20 |     engine.rootContext()->setContextProperty("availableStyles", QQuickStyle::availableStyles());
21 |     engine.load(QUrl("qrc:/qml/qml/main.qml"));
22 |     if (engine.rootObjects().isEmpty())
23 |         return -1;
24 | 
25 |     return app.exec();
26 | }
27 | 


--------------------------------------------------------------------------------
/qml/MyDelayButton.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 延迟按钮
 6 | Rectangle {
 7 |     id: delayButtonWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         DelayButton {
19 |             id:delaybutton
20 |             text: "Delay Button"
21 |             delay: 2000  // 进度达到 1.0 以及触发 activated() 信号所需的时间（单位：ms）
22 | 
23 |             onActivated: {
24 |                 delayButtonWindow.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
25 |                 delaybutton.progress = 0.0  // 初始化进度为 0
26 |             }
27 |         }
28 | 
29 |         Item {
30 |             Layout.fillWidth: true
31 |         }
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/qmlexamples.pro:
--------------------------------------------------------------------------------
 1 | QT += quick quickcontrols2
 2 | CONFIG += c++11
 3 | 
 4 | # The following define makes your compiler emit warnings if you use
 5 | # any Qt feature that has been marked deprecated (the exact warnings
 6 | # depend on your compiler). Refer to the documentation for the
 7 | # deprecated API to know how to port your code away from it.
 8 | DEFINES += QT_DEPRECATED_WARNINGS
 9 | 
10 | # You can also make your code fail to compile if it uses deprecated APIs.
11 | # In order to do so, uncomment the following line.
12 | # You can also select to disable deprecated APIs only up to a certain version of Qt.
13 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
14 | 
15 | SOURCES += \
16 |         main.cpp
17 | 
18 | RESOURCES += qmlexamples.qrc
19 | 
20 | # Additional import path used to resolve QML modules in Qt Creator's code model
21 | QML_IMPORT_PATH =
22 | 
23 | # Additional import path used to resolve QML modules just for Qt Quick Designer
24 | QML_DESIGNER_IMPORT_PATH =
25 | 
26 | # Default rules for deployment.
27 | qnx: target.path = /tmp/$${TARGET}/bin
28 | else: unix:!android: target.path = /opt/$${TARGET}/bin
29 | !isEmpty(target.path): INSTALLS += target
30 | 


--------------------------------------------------------------------------------
/qml/AboutDialog.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Window 2.11
 3 | import QtQuick.Layouts 1.11
 4 | import QtQuick.Controls 2.4
 5 | 
 6 | Dialog {
 7 |     id: aboutDialog
 8 |     modal: true
 9 |     focus: true
10 |     title: "About"
11 |     width: 400
12 |     height: 240
13 |     contentHeight: aboutColumn.height
14 | 
15 |     // 内容
16 |     ColumnLayout {
17 |         id: aboutColumn
18 |         anchors.fill: parent
19 |         anchors.margins: 10
20 |         spacing: 10
21 | 
22 |         Item {
23 |             Layout.fillHeight: true
24 |         }
25 | 
26 |         Image {
27 |             Layout.alignment: Qt.AlignCenter
28 |             sourceSize.width: 80
29 |             sourceSize.height: 80
30 |             source: "qrc:/images/images/logo.jpg"
31 |         }
32 | 
33 |         Label {
34 |             Layout.alignment: Qt.AlignCenter
35 |             width: aboutDialog.availableWidth
36 |             text: "QML Examples"
37 |         }
38 | 
39 |         Label {
40 |             Layout.alignment: Qt.AlignCenter
41 |             text: "About me: <a href=\"https://waleon.blog.csdn.net\">Waleon blog</a>"
42 |             onLinkActivated: {
43 |                 Qt.openUrlExternally(link)
44 |             }
45 |         }
46 | 
47 |         Item {
48 |             Layout.fillHeight: true
49 |         }
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/qml/MyScrollView.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 滚动视图
 6 | Rectangle {
 7 |     id: scrollViewWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 滚动图片
19 |         ScrollView {
20 |             id: scrollView
21 |             Layout.preferredWidth: 200
22 |             Layout.preferredHeight: 200
23 |             // ScrollView 不会自动裁剪，若不全屏的话，需要将 clip 设置为 true
24 |             clip: true
25 | 
26 |             Image {
27 |                 id: firstPage
28 |                 sourceSize.width: scrollView.width * 1.5
29 |                 sourceSize.height: scrollView.height * 1.5
30 |                 source: "qrc:/images/images/logo.jpg"
31 |             }
32 |         }
33 | 
34 |         // 滚动列表
35 |         ScrollView {
36 |             Layout.preferredWidth: 100
37 |             Layout.preferredHeight: 200
38 | 
39 |             ListView {
40 |                 model: 20
41 |                 delegate: ItemDelegate {
42 |                     text: "Item " + index
43 |                 }
44 |             }
45 |         }
46 | 
47 |         Item {
48 |             Layout.fillWidth: true
49 |         }
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/qml/MyGroupBox.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 分组框
 6 | Rectangle {
 7 |     id: groupBoxWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 普通分组框
19 |         GroupBox {
20 |              title: qsTr("Synchronize")  // 标题
21 |              ColumnLayout {
22 |                  anchors.fill: parent
23 |                  CheckBox { text: qsTr("E-mail") }
24 |                  CheckBox { text: qsTr("Calendar") }
25 |                  CheckBox { text: qsTr("Contacts") }
26 |              }
27 |          }
28 | 
29 |         // 可选的分组框
30 |         GroupBox {
31 |             label: CheckBox {  // 标题项
32 |                 id: checkBox
33 |                 checked: true
34 |                 text: qsTr("Synchronize")
35 |             }
36 | 
37 |             ColumnLayout {
38 |                 anchors.fill: parent
39 |                 enabled: checkBox.checked
40 |                 CheckBox { text: qsTr("E-mail") }
41 |                 CheckBox { text: qsTr("Calendar") }
42 |                 CheckBox { text: qsTr("Contacts") }
43 |             }
44 |         }
45 | 
46 |         Item {
47 |             Layout.fillWidth: true
48 |         }
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/qmlexamples.qrc:
--------------------------------------------------------------------------------
 1 | <RCC>
 2 |     <qresource prefix="/qml">
 3 |         <file>qml/main.qml</file>
 4 |         <file>qml/MyLabel.qml</file>
 5 |         <file>qml/MyToolTip.qml</file>
 6 |         <file>qml/MyDrawer.qml</file>
 7 |         <file>qml/MyMenu.qml</file>
 8 |         <file>qml/MyDialog.qml</file>
 9 |         <file>qml/MySeparator.qml</file>
10 |         <file>qml/MySwipeView.qml</file>
11 |         <file>qml/MyStackView.qml</file>
12 |         <file>qml/MyScrollView.qml</file>
13 |         <file>qml/MyGroupBox.qml</file>
14 |         <file>qml/MyTabBar.qml</file>
15 |         <file>qml/MyToolBar.qml</file>
16 |         <file>qml/MySwitch.qml</file>
17 |         <file>qml/MyRoundButton.qml</file>
18 |         <file>qml/MyDelayButton.qml</file>
19 |         <file>qml/MyCheckBox.qml</file>
20 |         <file>qml/MyRadioButton.qml</file>
21 |         <file>qml/MyButton.qml</file>
22 |         <file>qml/MyBusyIndicator.qml</file>
23 |         <file>qml/MyProgressBar.qml</file>
24 |         <file>qml/MyComboBox.qml</file>
25 |         <file>qml/MySlider.qml</file>
26 |         <file>qml/MyTextField.qml</file>
27 |         <file>qml/SettingsDialog.qml</file>
28 |         <file>qml/AboutDialog.qml</file>
29 |         <file>qml/MyTextArea.qml</file>
30 |         <file>qml/MyTumbler.qml</file>
31 |     </qresource>
32 |     <qresource prefix="/images">
33 |         <file>images/logo.jpg</file>
34 |         <file>images/logo2.jpg</file>
35 |         <file>images/logo3.jpg</file>
36 |     </qresource>
37 | </RCC>
38 | 


--------------------------------------------------------------------------------
/qml/MyCheckBox.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 复选框
 6 | Rectangle {
 7 |     id: checkBoxWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 复选框
19 |         CheckBox {
20 |             text: "First"
21 |         }
22 | 
23 |         // 复选框
24 |         CheckBox {
25 |             text: "Second"
26 |             tristate: true  // 三态
27 |             onCheckStateChanged: {
28 |                 console.info("check state:" + checkState)
29 |             }
30 |         }
31 | 
32 |         // 按钮组管理
33 |         ColumnLayout {
34 |             ButtonGroup {
35 |                 id: childGroup
36 |                 exclusive: false  // 非互斥
37 |                 checkState: parentBox.checkState
38 |             }
39 | 
40 |             CheckBox {
41 |                 id: parentBox
42 |                 text: qsTr("Parent")
43 |                 checkState: childGroup.checkState
44 |             }
45 | 
46 |             CheckBox {
47 |                 checked: true
48 |                 text: qsTr("Child 1")
49 |                 leftPadding: indicator.width
50 |                 ButtonGroup.group: childGroup
51 |             }
52 | 
53 |             CheckBox {
54 |                 text: qsTr("Child 2")
55 |                 leftPadding: indicator.width
56 |                 ButtonGroup.group: childGroup
57 |             }
58 |         }
59 | 
60 |         Item {
61 |             Layout.fillWidth: true
62 |         }
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/qml/MyTextField.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 单行文本输入框（继承自 TextInput）
 6 | Rectangle {
 7 |     id: textFieldWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 占位提示
19 |         TextField {
20 |             placeholderText: qsTr("Enter name")
21 | 
22 |             // 当按下 Return/Enter 键或者文本框失去焦点时触发
23 |             onEditingFinished: {
24 |                 console.info("text field editing finished:" + text)
25 |             }
26 | 
27 |             // 每当编辑文本时触发
28 |             onTextEdited: {
29 |                 console.info("text field text edited:" + text)
30 |             }
31 |         }
32 | 
33 |         // 回显方式
34 |         TextField {
35 |             placeholderText: qsTr("Enter password")
36 |             echoMode: TextInput.Password
37 |             text: "123456"
38 |             selectByMouse: true  // 可使用鼠标选择文本
39 |         }
40 | 
41 |         // 输入掩码
42 |         TextField {
43 |             inputMask: "0000-00-00"  // 类似 2022-10-01 的日期格式
44 |             selectByMouse: true
45 |         }
46 | 
47 |         // 验证器（IntValidator、DoubleValidator、DoubleValidator 等）
48 |         TextField {
49 |             selectByMouse: true
50 |             placeholderText: qsTr("0 ~ 65535")
51 |             validator: IntValidator {
52 |                 bottom: 0
53 |                 top: 65535
54 |             }
55 |         }
56 | 
57 |         Item {
58 |             Layout.fillWidth: true
59 |         }
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/qml/MySlider.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 滑块
 6 | Rectangle {
 7 |     id: sliderWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 水平滑块
19 |         Slider {
20 |             from: 1
21 |             to: 100
22 |             value: 25
23 | 
24 |             onValueChanged: {
25 |                 console.info("slider value:" + value)
26 |             }
27 |         }
28 | 
29 |         // 步长
30 |         Slider {
31 |             from: 1
32 |             to: 100
33 |             value: 25
34 |             stepSize: 5
35 |             snapMode: Slider.SnapAlways
36 | 
37 |             onValueChanged: {
38 |                 console.info("slider value:" + value)
39 |             }
40 |         }
41 | 
42 |         // 垂直滑块
43 |         Slider {
44 |             from: 1
45 |             to: 100
46 |             value: 25
47 |             orientation: Qt.Vertical
48 |         }
49 | 
50 |         // 范围滑块
51 |         RangeSlider {
52 |             from: 1
53 |             to: 100
54 |             first.value: 25
55 |             second.value: 75
56 | 
57 |             first.onValueChanged: {
58 |                 console.info("first.value changed to:" + first.value)
59 |             }
60 | 
61 |             second.onValueChanged: {
62 |                 console.info("second.value changed to:" + second.value)
63 |             }
64 |         }
65 | 
66 |         Item {
67 |             Layout.fillWidth: true
68 |         }
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------
/qml/MyRadioButton.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 单选框
 6 | Rectangle {
 7 |     id: radioButtonWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 同一 parent 中的单选按钮，一次只能选中一个
19 |         ColumnLayout {
20 |             RadioButton {
21 |                 checked: true
22 |                 text: qsTr("First")
23 |                 onCheckedChanged: {
24 |                     console.info("first button checked:" + checked)
25 |                 }
26 |             }
27 |             RadioButton {
28 |                 text: qsTr("Second")
29 |             }
30 |             RadioButton {
31 |                 text: qsTr("Third")
32 |             }
33 |         }
34 | 
35 |         // 非同一 parent 的，需要使用 ButtonGroup 管理互斥性
36 |         ButtonGroup {
37 |             id: buttonGroup
38 |             exclusive: true  // 互斥
39 |             onCheckedButtonChanged: {
40 |                 console.info("checked button:" + checkedButton.text)
41 |             }
42 |         }
43 | 
44 |         ColumnLayout {
45 |             RadioButton {
46 |                 text: qsTr("Option 1")
47 |                 checked: true
48 |                 ButtonGroup.group: buttonGroup
49 |             }
50 |         }
51 | 
52 |         ColumnLayout {
53 |             RadioButton {
54 |                 text: qsTr("Option 2")
55 |                 ButtonGroup.group: buttonGroup
56 |             }
57 |         }
58 | 
59 |         Item {
60 |             Layout.fillWidth: true
61 |         }
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------
/qml/MyComboBox.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 下拉框
 6 | Rectangle {
 7 |     id: comboBoxWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 利用数据模型填充
19 |         ComboBox {
20 |             model: ["Apple", "Orange", "Banana"]
21 |         }
22 | 
23 |         // 可编辑的下拉框
24 |         ComboBox {
25 |             editable: true
26 |             model: ListModel {
27 |                 id: model
28 |                 ListElement { text: "Apple" }
29 |                 ListElement { text: "Orange" }
30 |                 ListElement { text: "Banana" }
31 |             }
32 |             onAccepted: {
33 |                 if (find(editText) === -1)
34 |                     model.append({text: editText})  // 追加一个
35 |             }
36 |         }
37 | 
38 |         // 下拉框模型角色
39 |         ComboBox {
40 |             id: comboBox
41 |             textRole: "name"  // 当存在多个命名角色时，需指定 textRole（利用 name 数据填充下拉框）。
42 |             model: ListModel {
43 |                 ListElement { name: "Apple"; cost: 4.00 }
44 |                 ListElement { name: "Orange"; cost: 3.25 }
45 |                 ListElement { name: "Banana"; cost: 2.45 }
46 |             }
47 |             onActivated: {
48 |                 console.info("index:" + index + ", text:" + comboBox.textAt(index))
49 |                 var item = comboBox.model.get(index)  // 获取当前下拉选项
50 |                 console.info("name:" + item.name + ", cost:" + item.cost)
51 |             }
52 |         }
53 | 
54 |         Item {
55 |             Layout.fillWidth: true
56 |         }
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/qml/MySwipeView.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 滑动视图
 6 | Rectangle {
 7 |     id: swipeViewWindow
 8 | 
 9 |     ColumnLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillHeight: true
16 |         }
17 | 
18 |         // 滑动视图（可横向滑动）
19 |         SwipeView {
20 |             id: view
21 |             Layout.alignment: Qt.AlignCenter
22 |             Layout.preferredWidth: 300
23 |             Layout.preferredHeight: 300
24 |             currentIndex: pageIndicator.currentIndex
25 |             interactive: true  // 可交互的
26 |             clip: true
27 | 
28 |             Image {
29 |                 id: firstPage
30 |                 sourceSize.width: view.width
31 |                 sourceSize.height: view.height
32 |                 source: "qrc:/images/images/logo.jpg"
33 |             }
34 |             Image {
35 |                 id: secondPage
36 |                 sourceSize.width: view.width
37 |                 sourceSize.height: view.height
38 |                 source: "qrc:/images/images/logo2.jpg"
39 |             }
40 |             Image {
41 |                 id: thirdPage
42 |                 sourceSize.width: view.width
43 |                 sourceSize.height: view.height
44 |                 source: "qrc:/images/images/logo3.jpg"
45 |             }
46 |         }
47 | 
48 |         // 页面指示器
49 |         PageIndicator {
50 |             id: pageIndicator
51 |             Layout.alignment: Qt.AlignCenter
52 |             interactive: true  // 可交互的
53 |             count: view.count
54 |             currentIndex: view.currentIndex
55 |         }
56 | 
57 |         Item {
58 |             Layout.fillHeight: true
59 |         }
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/qml/SettingsDialog.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Window 2.11
 3 | import QtQuick.Layouts 1.11
 4 | import QtQuick.Controls 2.4
 5 | import Qt.labs.settings 1.0
 6 | 
 7 | Dialog {
 8 |     Settings {
 9 |         id: settings
10 |         property string style: "Default"
11 |     }
12 | 
13 |     id: settingsDialog
14 |     modal: true
15 |     focus: true
16 |     title: "Settings"
17 |     width: 400
18 |     height: 240
19 | 
20 |     standardButtons: Dialog.Ok | Dialog.Cancel
21 | 
22 |     onAccepted: {
23 |         settings.style = styleBox.displayText
24 |         settingsDialog.close()
25 |     }
26 |     onRejected: {
27 |         styleBox.currentIndex = styleBox.styleIndex
28 |         settingsDialog.close()
29 |     }
30 | 
31 |     contentItem: ColumnLayout {
32 |         id: settingsColumn
33 |         spacing: 20
34 | 
35 |         RowLayout {
36 |             spacing: 10
37 | 
38 |             Label {
39 |                 text: "Style:"
40 |             }
41 | 
42 |             ComboBox {
43 |                 id: styleBox
44 |                 Layout.fillWidth: true
45 | 
46 |                 property int styleIndex: -1
47 |                 model: availableStyles
48 |                 Component.onCompleted: {
49 |                     styleIndex = find(settings.style, Qt.MatchFixedString)
50 |                     if (styleIndex !== -1)
51 |                         currentIndex = styleIndex
52 |                 }
53 |             }
54 |         }
55 | 
56 |         Label {
57 |             text: "Restart required"
58 |             color: "#e41e25"
59 |             opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
60 |             horizontalAlignment: Label.AlignHCenter
61 |             verticalAlignment: Label.AlignVCenter
62 |             Layout.fillWidth: true
63 |             Layout.fillHeight: true
64 |         }
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/qml/MyRoundButton.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 圆形按钮
 6 | Rectangle {
 7 |     id: roundButtonWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 图标按钮
19 |         RoundButton {
20 |             id: control
21 |             text: "\u2713"  // Unicode 字符图标（对勾）
22 | 
23 |             contentItem: Text {
24 |                 text: control.text
25 |                 font: control.font
26 |                 color: "Green"
27 |                 horizontalAlignment: Text.AlignHCenter
28 |                 verticalAlignment: Text.AlignVCenter
29 |             }
30 |         }
31 | 
32 |         // 文本按钮（自动计算圆角）
33 |         RoundButton {
34 |             Layout.preferredWidth: 120
35 |             Layout.preferredHeight: 120
36 |             text: qsTr("Round")
37 |         }
38 | 
39 |         // 文本按钮（自动计算圆角）
40 |         RoundButton {
41 |             Layout.preferredWidth: 120
42 |             Layout.preferredHeight: 40
43 |             text: qsTr("Round")
44 |         }
45 | 
46 |         // 文本按钮（手动指定圆角大小）
47 |         RoundButton {
48 |             Layout.preferredWidth: 120
49 |             Layout.preferredHeight: 40
50 |             text: qsTr("Round")
51 |             radius: 8  // 圆角大小
52 |         }
53 | 
54 |         // 文本图标按钮
55 |         RoundButton {
56 |             Layout.preferredWidth: 120
57 |             Layout.preferredHeight: 120
58 |             text: qsTr("Round")
59 |             icon.source: "qrc:/images/images/logo.jpg"  // 图标
60 |             icon.color: "transparent"
61 |             icon.width: 50
62 |             icon.height: 50
63 |             display: AbstractButton.TextUnderIcon  // 文本位于图标之下
64 |         }
65 | 
66 |         Item {
67 |             Layout.fillWidth: true
68 |         }
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------
/qml/MySwitch.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 开关按钮
 6 | Rectangle {
 7 |     id: switchWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         Switch {
19 |             text: qsTr("Wifi")
20 | 
21 |             onCheckedChanged: {
22 |                 console.info("wifi checked:" + checked)
23 |             }
24 |         }
25 | 
26 |         // 自定义样式
27 |         Switch {
28 |              id: control
29 |              text: qsTr("Bluetooth")
30 | 
31 |              indicator: Rectangle {
32 |                  implicitWidth: 48
33 |                  implicitHeight: 26
34 |                  x: control.leftPadding
35 |                  y: parent.height / 2 - height / 2
36 |                  radius: 13
37 |                  color: control.checked ? "#17a81a" : "#ffffff"
38 |                  border.color: control.checked ? "#17a81a" : "#cccccc"
39 | 
40 |                  // 圆环
41 |                  Rectangle {
42 |                      x: control.checked ? parent.width - width : 0
43 |                      width: 26
44 |                      height: 26
45 |                      radius: 13
46 |                      color: control.down ? "#cccccc" : "#ffffff"
47 |                      border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
48 |                  }
49 |              }
50 | 
51 |              // 文本
52 |              contentItem: Text {
53 |                  text: control.text
54 |                  font: control.font
55 |                  opacity: enabled ? 1.0 : 0.3
56 |                  color: control.down ? "#17a81a" : "#21be2b"
57 |                  verticalAlignment: Text.AlignVCenter
58 |                  leftPadding: control.indicator.width + control.spacing
59 |              }
60 |          }
61 | 
62 |         Item {
63 |             Layout.fillWidth: true
64 |         }
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/qml/MySeparator.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 分割器
 6 | Rectangle {
 7 |     id: separatorWindow
 8 | 
 9 |     ColumnLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillHeight: true
16 |         }
17 |         // 菜单项分割器
18 |         MenuBar {
19 |             Layout.alignment: Qt.AlignCenter
20 |             Menu {
21 |                 id: menu
22 |                 title: qsTr("File")
23 |                 MenuItem {
24 |                     text: qsTr("New...")
25 |                 }
26 |                 MenuItem {
27 |                     text: qsTr("Open...")
28 |                 }
29 |                 MenuSeparator {}
30 |                 MenuItem {
31 |                     text: qsTr("Print")
32 |                 }
33 |                 MenuSeparator {}
34 |                 MenuItem {
35 |                     text: qsTr("Exit")
36 |                 }
37 |             }
38 |         }
39 | 
40 |         // 工具栏分割器
41 |         ToolBar {
42 |             Layout.alignment: Qt.AlignCenter
43 |             RowLayout {
44 |                 anchors.fill: parent
45 |                 ToolButton {
46 |                     text: qsTr("Welcome")
47 |                 }
48 |                 ToolButton {
49 |                     text: qsTr("Edit")
50 |                 }
51 |                 ToolSeparator {
52 |                     padding: 0
53 |                     leftPadding: 10
54 |                     rightPadding: 10
55 |                     contentItem: Rectangle {
56 |                         implicitWidth: 2
57 |                         implicitHeight: 50
58 |                         color: "Blue"
59 |                     }
60 |                 }
61 |                 ToolButton {
62 |                     text: qsTr("Design")
63 |                 }
64 |                 ToolButton {
65 |                     text: qsTr("Debug")
66 |                 }
67 |             }
68 |         }
69 |         Item {
70 |             Layout.fillHeight: true
71 |         }
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/qml/MyDrawer.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Window 2.11
 3 | import QtQuick.Layouts 1.11
 4 | import QtQuick.Controls 2.4
 5 | 
 6 | // 侧滑抽屉（可以滑动打开和关闭）
 7 | Rectangle {
 8 |     id: drawWindow
 9 | 
10 |     Button {
11 |         id: button1
12 |         anchors.centerIn: parent
13 |         text: qsTr("Left drawer")
14 | 
15 |         onClicked: {
16 |             if (leftDrawer.visible) {
17 |                 leftDrawer.close()
18 |             } else {
19 |                 leftDrawer.open()
20 |             }
21 |         }
22 |     }
23 | 
24 |     Button {
25 |         anchors.top: button1.bottom
26 |         anchors.left: button1.left
27 |         anchors.topMargin: 10
28 |         text: qsTr("Right drawer")
29 | 
30 |         onClicked: {
31 |             if (rightDrawer.visible) {
32 |                 rightDrawer.close()
33 |             } else {
34 |                 rightDrawer.open()
35 |             }
36 |         }
37 |     }
38 | 
39 |     // 左侧抽屉（带导航）
40 |     Drawer {
41 |         id: leftDrawer
42 |         width: 200
43 |         height: drawWindow.height
44 |         // 非交互式的
45 |         interactive : false
46 | 
47 |         ColumnLayout {
48 |             anchors.fill: parent
49 |             ItemDelegate {
50 |                 text: qsTr("Home")
51 |                 Layout.fillWidth: true
52 |                 onClicked: {
53 |                     leftDrawer.close()
54 |                 }
55 |             }
56 |             ItemDelegate {
57 |                 text: qsTr("Settings")
58 |                 Layout.fillWidth: true
59 |             }
60 |             ItemDelegate {
61 |                 text: qsTr("About")
62 |                 Layout.fillWidth: true
63 |             }
64 |             Item {
65 |                 Layout.fillHeight: true
66 |             }
67 |         }
68 |     }
69 | 
70 |     // 右侧抽屉（带样式）
71 |     Drawer {
72 |         id: rightDrawer
73 |         width: 200
74 |         height: drawWindow.height
75 |         // 到屏幕边缘的距离（在该距离内拖动将打开抽屉）
76 |         dragMargin: 100
77 |         // 抽屉起始方向
78 |         edge: Qt.RightEdge
79 | 
80 |         background: Rectangle {
81 |             anchors.fill: parent
82 |             color: "SeaGreen"
83 |         }
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/qml/MyTumbler.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 滚轮
 6 | Rectangle {
 7 |     id: tumblerWindow
 8 | 
 9 |     function formatText(count, modelData) {
10 |         // count 为 12 时，显示 01 ~ 12； count 为 60 时，显示 00 ~ 59
11 |         var data = (count === 12 ? modelData + 1 : modelData);
12 |         return data.toString().length < 2 ? "0" + data : data;
13 |     }
14 | 
15 |     FontMetrics {
16 |         id: fontMetrics
17 |     }
18 | 
19 |     Component {
20 |         id: delegateComponent
21 | 
22 |         Label {
23 |             text: formatText(Tumbler.tumbler.count, modelData)
24 | 
25 |             // Tumbler.displacement 表示该项与当前项的距离，范围：[-visibleItemCount/2, visibleItemCount/2]。
26 |             // 求绝对值，越往两边，绝对值越大，透明度越低
27 |             opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
28 |             horizontalAlignment: Text.AlignHCenter
29 |             verticalAlignment: Text.AlignVCenter
30 |             // 当前选中项字体变大
31 |             font.pixelSize: Math.abs(Tumbler.displacement) === 0 ? fontMetrics.font.pixelSize * 1.5 : fontMetrics.font.pixelSize
32 |             color: Math.abs(Tumbler.displacement) === 0 ? "green" : "black"
33 |         }
34 |     }
35 | 
36 |     Frame {
37 |         id: frame
38 |         padding: 0
39 |         anchors.centerIn: parent
40 | 
41 |         RowLayout {
42 |             id: row
43 | 
44 |             Tumbler {
45 |                 id: hoursTumbler
46 |                 model: 12
47 |                 delegate: delegateComponent
48 |             }
49 | 
50 |             Tumbler {
51 |                 id: minutesTumbler
52 |                 model: 60
53 |                 delegate: delegateComponent
54 |             }
55 | 
56 |             Tumbler {
57 |                 id: amPmTumbler
58 |                 model: ["AM", "PM"]
59 |                 delegate: delegateComponent
60 | 
61 |                 // 索引改变后，输出选中项
62 |                 onCurrentIndexChanged: {
63 |                     var items = amPmTumbler.model
64 |                     console.info("amPm tumbler current item:" + items[currentIndex])
65 |                 }
66 |             }
67 |         }
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/qml/MyButton.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 按钮
 6 | // 比较典型的按钮有：“确定”、“应用”、“取消”、“关闭”、“是”、“否”和“帮助”。
 7 | Rectangle {
 8 |     id: buttonWindow
 9 | 
10 |     RowLayout {
11 |         anchors.fill: parent
12 |         anchors.margins: 10
13 |         spacing: 10
14 | 
15 |         Item {
16 |             Layout.fillWidth: true
17 |         }
18 | 
19 |         // 普通按钮
20 |         Button {
21 |             text: "Button"
22 |             onClicked: {
23 |                 console.info("button clicked, x:" + pressX + ", y:" + pressY)
24 |             }
25 |             onDoubleClicked: {
26 |                 console.info("button double clicked")
27 |             }
28 |         }
29 | 
30 |         // 扁平按钮（默认无背景，除非按下或选中）
31 |         Button {
32 |             text: "Flat"
33 |             flat: true
34 |         }
35 | 
36 |         // 高亮按钮
37 |         Button {
38 |             text: "Highlighted"
39 |             highlighted : true
40 |         }
41 | 
42 |         // 文本图标按钮
43 |         Button {
44 |             text: qsTr("Text")
45 |             icon.source: "qrc:/images/images/logo.jpg"
46 |             icon.color: "transparent"
47 |             icon.width: 30
48 |             icon.height: 30
49 |         }
50 | 
51 |         // 自定义按钮
52 |         Button {
53 |             id: control
54 |             text: qsTr("Custom")
55 | 
56 |             contentItem: Text {
57 |                 text: control.text
58 |                 font: control.font
59 |                 opacity: enabled ? 1.0 : 0.3
60 |                 // 正常、划过、按下颜色
61 |                 color: control.down ? Qt.rgba(0, 0, 0, 0.8) : (control.hovered ? Qt.rgba(0, 0, 0, 0.7) : Qt.rgba(0, 0, 0, 0.6))
62 |                 horizontalAlignment: Text.AlignHCenter
63 |                 verticalAlignment: Text.AlignVCenter
64 |                 elide: Text.ElideRight
65 |             }
66 | 
67 |             background: Rectangle {
68 |                 implicitWidth: 100
69 |                 implicitHeight: 40
70 |                 opacity: enabled ? 1 : 0.3
71 |                 // 正常、划过、按下颜色
72 |                 color: control.down ? "Gray" : (control.hovered ? "Silver" : "LightGrey")
73 |                 border.color: "Silver"
74 |                 border.width: 1
75 |                 radius: 2
76 |             }
77 |         }
78 | 
79 |         Item {
80 |             Layout.fillWidth: true
81 |         }
82 |     }
83 | }
84 | 


--------------------------------------------------------------------------------
/qml/MyProgressBar.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 进度条
 6 | Rectangle {
 7 |     id: progressBarWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 默认范围（0.0 ~ 1.0）
19 |         ProgressBar {
20 |             value: 0.5
21 |         }
22 | 
23 |         // 不确定模式
24 |         ProgressBar {
25 |             indeterminate: true
26 |         }
27 | 
28 |         // 自定义进度条
29 |         ProgressBar {
30 |             id: progressBar
31 |             padding: 2
32 |             from : 0  // 进度范围
33 |             to: 100
34 | 
35 |             // 背景
36 |             background: Rectangle {
37 |                 implicitWidth: 200
38 |                 implicitHeight: 16
39 |                 color: "#e6e6e6"
40 |                 radius: 8
41 |             }
42 | 
43 |             // 进度
44 |             contentItem: Item {
45 |                 implicitWidth: 200
46 |                 implicitHeight: 14
47 | 
48 |                 Rectangle {
49 |                     width: progressBar.visualPosition * parent.width
50 |                     height: parent.height
51 |                     radius: 7
52 |                     color: "#17a81a"
53 |                 }
54 |             }
55 | 
56 |             // 文本显示
57 |             Label {
58 |                 id: prograssLabel
59 |                 anchors.fill: parent
60 |                 color: "White"
61 |                 horizontalAlignment: Text.AlignHCenter
62 |                 verticalAlignment : Text.AlignVCenter
63 |                 z: 100
64 |             }
65 | 
66 |             onValueChanged: {
67 |                 prograssLabel.text = value.toString() + "%"
68 |             }
69 |         }
70 | 
71 |         // 定时器
72 |         Timer {
73 |             id: timer
74 |             interval: 100
75 |             repeat: true
76 |             onTriggered: {
77 |                 if (progressBar.value < 100) {
78 |                     progressBar.value += 1
79 |                 } else {
80 |                     stop()
81 |                 }
82 |             }
83 |         }
84 | 
85 |         // 普通按钮
86 |         Button {
87 |             text: "Start"
88 |             onClicked: {
89 |                 timer.start()
90 |             }
91 |         }
92 | 
93 |         Item {
94 |             Layout.fillWidth: true
95 |         }
96 |     }
97 | }
98 | 


--------------------------------------------------------------------------------
/qml/MyToolTip.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 提示条
 6 | Rectangle {
 7 |     id: toolTipWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillWidth: true
16 |         }
17 | 
18 |         // 显示效果1（按下显示）
19 |         Button {
20 |             text: qsTr("Press")
21 | 
22 |             ToolTip.visible: pressed  // 按下时可见
23 |             ToolTip.text: qsTr("This tool tip is shown after the button is pressed")
24 |         }
25 | 
26 |         // 显示效果2（划过后1秒再显示，共显示5秒）
27 |         Button {
28 |             text: qsTr("Hover")
29 |             hoverEnabled: true
30 | 
31 |             ToolTip.delay: 1000  // 延时 1 秒显示
32 |             ToolTip.timeout: 5000  // 显示的总时长
33 |             ToolTip.visible: hovered  // 划过时可见
34 |             ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second")
35 |         }
36 | 
37 |         // 显示效果3（包含样式风格）
38 |         Button {
39 |             id: button
40 |             text: qsTr("Style")
41 |             hoverEnabled: true
42 | 
43 |             ToolTip {
44 |                 id: styleToolTip
45 |                 visible: button.hovered
46 |                 text: qsTr("This is a tool tip with a style")
47 | 
48 |                 contentItem: Text {
49 |                     text: styleToolTip.text
50 |                     font: styleToolTip.font
51 |                     color: "White"
52 |                 }
53 | 
54 |                 background: Rectangle {
55 |                     color: "DimGray"
56 |                 }
57 |             }
58 |         }
59 | 
60 |         // 显示效果4（划过后显示长文本，可自动换行）
61 |         Label {
62 |             text: qsTr("Word wrap")
63 | 
64 |             ToolTip {
65 |                 id: toolTip
66 |                 implicitWidth: 200  // 提示条宽度
67 |                 timeout: 5000
68 |                 visible: mouseArea.containsMouse  // 鼠标划过时可见
69 |                 text: qsTr("This is a tool tip that contains long text and can wrap lines automatically")
70 | 
71 |                 contentItem: Text {
72 |                     text: toolTip.text
73 |                     font: toolTip.font
74 |                     wrapMode: Text.WordWrap  // 换行方式
75 |                 }
76 |             }
77 | 
78 |             // 鼠标区域
79 |             MouseArea {
80 |                 id: mouseArea
81 |                 anchors.fill: parent
82 |                 hoverEnabled: true
83 |             }
84 |         }
85 | 
86 |         Item {
87 |             Layout.fillWidth: true
88 |         }
89 |     }
90 | }
91 | 


--------------------------------------------------------------------------------
/qml/MyBusyIndicator.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | import QtGraphicalEffects 1.0
 5 | 
 6 | // 忙碌指示器
 7 | Rectangle {
 8 |     id: busyIndicatorWindow
 9 | 
10 |     RowLayout {
11 |         anchors.fill: parent
12 |         anchors.margins: 10
13 |         spacing: 10
14 | 
15 |         Item {
16 |             Layout.fillWidth: true
17 |         }
18 | 
19 |         BusyIndicator {
20 |             running: true
21 |         }
22 | 
23 |         BusyIndicator {
24 |             id: control
25 | 
26 |             contentItem: Item {
27 |                 implicitWidth: 64
28 |                 implicitHeight: 64
29 | 
30 |                 Item {
31 |                     id: item
32 |                     x: parent.width / 2 - 32
33 |                     y: parent.height / 2 - 32
34 |                     width: 64
35 |                     height: 64
36 |                     opacity: control.running ? 1 : 0
37 | 
38 |                     Behavior on opacity {
39 |                         OpacityAnimator {
40 |                             duration: 250
41 |                         }
42 |                     }
43 | 
44 |                     RotationAnimator {
45 |                         target: item
46 |                         running: control.visible && control.running
47 |                         from: 0
48 |                         to: 360
49 |                         loops: Animation.Infinite
50 |                         duration: 1250
51 |                     }
52 | 
53 |                     Repeater {
54 |                         id: repeater
55 |                         model: 6
56 | 
57 |                         Rectangle {
58 |                             x: item.width / 2 - width / 2
59 |                             y: item.height / 2 - height / 2
60 |                             implicitWidth: 10
61 |                             implicitHeight: 10
62 |                             radius: 5
63 |                             color: "#21be2b"
64 |                             transform: [
65 |                                 Translate {
66 |                                     y: -Math.min(item.width, item.height) * 0.5 + 5
67 |                                 },
68 |                                 Rotation {
69 |                                     angle: index / repeater.count * 360
70 |                                     origin.x: 5
71 |                                     origin.y: 5
72 |                                 }
73 |                             ]
74 |                         }
75 |                     }
76 |                 }
77 |             }
78 |         }
79 | 
80 |         Item {
81 |             Layout.fillWidth: true
82 |         }
83 |     }
84 | }
85 | 


--------------------------------------------------------------------------------
/qml/MyTabBar.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 标签栏
 6 | Rectangle {
 7 |     id: tabBarWindow
 8 | 
 9 |     RowLayout {
10 |         anchors.fill: parent
11 |         anchors.margins: 10
12 |         spacing: 10
13 | 
14 |         Item {
15 |             Layout.fillHeight: true
16 |         }
17 | 
18 |         ColumnLayout {
19 |             Layout.preferredWidth: parent.width / 2
20 |             TabBar {
21 |                 id: tabBar
22 |                 TabButton {
23 |                     text: qsTr("Home")
24 |                 }
25 |                 TabButton {
26 |                     text: qsTr("Discover")
27 |                 }
28 |                 TabButton {
29 |                     text: qsTr("Activity")
30 |                 }
31 |             }
32 | 
33 |             StackLayout {
34 |                 currentIndex: tabBar.currentIndex
35 |                 Rectangle {
36 |                     id: firstPage
37 |                     visible: false
38 |                     color: "Orange"
39 |                 }
40 |                 Rectangle {
41 |                     id: secondPage
42 |                     visible: false
43 |                     color: "Green"
44 |                 }
45 |                 Rectangle {
46 |                     id: thirdPage
47 |                     visible: false
48 |                     color: "Blue"
49 |                 }
50 |             }
51 |         }
52 | 
53 |         // Tab 支持拖动和轻弹（当按钮的总宽度超过标签栏的可用宽度时）
54 |         ColumnLayout {
55 |             Layout.preferredWidth: parent.width / 2
56 |             TabBar {
57 |                 id: tabBar2
58 |                 implicitWidth: parent.width
59 | 
60 |                 background: Rectangle {
61 |                     color: "#eeeeee"
62 |                 }
63 | 
64 |                 Repeater {
65 |                     id: repeater
66 |                     model: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"]
67 | 
68 |                     TabButton {
69 |                         text: modelData
70 |                         width: Math.max(100, tabBar2.width / repeater.count)
71 |                     }
72 |                 }
73 |             }
74 | 
75 |             StackLayout {
76 |                 currentIndex: tabBar2.currentIndex
77 | 
78 |                 Repeater {
79 |                     model: ["Orange", "Green", "Blue", "Purple", "Yellow", "Red", "Gold", "Brown", "Gray", "Black"]
80 | 
81 |                     Rectangle {
82 |                         color: modelData
83 |                     }
84 |                 }
85 |             }
86 |         }
87 | 
88 |         Item {
89 |             Layout.fillHeight: true
90 |         }
91 |     }
92 | }
93 | 


--------------------------------------------------------------------------------
/qml/MyTextArea.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.11
 2 | import QtQuick.Controls 2.4
 3 | import QtQuick.Layouts 1.11
 4 | 
 5 | // 多行文本输入框（继承自 TextEdit）
 6 | Rectangle {
 7 |     id: textAreaWindow
 8 | 
 9 |     property string longText: "One, two and three miles to go; Four or five hamlets in haze. Six, seven arbors or so; Eight, nine and ten budding sprays."
10 | 
11 |     property string richText: "<html> \
12 |                                <head> \
13 |                                <style> \
14 |                                font{color:green;} \
15 |                                </style> \
16 |                                </head> \
17 |                                <body>\
18 |                                <font>I am a Qter</font> \
19 |                                <br/> \
20 |                                <img src=\"qrc:/images/images/logo.jpg\" width=\"100\" height=\"100\"> \
21 |                                <br/> \
22 |                                See the <a href=\"https://waleon.blog.csdn.net\">Waleon blog</a> \
23 |                                </body> \
24 |                                </html>";
25 | 
26 |     RowLayout {
27 |         anchors.fill: parent
28 |         anchors.margins: 10
29 |         spacing: 10
30 | 
31 |         Item {
32 |             Layout.fillWidth: true
33 |         }
34 | 
35 |         // 占位提示
36 |         TextArea {
37 |             placeholderText: qsTr("Enter name")
38 | 
39 |             // 当按下 Return/Enter 键或者文本框失去焦点时触发
40 |             onEditingFinished: {
41 |                 console.info("text area editing finished:" + text)
42 |             }
43 | 
44 |             // 每当文本变化时触发
45 |             onTextChanged: {
46 |                 console.info("text area text changed:" + text)
47 |             }
48 |         }
49 | 
50 |         // 滚动区域
51 |         ScrollView {
52 |             Layout.preferredWidth: 150
53 |             Layout.preferredHeight: 100
54 | 
55 |             TextArea {
56 |                 text: longText
57 |             }
58 |         }
59 | 
60 |         // 自动换行
61 |         ScrollView {
62 |             Layout.preferredWidth: 150
63 |             Layout.preferredHeight: 100
64 | 
65 |             TextArea {
66 |                 text: longText
67 |                 wrapMode: TextArea.Wrap  // 换行
68 |                 selectByMouse: true
69 |                 background: Rectangle {
70 |                     border.color: "Gray"
71 |                 }
72 |             }
73 |         }
74 | 
75 |         // 文本格式（纯文本：TextEdit.PlainText， 富文本：TextEdit.PlainText）
76 |         ScrollView {
77 |             Layout.preferredWidth: 150
78 |             Layout.preferredHeight: 100
79 | 
80 |             TextArea {
81 |                 text: richText
82 |                 textFormat: TextEdit.AutoText  // 自动决定是富文本
83 |                 wrapMode: TextArea.Wrap
84 |                 selectByMouse: true
85 |                 background: Rectangle {
86 |                     border.color: "Gray"
87 |                 }
88 |             }
89 |         }
90 | 
91 |         Item {
92 |             Layout.fillWidth: true
93 |         }
94 |     }
95 | }
96 | 


--------------------------------------------------------------------------------
/qml/MyToolBar.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.11
  2 | import QtQuick.Controls 2.4
  3 | import QtQuick.Layouts 1.11
  4 | 
  5 | // 工具栏
  6 | Rectangle {
  7 |     id: toolBarWindow
  8 | 
  9 |     Button {
 10 |         id: button
 11 |         anchors.centerIn: parent
 12 |         text: qsTr("Click me")
 13 | 
 14 |         onClicked: {
 15 |             appWindow.show()
 16 |         }
 17 |     }
 18 | 
 19 |     // ToolBar 常用作 ApplicationWindow 的页眉或页脚
 20 |     ApplicationWindow {
 21 |         id: appWindow
 22 |         title: "Application Window"
 23 |         width: 600
 24 |         height: 400
 25 |         visible: false
 26 | 
 27 |         // 页眉
 28 |         header: ToolBar {
 29 |             RowLayout {
 30 |                 anchors.fill: parent
 31 |                 ToolButton {
 32 |                     text: qsTr("‹")
 33 |                 }
 34 |                 Label {
 35 |                     text: "Message (99+)"
 36 |                     elide: Label.ElideRight
 37 |                     horizontalAlignment: Qt.AlignHCenter
 38 |                     verticalAlignment: Qt.AlignVCenter
 39 |                     Layout.fillWidth: true
 40 |                 }
 41 |                 ToolButton {
 42 |                     text: qsTr("⋮")
 43 |                 }
 44 |             }
 45 |         }
 46 | 
 47 |         // 滚动列表
 48 |         ScrollView {
 49 |             anchors.fill: parent
 50 |             ListView {
 51 |                 model: 20
 52 |                 delegate: ItemDelegate {
 53 |                     text: "Item " + index
 54 |                 }
 55 |             }
 56 |         }
 57 | 
 58 |         // 页脚
 59 |         footer: ToolBar {
 60 |             RowLayout {
 61 |                 anchors.fill: parent
 62 |                 Item {
 63 |                     Layout.fillWidth: true
 64 |                 }
 65 |                 ToolButton {
 66 |                     display : AbstractButton.TextUnderIcon
 67 |                     text: qsTr("Contacts")
 68 |                     icon.source: "qrc:///images/images/logo.jpg"
 69 |                     icon.color: "transparent"
 70 |                     icon.width: 30
 71 |                     icon.height: 30
 72 |                 }
 73 |                 Item {
 74 |                     Layout.fillWidth: true
 75 |                 }
 76 |                 ToolButton {
 77 |                     display : AbstractButton.TextUnderIcon
 78 |                     text: qsTr("Discover")
 79 |                     icon.source: "qrc:/images/images/logo2.jpg"
 80 |                     icon.color: "transparent"
 81 |                     icon.width: 30
 82 |                     icon.height: 30
 83 |                 }
 84 |                 Item {
 85 |                     Layout.fillWidth: true
 86 |                 }
 87 |                 ToolButton {
 88 |                     display : AbstractButton.TextUnderIcon
 89 |                     text: qsTr("Me")
 90 |                     icon.source: "qrc:/images/images/logo3.jpg"
 91 |                     icon.color: "transparent"
 92 |                     icon.width: 30
 93 |                     icon.height: 30
 94 |                 }
 95 |                 Item {
 96 |                     Layout.fillWidth: true
 97 |                 }
 98 |             }
 99 |         }
100 |     }
101 | }
102 | 


--------------------------------------------------------------------------------
/qml/MyDialog.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.11
  2 | import QtQuick.Controls 2.4
  3 | import QtQuick.Layouts 1.11
  4 | 
  5 | // 弹出对话框
  6 | Rectangle {
  7 |     id: dialogWindow
  8 | 
  9 |     Button {
 10 |         id: informationButton
 11 |         anchors.centerIn: parent
 12 |         text: qsTr("Information")
 13 | 
 14 |         onClicked: {
 15 |             informationDialog.open()
 16 |         }
 17 |     }
 18 | 
 19 |     Button {
 20 |         id: questionButton
 21 |         anchors.top: informationButton.bottom
 22 |         anchors.left: informationButton.left
 23 |         anchors.topMargin: 10
 24 |         text: qsTr("Question")
 25 | 
 26 |         onClicked: {
 27 |             questionDialog.open()
 28 |         }
 29 |     }
 30 | 
 31 |     Button {
 32 |         id: customButton
 33 |         anchors.top: questionButton.bottom
 34 |         anchors.left: questionButton.left
 35 |         anchors.topMargin: 10
 36 |         text: qsTr("Custom")
 37 | 
 38 |         onClicked: {
 39 |             customDialog.open()
 40 |         }
 41 |     }
 42 | 
 43 |     // 消息对话框
 44 |     Dialog {
 45 |         id: informationDialog
 46 |         title: "Information"
 47 |         width: 400
 48 |         height: 200
 49 |         standardButtons: Dialog.Ok
 50 |         visible: false
 51 | 
 52 |         Label {
 53 |             text: "This is a information dialog"
 54 |         }
 55 | 
 56 |         onAccepted: console.info("Ok clicked")
 57 |     }
 58 | 
 59 |     // 询问对话框
 60 |     Dialog {
 61 |         id: questionDialog
 62 |         title: "Question"
 63 |         width: 400
 64 |         height: 200
 65 |         modal: true
 66 |         standardButtons: Dialog.Ok | Dialog.Cancel
 67 |         visible: false
 68 |         // 仅在手动关闭时才会关闭
 69 |         closePolicy: Popup.NoAutoClose
 70 | 
 71 |         Label {
 72 |             text: "Are you sure you want to exit the program?"
 73 |         }
 74 | 
 75 |         onAccepted: console.info("Ok clicked")
 76 |         onRejected: console.info("Cancel clicked")
 77 |     }
 78 | 
 79 |     // 自定义对话框
 80 |     Dialog {
 81 |         id: customDialog
 82 |         width: 400
 83 |         height: 200
 84 |         modal: true
 85 |         visible: false
 86 |         // 居中显示
 87 |         x: parent ? ((parent.width - width) / 2) : 0
 88 |         y: parent ? ((parent.height - height) / 2) : 0
 89 |         // 按 Esc 键或者点击对话框外时均可关闭
 90 |         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 91 | 
 92 |         // 页眉
 93 |         header: Label {
 94 |             text: "Hamlets in Haze"
 95 |             font.pointSize: 14
 96 |             font.bold: true
 97 |             horizontalAlignment: Text.AlignHCenter
 98 |             verticalAlignment : Text.AlignVCenter
 99 |         }
100 | 
101 |         // 内容
102 |         contentItem: RowLayout {
103 |             anchors.fill: parent
104 |             anchors.margins: 10
105 |             spacing: 10
106 | 
107 |             Item {
108 |                 Layout.fillWidth: true
109 |             }
110 |             Image {
111 |                 sourceSize.width: 80
112 |                 sourceSize.height: 80
113 |                 source: "qrc:/images/images/logo.jpg"
114 |             }
115 |             Label {
116 |                 Layout.preferredWidth: 260
117 |                 wrapMode: Text.WordWrap
118 |                 text: "One, two and three miles to go; Four or five hamlets in haze. Six, seven arbors or so; Eight, nine and ten budding sprays."
119 |             }
120 |             Item {
121 |                 Layout.fillWidth: true
122 |             }
123 |         }
124 | 
125 |         // 页脚
126 |         footer: Button {
127 |             text: "Ok"
128 |             onClicked: customDialog.accept()
129 |         }
130 |     }
131 | }
132 | 


--------------------------------------------------------------------------------
/qml/MyLabel.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.11
  2 | import QtQuick.Controls 2.4
  3 | import QtQuick.Layouts 1.11
  4 | 
  5 | // 文本、标签
  6 | Rectangle {
  7 |     id: labelWindow
  8 | 
  9 |     property string longText: "One, two and three miles to go; Four or five hamlets in haze. Six, seven arbors or so; Eight, nine and ten budding sprays."
 10 | 
 11 |     ColumnLayout {
 12 |         anchors.fill: parent
 13 |         anchors.margins: 10
 14 |         spacing: 10
 15 | 
 16 |         // 文本
 17 |         Text {
 18 |             text: qsTr("Hello World!")  // 文本
 19 |         }
 20 | 
 21 |         // 文本字体
 22 |         Text {
 23 |             text: qsTr("Hello World!")
 24 |             color: "blue"  // 颜色
 25 |             font.family: "Helvetica"  // 字体
 26 |             font.pointSize: 20  // 字体大小
 27 |             font.bold: true    // 粗体
 28 |             font.italic: true  // 斜体
 29 |             font.underline: true  // 下划线
 30 |             font.capitalization: Font.AllLowercase  // 大小写（文本自动转小写）
 31 |         }
 32 | 
 33 |         // 文本格式
 34 |         Text {
 35 |             textFormat: Text.RichText  // HTML 富文本
 36 |             text: "<b>Hello</b> <i>World!</i>"
 37 |         }
 38 | 
 39 |         Text {
 40 |             textFormat: Text.PlainText  // 纯文本
 41 |             text: "<b>Hello</b> <i>World!</i>"
 42 |         }
 43 | 
 44 |         // 文本截断（换行，超出部分会被截断）
 45 |         Text {
 46 |             Layout.preferredWidth: 150
 47 |             clip: true
 48 |             text: longText
 49 |         }
 50 | 
 51 |         // 文本省略（不换行，超出部分显示为省略号）
 52 |         Text {
 53 |             Layout.preferredWidth: 150
 54 |             elide: Text.ElideRight
 55 |             text: longText
 56 |         }
 57 | 
 58 |         // 文本换行（自动换行）
 59 |         Text {
 60 |             Layout.preferredWidth: 150
 61 |             wrapMode: Text.WordWrap
 62 |             text: longText
 63 |         }
 64 | 
 65 |         // 文本样式
 66 |         RowLayout {
 67 |             spacing: 10
 68 |             Text { font.pointSize: 20; text: "Normal" }
 69 |             Text { font.pointSize: 20; text: "Raised"; style: Text.Raised; styleColor: "#AAAAAA" }
 70 |             Text { font.pointSize: 20; text: "Outline"; style: Text.Outline; styleColor: "red" }
 71 |             Text { font.pointSize: 20; text: "Sunken"; style: Text.Sunken; styleColor: "#AAAAAA" }
 72 |         }
 73 | 
 74 |         // 超链接
 75 |         Text {
 76 |             linkColor: "green"  // 超链接颜色
 77 |             text: "See the <a href=\"https://waleon.blog.csdn.net\">Waleon blog</a>."
 78 |             onLinkHovered: console.info(link + " link hovered")
 79 |             onLinkActivated: {
 80 |                 Qt.openUrlExternally(link)
 81 |                 console.info(link + " link activated")
 82 |             }
 83 |         }
 84 | 
 85 |         // 显示图片
 86 |         Text {
 87 |             text: "<img src=\"qrc:/images/images/logo.jpg\" width=\"200\" height=\"200\">"
 88 |         }
 89 | 
 90 |         // 标签（继承自 Text）
 91 |         Label {
 92 |             text: qsTr("Label")
 93 |         }
 94 | 
 95 |         // 标签（包含样式风格）
 96 |         Label {
 97 |             text: qsTr("Style Label")
 98 |             color: "White"
 99 | 
100 |             background: Rectangle {
101 |                 color: "SteelBlue"
102 |             }
103 |         }
104 | 
105 |         // 标签（圆形背景）
106 |         Label {
107 |             Layout.preferredWidth: 100
108 |             Layout.preferredHeight: 100
109 |             horizontalAlignment: Text.AlignHCenter
110 |             verticalAlignment : Text.AlignVCenter
111 |             text: qsTr("Round Label")
112 |             color: "White"
113 | 
114 |             background: Rectangle {
115 |                 color: "MediumSlateBlue"
116 |                 radius: 50
117 |             }
118 |         }
119 | 
120 |         Item {
121 |             Layout.fillHeight: true
122 |         }
123 |     }
124 | }
125 | 


--------------------------------------------------------------------------------
/qml/MyStackView.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.11
  2 | import QtQuick.Controls 2.4
  3 | import QtQuick.Layouts 1.11
  4 | 
  5 | // 堆叠视图
  6 | 
  7 | /**
  8 |     给定 stack 为 [A, B, C]：
  9 |     - push([D, E, F]) => [A, B, C, D, E, F]  “push” C 和 F 之间的过渡动画
 10 |     - replace([D, E, F]) => [A, B, D, E, F]  “replace” C 和 F 之间的过渡动画
 11 |     - clear() 后紧接着 push([D, E, F]) => [D, E, F]  当 stack 为空时，push 时没有过渡动画。
 12 | **/
 13 | Rectangle {
 14 |     id: stackViewWindow
 15 | 
 16 |     ColumnLayout {
 17 |         anchors.fill: parent
 18 |         anchors.margins: 10
 19 |         spacing: 10
 20 | 
 21 |         Item {
 22 |             Layout.fillHeight: true
 23 |         }
 24 | 
 25 |         // 滑动视图（可横向滑动）
 26 |         StackView {
 27 |             id: stackView
 28 |             Layout.alignment: Qt.AlignCenter
 29 |             Layout.preferredWidth: 300
 30 |             Layout.preferredHeight: 300
 31 |             initialItem: firstPage  // 默认初始项
 32 | 
 33 |             // 动画可以通过 pushEnter/pushExit、popEnter/popExit、replaceEnter/replaceExit 属性控制
 34 | //            pushEnter: Transition {
 35 | //                PropertyAnimation {
 36 | //                    property: "opacity"
 37 | //                    from: 0
 38 | //                    to:1
 39 | //                    duration: 200
 40 | //                }
 41 | //            }
 42 | //            pushExit: Transition {
 43 | //                PropertyAnimation {
 44 | //                    property: "opacity"
 45 | //                    from: 1
 46 | //                    to:0
 47 | //                    duration: 200
 48 | //                }
 49 | //            }
 50 | //            popEnter: Transition {
 51 | //                PropertyAnimation {
 52 | //                    property: "opacity"
 53 | //                    from: 0
 54 | //                    to:1
 55 | //                    duration: 200
 56 | //                }
 57 | //            }
 58 | //            popExit: Transition {
 59 | //                PropertyAnimation {
 60 | //                    property: "opacity"
 61 | //                    from: 1
 62 | //                    to:0
 63 | //                    duration: 200
 64 | //                }
 65 | //            }
 66 |         }
 67 | 
 68 |         Rectangle {
 69 |             id: firstPage
 70 |             visible: false
 71 |             color: "Orange"
 72 |         }
 73 |         Rectangle {
 74 |             id: secondPage
 75 |             visible: false
 76 |             color: "Green"
 77 |         }
 78 |         Rectangle {
 79 |             id: thirdPage
 80 |             visible: false
 81 |             color: "Blue"
 82 |         }
 83 |         Rectangle {
 84 |             id: fourthPage
 85 |             visible: false
 86 |             color: "Purple"
 87 |         }
 88 | 
 89 |         RowLayout {
 90 |             Layout.alignment: Qt.AlignCenter
 91 |             spacing: 10
 92 | 
 93 |             // push 将页面添加到顶部（类似于“前进”）
 94 |             Button {
 95 |                 text: "Push"
 96 |                 onClicked: {
 97 |                     var item = stackView.currentItem
 98 |                     if (item === firstPage) {
 99 |                         stackView.push(secondPage)
100 |                     } else if (item === secondPage) {
101 |                         stackView.push(thirdPage)
102 |                     } else if (item === thirdPage) {
103 |                         stackView.push(fourthPage)
104 |                     }
105 |                     // 输出深度
106 |                     console.info("[Push] stack view depth:" + stackView.depth)
107 |                 }
108 |             }
109 | 
110 |             // pop 删除顶部页面（类似于“返回”）
111 |             Button {
112 |                 text: "Pop"
113 |                 onClicked: {
114 |                     stackView.pop()
115 |                     console.info("[Pop] stack view depth:" + stackView.depth)
116 |                 }
117 |             }
118 | 
119 |             // 展开至指定项
120 |             Button {
121 |                 text: "Unwind"
122 |                 onClicked: {
123 |                     // 直接跳转至第二页，若要跳转至第一页，可使用 pop(null)
124 |                     stackView.pop(secondPage)
125 |                     console.info("[Unwind] stack view depth:" + stackView.depth)
126 |                 }
127 |             }
128 | 
129 |             // 替换页面
130 |             Button {
131 |                 text: "Replace"
132 |                 onClicked: {
133 |                     // 将当前页替换为第四页
134 |                     var item = stackView.currentItem
135 |                     if (item !== fourthPage)
136 |                         stackView.replace(item, fourthPage)
137 |                     console.info("[Replace] stack view depth:" + stackView.depth)
138 |                 }
139 |             }
140 |         }
141 | 
142 |         Item {
143 |             Layout.fillHeight: true
144 |         }
145 |     }
146 | }
147 | 


--------------------------------------------------------------------------------
/qml/MyMenu.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.11
  2 | import QtQuick.Controls 2.4
  3 | import QtQuick.Layouts 1.11
  4 | 
  5 | // 菜单
  6 | Rectangle {
  7 |     id: menuWindow
  8 | 
  9 |     property int selectStart
 10 |     property int selectEnd
 11 |     property int curPos
 12 | 
 13 |     property var recentFiles: ["123", "456"]
 14 | 
 15 |     RowLayout {
 16 |         anchors.fill: parent
 17 |         anchors.margins: 10
 18 |         spacing: 10
 19 | 
 20 |         Item {
 21 |             Layout.fillWidth: true
 22 |         }
 23 | 
 24 |         // 上下文菜单（例如：右键单击后显示），推荐使用 popup()
 25 |         TextField {
 26 |             id: textField
 27 |             placeholderText : qsTr("Context menu")
 28 |             selectByMouse: true
 29 | 
 30 |             MouseArea {
 31 |                 anchors.fill: parent
 32 |                 hoverEnabled: true
 33 |                 acceptedButtons: Qt.RightButton
 34 |                 onClicked: {
 35 |                     selectStart = textField.selectionStart;
 36 |                     selectEnd = textField.selectionEnd;
 37 |                     curPos = textField.cursorPosition;
 38 |                     contextMenu.x = mouse.x;
 39 |                     contextMenu.y = mouse.y;
 40 |                     contextMenu.popup();
 41 |                     textField.cursorPosition = curPos;
 42 |                     textField.select(selectStart,selectEnd);
 43 |                 }
 44 | 
 45 |                 Menu {
 46 |                     id: contextMenu
 47 |                     MenuItem {
 48 |                         text: qsTr("Cu&t")
 49 |                         onTriggered: {
 50 |                             textField.cut()
 51 |                         }
 52 |                     }
 53 |                     MenuItem {
 54 |                         text: qsTr("&Copy")
 55 |                         onTriggered: {
 56 |                             textField.copy()
 57 |                         }
 58 |                     }
 59 |                     MenuItem {
 60 |                         text: qsTr("&Paste")
 61 |                         onTriggered: {
 62 |                             textField.paste()
 63 |                         }
 64 |                     }
 65 |                 }
 66 |             }
 67 |         }
 68 | 
 69 |         // 弹出菜单（例如：单击按钮后显示）
 70 |         Button {
 71 |             id: fileButton
 72 |             text: "File"
 73 |             onClicked: fileMenu.open()
 74 | 
 75 |             Menu {
 76 |                 id: fileMenu
 77 |                 y: fileButton.height
 78 | 
 79 |                 MenuItem {
 80 |                     text: qsTr("&New...")
 81 |                 }
 82 |                 MenuItem {
 83 |                     text: qsTr("&Open...")
 84 |                 }
 85 |                 MenuItem {
 86 |                     text: qsTr("&Save")
 87 |                 }
 88 |             }
 89 |         }
 90 | 
 91 |         // 级联菜单
 92 |         MenuBar {
 93 |             Menu {
 94 |                 title : "Edit"
 95 | 
 96 |                 Action { text: "Undo" }
 97 |                 Action { text: "Redo" }
 98 | 
 99 |                 MenuSeparator { }
100 | 
101 |                 Menu {
102 |                     title: "Find/Replace"
103 |                     Action { text: "Find Next" }
104 |                     Action { text: "Find Previous" }
105 |                     Action { text: "Replace" }
106 |                 }
107 |             }
108 |             // 动态添加、插入、移动、删除菜单项
109 |             Menu {
110 |                 title: qsTr("Tool")
111 |                 Action {
112 |                     text: "Add"
113 |                     onTriggered: helpMenu.addEntry("Add" + helpMenu.count)
114 |                 }
115 |                 Action {
116 |                     text: "Insert"
117 |                     onTriggered: helpMenu.insertEntry(0, "Insert" + helpMenu.count)
118 |                 }
119 |                 Action {
120 |                     text: "Move"
121 |                     onTriggered: helpMenu.moveItem(0, 1)
122 |                 }
123 |                 Action {
124 |                     text: "Remove"
125 |                     onTriggered: helpMenu.removeEntry(0)
126 |                 }
127 |             }
128 |             Menu {
129 |                 id: helpMenu
130 |                 title: qsTr("Help")
131 |                 Action {
132 |                     id: aboutAction
133 |                     text: "About"
134 |                 }
135 | 
136 |                 function addEntry(title) {
137 |                     helpMenu.addItem(menuItem.createObject(helpMenu, { text: title }))
138 |                 }
139 | 
140 |                 function insertEntry(index, title) {
141 |                     helpMenu.insertItem(index, menuItem.createObject(helpMenu, { text: title }))
142 |                 }
143 | 
144 |                 function removeEntry(index) {
145 |                     if (index < helpMenu.count) {
146 |                         var item = helpMenu.itemAt(index)
147 |                         helpMenu.removeItem(item)
148 |                     }
149 |                 }
150 | 
151 |                 Component {
152 |                     id: menuItem
153 |                     MenuItem {
154 | 
155 |                     }
156 |                 }
157 |             }
158 |         }
159 | 
160 |         Item {
161 |             Layout.fillWidth: true
162 |         }
163 |     }
164 | }
165 | 


--------------------------------------------------------------------------------
/qml/main.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.11
  2 | import QtQuick.Window 2.11
  3 | import QtQuick.Layouts 1.11
  4 | import QtQuick.Controls 2.4
  5 | 
  6 | // Qt Quick Controls 2 中的一系列控件示例
  7 | ApplicationWindow  {
  8 |     id: rootWindow
  9 |     title: "QML Examples"
 10 |     width: 800
 11 |     height: 600
 12 |     visible: true
 13 | 
 14 |     // 页眉
 15 |     header: ToolBar {
 16 |         RowLayout {
 17 |             spacing: 20
 18 |             anchors.fill: parent
 19 | 
 20 |             ToolButton {
 21 |                 icon.name: "back"
 22 |                 onClicked: {
 23 |                     if (stackView.depth > 1) {
 24 |                         stackView.pop()
 25 |                         listView.currentIndex = -1
 26 |                     }
 27 |                 }
 28 |             }
 29 | 
 30 |             Label {
 31 |                 id: titleLabel
 32 |                 text: listView.currentItem ? listView.currentItem.text : ""
 33 |                 font.pixelSize: 20
 34 |                 elide: Label.ElideRight
 35 |                 horizontalAlignment: Qt.AlignHCenter
 36 |                 verticalAlignment: Qt.AlignVCenter
 37 |                 Layout.fillWidth: true
 38 |             }
 39 | 
 40 |             ToolButton {
 41 |                 text: "menu"
 42 |                 onClicked: optionsMenu.open()
 43 | 
 44 |                 Menu {
 45 |                     id: optionsMenu
 46 |                     x: parent.width - width
 47 |                     transformOrigin: Menu.TopRight
 48 | 
 49 |                     MenuItem {
 50 |                         text: "Settings"
 51 |                         onTriggered: settingsDialog.open()
 52 |                     }
 53 |                     MenuItem {
 54 |                         text: "About"
 55 |                         onTriggered: aboutDialog.open()
 56 |                     }
 57 |                 }
 58 |             }
 59 |         }
 60 |     }
 61 | 
 62 |     SettingsDialog {
 63 |         id: settingsDialog
 64 |         x: parent ? ((parent.width - width) / 2) : 0
 65 |         y: parent ? ((parent.height - height) / 2) : 0
 66 |     }
 67 | 
 68 |     AboutDialog {
 69 |         id: aboutDialog
 70 |         x: parent ? ((parent.width - width) / 2) : 0
 71 |         y: parent ? ((parent.height - height) / 2) : 0
 72 |     }
 73 | 
 74 |     RowLayout {
 75 |         anchors.fill: parent
 76 | 
 77 |         ListView {
 78 |             id: listView
 79 |             Layout.preferredWidth: 150
 80 |             Layout.fillHeight: true
 81 |             focus: true
 82 |             currentIndex: -1
 83 | 
 84 |             model: ListModel {
 85 |                 ListElement { title: "Label"; source: "qrc:/qml/qml/MyLabel.qml" }
 86 |                 // 按钮
 87 |                 ListElement { title: "Button"; source: "qrc:/qml/qml/MyButton.qml" }
 88 |                 ListElement { title: "RoundButton"; source: "qrc:/qml/qml/MyRoundButton.qml" }
 89 |                 ListElement { title: "CheckBox"; source: "qrc:/qml/qml/MyCheckBox.qml" }
 90 |                 ListElement { title: "RadioButton"; source: "qrc:/qml/qml/MyRadioButton.qml" }
 91 |                 ListElement { title: "Switch"; source: "qrc:/qml/qml/MySwitch.qml" }
 92 |                 ListElement { title: "DelayButton"; source: "qrc:/qml/qml/MyDelayButton.qml" }
 93 |                 // 弹出控件
 94 |                 ListElement { title: "ToolTip"; source: "qrc:/qml/qml/MyToolTip.qml" }
 95 |                 ListElement { title: "Drawer"; source: "qrc:/qml/qml/MyDrawer.qml" }
 96 |                 ListElement { title: "Menu"; source: "qrc:/qml/qml/MyMenu.qml" }
 97 |                 ListElement { title: "Dialog"; source: "qrc:/qml/qml/MyDialog.qml" }
 98 |                 // 分割器
 99 |                 ListElement { title: "Separator"; source: "qrc:/qml/qml/MySeparator.qml" }
100 |                 // 导航控件
101 |                 ListElement { title: "SwipeView"; source: "qrc:/qml/qml/MySwipeView.qml" }
102 |                 ListElement { title: "StackView"; source: "qrc:/qml/qml/MyStackView.qml" }
103 |                 // 容器
104 |                 ListElement { title: "ScrollView"; source: "qrc:/qml/qml/MyScrollView.qml" }
105 |                 ListElement { title: "GroupBox"; source: "qrc:/qml/qml/MyGroupBox.qml" }
106 |                 ListElement { title: "TabBar"; source: "qrc:/qml/qml/MyTabBar.qml" }
107 |                 ListElement { title: "ToolBar"; source: "qrc:/qml/qml/MyToolBar.qml" }
108 |                 // 指示器
109 |                 ListElement { title: "BusyIndicator"; source: "qrc:/qml/qml/MyBusyIndicator.qml" }
110 |                 ListElement { title: "ProgressBar"; source: "qrc:/qml/qml/MyProgressBar.qml" }
111 |                 // 输入控件
112 |                 ListElement { title: "ComboBox"; source: "qrc:/qml/qml/MyComboBox.qml" }
113 |                 ListElement { title: "Slider"; source: "qrc:/qml/qml/MySlider.qml" }
114 |                 ListElement { title: "TextField"; source: "qrc:/qml/qml/MyTextField.qml" }
115 |                 ListElement { title: "TextArea"; source: "qrc:/qml/qml/MyTextArea.qml" }
116 |                 ListElement { title: "Tumbler"; source: "qrc:/qml/qml/MyTumbler.qml" }
117 |             }
118 | 
119 |             delegate: ItemDelegate {
120 |                 width: parent.width
121 |                 text: model.title
122 |                 highlighted: ListView.isCurrentItem
123 |                 onClicked: {
124 |                     listView.currentIndex = index
125 |                 }
126 |             }
127 | 
128 |             onCurrentIndexChanged: {
129 |                 var item = model.get(currentIndex)
130 |                 if (item)
131 |                     stackView.push(item.source)
132 |             }
133 | 
134 |             ScrollIndicator.vertical: ScrollIndicator { }
135 |         }
136 | 
137 |         StackView {
138 |             id: stackView
139 |             Layout.fillWidth: true
140 |             Layout.fillHeight: true
141 |         }
142 | 
143 |         // 在实例化后触发
144 |         Component.onCompleted: {
145 |             listView.currentIndex = 0
146 |         }
147 |     }
148 | }
149 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 |   The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works.  By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users.  We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors.  You can apply it to
 20 | your programs, too.
 21 | 
 22 |   When we speak of free software, we are referring to freedom, not
 23 | price.  Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 |   To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights.  Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 |   For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received.  You must make sure that they, too, receive
 37 | or can get the source code.  And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 |   Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 |   For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software.  For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 |   Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so.  This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software.  The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable.  Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products.  If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 |   Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary.  To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 |   The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 |   0. Definitions.
 74 | 
 75 |   "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 |   "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 |   "The Program" refers to any copyrightable work licensed under this
 81 | License.  Each licensee is addressed as "you".  "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 |   To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy.  The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 |   A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 |   To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy.  Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 |   To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies.  Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 |   An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License.  If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 |   1. Source Code.
113 | 
114 |   The "source code" for a work means the preferred form of the work
115 | for making modifications to it.  "Object code" means any non-source
116 | form of a work.
117 | 
118 |   A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 |   The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form.  A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 |   The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities.  However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work.  For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 |   The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 |   The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 |   2. Basic Permissions.
155 | 
156 |   All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met.  This License explicitly affirms your unlimited
159 | permission to run the unmodified Program.  The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work.  This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 |   You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force.  You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright.  Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 |   Conveying under any other circumstances is permitted solely under
176 | the conditions stated below.  Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 |   No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 |   When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 |   4. Conveying Verbatim Copies.
196 | 
197 |   You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 |   You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 |   5. Conveying Modified Source Versions.
209 | 
210 |   You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 |   A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit.  Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 |   6. Conveying Non-Source Forms.
246 | 
247 |   You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 |   A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 |   A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling.  In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage.  For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product.  A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 |   "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source.  The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 |   If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information.  But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 |   The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed.  Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 |   Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 |   7. Additional Terms.
344 | 
345 |   "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law.  If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 |   When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it.  (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.)  You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 |   Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 |   All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10.  If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term.  If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 |   If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 |   Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 |   8. Termination.
408 | 
409 |   You may not propagate or modify a covered work except as expressly
410 | provided under this License.  Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 |   However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 |   Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 |   Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License.  If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 |   9. Acceptance Not Required for Having Copies.
436 | 
437 |   You are not required to accept this License in order to receive or
438 | run a copy of the Program.  Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance.  However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work.  These actions infringe copyright if you do
443 | not accept this License.  Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 |   10. Automatic Licensing of Downstream Recipients.
447 | 
448 |   Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License.  You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 |   An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations.  If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 |   You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License.  For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 |   11. Patents.
472 | 
473 |   A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based.  The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 |   A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version.  For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 |   In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement).  To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 |   If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients.  "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 |   If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 |   A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License.  You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 |   Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 |   12. No Surrender of Others' Freedom.
541 | 
542 |   If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License.  If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all.  For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 |   13. Use with the GNU Affero General Public License.
553 | 
554 |   Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work.  The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 |   14. Revised Versions of this License.
564 | 
565 |   The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time.  Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 |   Each version is given a distinguishing version number.  If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation.  If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 |   If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 |   Later license versions may give you additional or different
585 | permissions.  However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 |   15. Disclaimer of Warranty.
590 | 
591 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 |   16. Limitation of Liability.
601 | 
602 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 |   17. Interpretation of Sections 15 and 16.
613 | 
614 |   If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 |   If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 |   To do so, attach the following notices to the program.  It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     <one line to give the program's name and a brief idea of what it does.>
635 |     Copyright (C) <year>  <name of author>
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 |   If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     <program>  Copyright (C) <year>  <name of author>
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License.  Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 |   You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <https://www.gnu.org/licenses/>.
668 | 
669 |   The GNU General Public License does not permit incorporating your program
670 | into proprietary programs.  If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library.  If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License.  But first, please read
674 | <https://www.gnu.org/licenses/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------