Qt： Qt Quick快速入门

今天药忘吃喽~ 2023-01-12 11:40 479阅读 0赞

基于报警应用程序的Qt快速教程。

本教程显示如何开发一个简单的报警应用程序，作为Qt Quick 和 Qt Quick Controls2的介绍。

此应用程序类似于通常在 Android 手机上找到的报警应用程序。其功能允许您输入、编辑或删除警报。闹钟可以在给定日期触发，并且可以将其设置为在随后的一系列日期重复。

主屏幕显示已保存的警报列表：

!["Alarms application"][Alarms application]

详细信息屏幕允许您编辑或删除现有闹钟：

!["Detail screen"][Detail screen]

对话屏幕用于添加新的闹钟。当您单击主屏幕底部的"+"[圆按钮][Link 1]时，它会弹出：

!["Add alarms"][Add alarms]

源文件位于 qtdoc 存储库中。您可以从Qt项目获取Qt源，也可以将其作为Qt的一部分安装。该应用程序也可在 Qt Creator的欢迎模式示例列表中找到。

# 创建警报项目 #

本节显示如何在 Qt 创建者中创建项目。它讨论了由 Qt Creator自动生成的文件，以及程序员必须在  Qt Creator或其他编辑器中创建的两个文件。后两个文件包含在此教程的源代码中。

## Qt Creator ##

在 Qt Creator中设置新项目由向导帮助帮助，该向导会指导您逐步完成项目创建过程。向导提示您输入该特定类型的项目所需设置，并为你创建项目

要创建报警项目，请选择 **File** > **New File or Project** > **Application** > **Qt Quick Application - Empty** > **Choose。**在**名称**字段中键入"alarms"，并按照向导的说明操作。

!["Qt Creator New File or Project dialog"][Qt Creator New File or Project dialog]

!["Project Location"][Project Location]

Qt 快速应用程序向导创建包含以下源文件的项目：

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;"><span style="color:#404244;">源文件</span></th> 
   <th style="text-align:center;"><span style="color:#404244;">目的</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><span style="color:#404244;">alarms.pro</span></td> 
   <td style="border-color:#eeeeee;text-align:inherit;"><span style="color:#404244;">项目文件</span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;">main.cpp</td> 
   <td style="border-color:#eeeeee;text-align:inherit;"><span style="color:#404244;">申请的主要C++代码文件。</span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;">qml.qrc</td> 
   <td style="border-color:#eeeeee;text-align:inherit;"><span style="color:#404244;">资源文件包含源文件的名称，main.cpp和项目文件除外。</span></td> 
  </tr> 
 </tbody> 
</table>

向导生成的main.cpp如下，此代码块支持高DPI扩展并声明应用程序（app）和引擎（engine）。然后引擎加载主QML文件。

int main(int argc, char *argv[])
    {
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }

## 其他源文件 ##

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">源文件</th> 
   <th style="text-align:center;">目的</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><code>qtquickcontrols2.conf</code></td> 
   <td style="border-color:#eeeeee;text-align:inherit;">选择具有深色主题的材质样式。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><code>main.qml</code></td> 
   <td style="border-color:#eeeeee;text-align:inherit;">链接AlarmDialog.qml, AlarmModel.qml, AlarmDelegate.qml , TumblerDelegate.qml</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><code>AlarmDialog.qml</code></td> 
   <td style="border-color:#eeeeee;text-align:inherit;">定义用于添加新闹钟的对话框。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><code>AlarmDelegate.qml</code></td> 
   <td style="border-color:#eeeeee;text-align:inherit;">定义应用主屏幕的布局。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><code>AlarmModel.qml</code></td> 
   <td style="border-color:#eeeeee;text-align:inherit;">定义用于存储警报数据的<a href="https://doc.qt.io/qt-6/qml-qtqml-models-listmodel.html" rel="nofollow">列表模型</a>。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#eeeeee;text-align:inherit;"><code>TumblerDelegate.qml</code></td> 
   <td style="border-color:#eeeeee;text-align:inherit;">定义滚筒的图形布局</td> 
  </tr> 
 </tbody> 
</table>

### `qtquickcontrols2.conf` ###

以下代码段显示了如何在材质样式中设置暗主题：

[Controls]
    Style=Material
    [Material]
    Theme=Dark
    Accent=Red

### `main.qml` ###

`主窗口是` [ApplicationWindow][] `QML类型，是此应用程序中的根项。`

ApplicationWindow {
        id: window
        width: 400
        height: 500
        visible: true

[ListView][] alarmListView将alarmModel中的数据与alarmDelegate中定义的布局相结合。

ListView {
            id: alarmListView
            anchors.fill: parent
            model: AlarmModel {}
            delegate: AlarmDelegate {}
        }

可以通过单击 [RoundButton][Link 1]添加新的闹钟。单击它将打开一个对话框屏幕alarmDialog。

RoundButton {
            id: addAlarmButton
            text: "+"
            anchors.bottom: alarmListView.bottom
            anchors.bottomMargin: 8
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: alarmDialog.open()
        }
    
        AlarmDialog {
            id: alarmDialog
            x: Math.round((parent.width - width) / 2)
            y: Math.round((parent.height - height) / 2)
            alarmModel: alarmListView.model
        }

### `AlarmDialog.qml` ###

此对话框屏幕有一个行布局([RowLayout][])，每个行布局有一个用于小时和分钟的[Tumbler][]，另一个行布局有一个用于日、月和年的[Tumbler][]。

contentItem: RowLayout {
            RowLayout {
                id: rowTumbler
    
                Tumbler {
                    id: hoursTumbler
                    model: 24
                    delegate: TumblerDelegate {
                        text: formatNumber(modelData)
                    }
                }
                Tumbler {
                    id: minutesTumbler
                    model: 60
                    delegate: TumblerDelegate {
                        text: formatNumber(modelData)
                    }
                }
            }
    
            RowLayout {
                id: datePicker
    
                Layout.leftMargin: 20
    
                property alias dayTumbler: dayTumbler
                property alias monthTumbler: monthTumbler
                property alias yearTumbler: yearTumbler
    
                readonly property var days: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    
                Tumbler {
                    id: dayTumbler
    
                    function updateModel() {
                        // Populate the model with days of the month. For example: [0, ..., 30]
                        var previousIndex = dayTumbler.currentIndex
                        var array = []
                        var newDays = datePicker.days[monthTumbler.currentIndex]
                        for (var i = 1; i <= newDays; ++i)
                            array.push(i)
                        dayTumbler.model = array
                        dayTumbler.currentIndex = Math.min(newDays - 1, previousIndex)
                    }
    
                    Component.onCompleted: updateModel()
    
                    delegate: TumblerDelegate {
                        text: formatNumber(modelData)
                    }
                }
                Tumbler {
                    id: monthTumbler
    
                    onCurrentIndexChanged: dayTumbler.updateModel()
    
                    model: 12
                    delegate: TumblerDelegate {
                        text: window.locale.standaloneMonthName(modelData, Locale.ShortFormat)
                    }
                }
                Tumbler {
                    id: yearTumbler
    
                    // This array is populated with the next three years. For example: [2018, 2019, 2020]
                    readonly property var years: (function() {
                        var currentYear = new Date().getFullYear()
                        return [0, 1, 2].map(function(value) { return value + currentYear; })
                    })()
    
                    model: years
                    delegate: TumblerDelegate {
                        text: formatNumber(modelData)
                    }
                }
            }
        }
    }

如果您单击对话中的**"确定**"，输入的数据将被添加到：`alarmModel`

