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

---

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

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

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

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
}

輸入新鬧鐘

在啟動(dòng)屏幕的底部，您可以看到一個(gè)用于添加鬧鐘的按鈕。單擊它以打開“ 添加新鬧鐘”對(duì)話框。

新鬧鐘對(duì)話框：

所有字段都是使用Tumbler QML類型輸入的。如果按OK，則將“翻轉(zhuǎn)開關(guān)”中選擇的值寫入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) } } } } }

編輯鬧鐘

如果單擊特定鬧鐘，則可以在詳細(xì)信息屏幕中對(duì)其進(jìn)行編輯。

單擊鬧鐘設(shè)置root.checked為true，這將顯示詳細(xì)信息屏幕的字段。

visible: root.checked

如果您想在其他日期也設(shè)置鬧鐘，請(qǐng)檢查alarmRepeat。中繼器將在一周的每一天顯示一個(gè)可檢查的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
        }

刪除鬧鐘

詳細(xì)信息屏幕（請(qǐng)參見上文）具有用于刪除鬧鐘的按鈕。當(dāng)onClicked被發(fā)射，電流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)
        }

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