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

---

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

点击下载QT最新试用版

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

AlarmDelegate.qml

主屏幕中的每个警报都是一个ItemDelegate。该ItemDelegate root包含主屏幕和详细信息屏幕上的所有领域。仅在单击警报后（即，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的ListModel的定义。

它使用示例闹钟创建五个ListElement。

import QtQuick 2.11 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 }}
        ]]
    }}
}}

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