Qt入门教程:如何设置闹钟样式(三)|附代码

翻译|使用教程|编辑:鲍佳佳|2020-08-07 11:44:26.383|阅读 23 次

概述:Qt是目前最先进、最完整的跨平台C++开发工具,本文是一个关于使用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 }}
        ]]
    }}
}}

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

如果你对我们的产品感兴趣或者有任何疑问,欢迎咨询慧都在线客服>>

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Qt

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Qt

一个跨平台的C++图形用户界面应用程序开发框架。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat