Qt入门教程：如何设置闹钟样式（四）|附代码

---

Qt是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写，所有平台无差别运行，更提供了几乎所有开发过程中需要用到的工具。如今，Qt已被运用于超过70个行业、数千家企业，支持数百万设备及应用。

点击下载QT最新试用版

本文是一个关于使用Qt创建闹钟程序系列教程，下文是有关创建闹钟程序部分源代码，完整源代码请关注本系列文章。

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
}

输入新闹钟

在启动屏幕的底部，您可以看到一个用于添加闹钟的按钮。单击它以打开“ 添加新闹钟”对话框。

新闹钟对话框：

所有字段都是使用Tumbler QML类型输入的。如果按OK，则将“翻转开关”中选择的值写入alarmModel。

 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) } } } } }

编辑闹钟

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

单击闹钟设置root.checked为true，这将显示详细信息屏幕的字段。

visible: root.checked

如果您想在其他日期也设置闹钟，请检查alarmRepeat。中继器将在一周的每一天显示一个可检查的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被发射，电流ListElement从删除alarmModel。

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

点击获取更多相关类产品文章信息