onAccepted: {
            alarmModel.append({
                "hour": hoursTumbler.currentIndex,
                "minute": minutesTumbler.currentIndex,
                "day": dayTumbler.currentIndex + 1,
                "month": monthTumbler.currentIndex + 1,
                "year": yearTumbler.years[yearTumbler.currentIndex],
                "activated": true,
                "label": "",
                "repeat": false,
                "daysToRepeat": [
                    { "dayOfWeek": 0, "repeat": false },
                    { "dayOfWeek": 1, "repeat": false },
                    { "dayOfWeek": 2, "repeat": false },
                    { "dayOfWeek": 3, "repeat": false },
                    { "dayOfWeek": 4, "repeat": false },
                    { "dayOfWeek": 5, "repeat": false },
                    { "dayOfWeek": 6, "repeat": false }
                ],
            })
        }
        onRejected: alarmDialog.close()

### `AlarmDelegate.qml` ###

主屏幕中的每个报警都是一个ItemDelegate。ItemDelegate根目录包含主屏幕和详细屏幕上的所有字段。详细信息屏幕的字段仅在单击报警后可见，即 root.checked=true。

ItemDelegate {
        id: root
        width: parent.width
        checkable: true
    
        onClicked: ListView.view.currentIndex = index
    
        contentItem: ColumnLayout {
            spacing: 0
    
            RowLayout {
                ColumnLayout {
                    id: dateColumn
    
                    readonly property date alarmDate: new Date(
                        model.year, model.month - 1, model.day, model.hour, model.minute)
    
                    Label {
                        id: timeLabel
                        font.pixelSize: Qt.application.font.pixelSize * 2
                        text: dateColumn.alarmDate.toLocaleTimeString(window.locale, Locale.ShortFormat)
                    }
                    RowLayout {
                        Label {
                            id: dateLabel
                            text: dateColumn.alarmDate.toLocaleDateString(window.locale, Locale.ShortFormat)
                        }
                        Label {
                            id: alarmAbout
                            text: "⸱ " + model.label
                            visible: model.label.length > 0 && !root.checked
                        }
                    }
                }
                Item {
                    Layout.fillWidth: true
                }
                Switch {
                    checked: model.activated
                    Layout.alignment: Qt.AlignTop
                    onClicked: model.activated = checked
                }
            }
            CheckBox {
                id: alarmRepeat
                text: qsTr("Repeat")
                checked: model.repeat
                visible: root.checked
                onToggled: model.repeat = checked
            }
            Flow {
                visible: root.checked && model.repeat
                Layout.fillWidth: true
    
                Repeater {
                    id: dayRepeater
                    model: daysToRepeat
                    delegate: RoundButton {
                        text: Qt.locale().dayName(model.dayOfWeek, Locale.NarrowFormat)
                        flat: true
                        checked: model.repeat
                        checkable: true
                        Material.background: checked ? Material.accent : "transparent"
                        onToggled: model.repeat = checked
                    }
                }
            }
    
            TextField {
                id: alarmDescriptionTextField
                placeholderText: qsTr("Enter description here")
                cursorVisible: true
                visible: root.checked
                text: model.label
                onTextEdited: model.label = text
            }
            Button {
                id: deleteAlarmButton
                text: qsTr("Delete")
                width: 40
                height: 40
                visible: root.checked
                onClicked: root.ListView.view.model.remove(root.ListView.view.currentIndex, 1)
            }
        }
    }

### `AlarmModel.qml` ###

此QML文件包含alarmModel的定义，alarmModel是管理报警数据的 [ListModel][] 。

它创建了五个列表元素和示例警报。

