Qt入門教程：如何設(shè)置鬧鐘樣式（三）|附代碼

---

Qt是目前最先進(jìn)、最完整的跨平臺(tái)C++開(kāi)發(fā)工具。它不僅完全實(shí)現(xiàn)了一次編寫，所有平臺(tái)無(wú)差別運(yùn)行，更提供了幾乎所有開(kāi)發(fā)過(guò)程中需要用到的工具。如今，Qt已被運(yùn)用于超過(guò)70個(gè)行業(yè)、數(shù)千家企業(yè)，支持?jǐn)?shù)百萬(wàn)設(shè)備及應(yīng)用。

點(diǎn)擊下載QT最新試用版

本文是一個(gè)關(guān)于使用Qt創(chuàng)建鬧鐘程序系列教程，下文是有關(guān)創(chuàng)建鬧鐘程序部分源代碼，完整源代碼請(qǐng)關(guān)注后續(xù)文章。

AlarmDelegate.qml

主屏幕中的每個(gè)警報(bào)都是一個(gè)ItemDelegate。該ItemDelegate root包含主屏幕和詳細(xì)信息屏幕上的所有領(lǐng)域。僅在單擊警報(bào)后（即，root.checked是時(shí)），才能看到詳細(xì)信息屏幕的字段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文件包含管理鬧鐘數(shù)據(jù)alarmModel的ListModel的定義。

它使用示例鬧鐘創(chuàng)建五個(gè)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 }}
        ]]
    }}
}}

點(diǎn)擊獲取更多相關(guān)類產(chǎn)品文章信息

如果你對(duì)我們的產(chǎn)品感興趣或者有任何疑問(wèn)，歡迎咨詢慧都在線客服>>