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

點擊獲取更多相關類產品文章信息