import QtQuick 2.11
    
    // Populate the model with some sample data.
    ListModel {
        id: alarmModel
    
        ListElement {
            hour: 6
            minute: 0
            day: 2
            month: 8
            year: 2018
            activated: true
            label: "Wake up"
            repeat: true
            daysToRepeat: [
                ListElement { dayOfWeek: 0; repeat: false },
                ListElement { dayOfWeek: 1; repeat: false },
                ListElement { dayOfWeek: 2; repeat: false },
                ListElement { dayOfWeek: 3; repeat: false },
                ListElement { dayOfWeek: 4; repeat: false },
                ListElement { dayOfWeek: 5; repeat: false },
                ListElement { dayOfWeek: 6; repeat: false }
            ]
        }
        ListElement {
            hour: 6
            minute: 0
            day: 3
            month: 8
            year: 2018
            activated: true
            label: "Wake up"
            repeat: true
            daysToRepeat: [
                ListElement { dayOfWeek: 0; repeat: true },
                ListElement { dayOfWeek: 1; repeat: true },
                ListElement { dayOfWeek: 2; repeat: true },
                ListElement { dayOfWeek: 3; repeat: true },
                ListElement { dayOfWeek: 4; repeat: true },
                ListElement { dayOfWeek: 5; repeat: false },
                ListElement { dayOfWeek: 6; repeat: false }
            ]
        }
        ListElement {
            hour: 7
            minute: 0
            day: 3
            month: 8
            year: 2018
            activated: false
            label: "Exercise"
            repeat: true
            daysToRepeat: [
                ListElement { dayOfWeek: 0; repeat: true },
                ListElement { dayOfWeek: 1; repeat: true },
                ListElement { dayOfWeek: 2; repeat: true },
                ListElement { dayOfWeek: 3; repeat: true },
                ListElement { dayOfWeek: 4; repeat: true },
                ListElement { dayOfWeek: 5; repeat: true },
                ListElement { dayOfWeek: 6; repeat: true }
            ]
        }
        ListElement {
            hour: 5
            minute: 15
            day: 1
            month: 9
            year: 2018
            activated: true
            label: ""
            repeat: false
            daysToRepeat: [
                ListElement { dayOfWeek: 0; repeat: false },
                ListElement { dayOfWeek: 1; repeat: false },
                ListElement { dayOfWeek: 2; repeat: false },
                ListElement { dayOfWeek: 3; repeat: false },
                ListElement { dayOfWeek: 4; repeat: false },
                ListElement { dayOfWeek: 5; repeat: false },
                ListElement { dayOfWeek: 6; repeat: false }
            ]
        }
        ListElement {
            hour: 5
            minute: 45
            day: 3
            month: 9
            year: 2018
            activated: false
            label: ""
            repeat: false
            daysToRepeat: [
                ListElement { dayOfWeek: 0; repeat: false },
                ListElement { dayOfWeek: 1; repeat: false },
                ListElement { dayOfWeek: 2; repeat: false },
                ListElement { dayOfWeek: 3; repeat: false },
                ListElement { dayOfWeek: 4; repeat: false },
                ListElement { dayOfWeek: 5; repeat: false },
                ListElement { dayOfWeek: 6; repeat: false }
            ]
        }
    }

### TumblerDelegate.qml ###

TumblerDelegate定义了Tumblers的图形属性。

import QtQuick 2.11
    import QtQuick.Controls 2.4
    import QtQuick.Controls.Material 2.4
    
    Text {
        text: modelData
        color: Tumbler.tumbler.Material.foreground
        font: Tumbler.tumbler.font
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

## 输入新警报 ##

在启动屏幕的底部，您可以看到添加警报的按钮。单击它打开“添加新报警”对话框。

新警报的对话器：

!["Add alarms"][Add alarms]

所有字段都是使用Tumbler QML类型输入的。如果按“确定”，则在Tumblers 中选择的值将写入alarmModel。

## 编辑警报 ##

如果您单击特定闹钟，则可以在详细信息屏幕中对其进行编辑。

![Detail screen][]

点击报警设置根设置root.checked=true，这将使详细信息屏幕的字段可见。

visible: root.checked

如果您希望警报在其他日子也触发，请选中alarmRepeat。 [Repeater][]将为一周中的每一天显示一个可检查的RoundButton 。

Flow {
                visible: root.checked && model.repeat
                Layout.fillWidth: true
    
                Repeater {
                    id: dayRepeater
                    model: daysToRepeat
                    delegate: RoundButton {
                        text: Qt.locale().dayName(model.dayOfWeek, Locale.NarrowFormat)
                        flat: true
                        checked: model.repeat
                        checkable: true
                        Material.background: checked ? Material.accent : "transparent"
                        onToggled: model.repeat = checked
                    }
                }
            }

如果您修改了报警器的描述，它将在之后反映在主屏幕上。

TextField {
                id: alarmDescriptionTextField
                placeholderText: qsTr("Enter description here")
                cursorVisible: true
                visible: root.checked
                text: model.label
                onTextEdited: model.label = text
            }

## 删除报警 ##

详细信息屏幕（见上文）有一个用于删除报警的按钮。发出onClicked时，将从alarmModel中删除当前ListElement。

Button {
                id: deleteAlarmButton
                text: qsTr("Delete")
                width: 40
                height: 40
                visible: root.checked
                onClicked: root.ListView.view.model.remove(root.ListView.view.currentIndex, 1)
            }

# 总结 #

该应用程序没有向闹钟添加声音或振动的代码，也不以任何格式或数据库存储闹钟。也许添加这些功能可能是一个有趣的编码项目。存储数据可以在[JSON 格式][JSON]中快速轻松地完成。

Files:

*  [tutorials/alarms/AlarmDelegate.qml][tutorials_alarms_AlarmDelegate.qml]
 *  [tutorials/alarms/AlarmDialog.qml][tutorials_alarms_AlarmDialog.qml]
 *  [tutorials/alarms/AlarmModel.qml][tutorials_alarms_AlarmModel.qml]
 *  [tutorials/alarms/CMakeLists.txt][tutorials_alarms_CMakeLists.txt]
 *  [tutorials/alarms/TumblerDelegate.qml][tutorials_alarms_TumblerDelegate.qml]
 *  [tutorials/alarms/alarms.pro][tutorials_alarms_alarms.pro]
 *  [tutorials/alarms/main.cpp][tutorials_alarms_main.cpp]
 *  [tutorials/alarms/main.qml][tutorials_alarms_main.qml]
 *  [tutorials/alarms/qml.qrc][tutorials_alarms_qml.qrc]

**以及** [JSON Support in Qt][JSON].

[Alarms application]: /images/20221119/ac8973dfe36c45b99dfb4de31bdbcf94.png
[Detail screen]: /images/20221119/ee63228d832a49178128bccd7b57cf13.png
[Link 1]: https://doc.qt.io/qt-6/qml-qtquick-controls2-roundbutton.html
[Add alarms]: /images/20221119/795d428d49f84a2493b0eb6d0f9e126a.png
[Qt Creator New File or Project dialog]: /images/20221119/534f9954c5434405a71e924d3273f0b3.png
[Project Location]: /images/20221119/a968ff425f8149ad9f0f3616d44c9b11.png
[ApplicationWindow]: https://doc.qt.io/qt-6/qtquickcontrols-changes-qt6.html#applicationwindow
[ListView]: https://doc.qt.io/qt-6/qml-qtquick-listview.html
[RowLayout]: https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html
[Tumbler]: https://doc.qt.io/qt-6/qtquickcontrols-changes-qt6.html#tumbler
[ListModel]: https://doc.qt.io/qt-6/qml-qtqml-models-listmodel.html
[Repeater]: https://doc.qt.io/qt-6/qml-qtquick-repeater.html
[JSON]: https://doc.qt.io/qt-6/json.html
[tutorials_alarms_AlarmDelegate.qml]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-alarmdelegate-qml.html
[tutorials_alarms_AlarmDialog.qml]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-alarmdialog-qml.html
[tutorials_alarms_AlarmModel.qml]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-alarmmodel-qml.html
[tutorials_alarms_CMakeLists.txt]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-cmakelists-txt.html
[tutorials_alarms_TumblerDelegate.qml]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-tumblerdelegate-qml.html
[tutorials_alarms_alarms.pro]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-alarms-pro.html
[tutorials_alarms_main.cpp]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-main-cpp.html
[tutorials_alarms_main.qml]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-main-qml.html
[tutorials_alarms_qml.qrc]: https://doc.qt.io/qt-6/qtdoc-tutorials-alarms-qml-qrc.html