C语言
Qt Quick Ultralite汽车集群演示
/****************************************************************************** ** ** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/import QtQuick 2.15 import QtQuickUltralite.Extras 2.0 import Automotive 1.0 Item { id: root property alias selected: proxy.selected; NormalModeContentItem { // FIXME: This strange construct is a workaround for missing Item Layers. // We must prevent phone list mask opacity changes propagated from root item. // (mask becomes translucent during transitions and reveals items below) id: proxy } Item { id: phone visible: proxy.visible; height: middle.height anchors.fill: parent; property int currentTab: PhoneModel.contactTabIndex; property bool calling: PhoneModel.inCall; property bool connected: false property int callDuration: 0 property int targetContactIndex: PhoneModel.currentContactIndex property int fav_contacts_size: 3 property int recent_contacts_size: 2 property int all_contacts_size: 5 onCallingChanged: { if (calling) { connectingTimer.interval = 3000 + Math.round(Math.random() * 1000 ) phone.connected = false phone.callDuration = 0 connectingTimer.start() } } // FIXME: models are not reusable // FIXME: indexes are workaround accessing models elements ListModel { id: fav_contacts ListElement { photo: "images/photos/caspar.png"; name: "Caspar Sawrey"; number: "+1 121 743 789"; index: 0 } ListElement { photo: "images/photos/beatriz.png"; name: "Beatriz Brito"; number: "+1 121 521 711"; index: 1 } ListElement { photo: "images/photos/hirini.png"; name: "Hirini Hakopa"; number: "+1 121 488 300"; index: 2 } } ListModel { id: recent_contacts ListElement { photo: "images/photos/caspar.png"; name: "Caspar Sawrey"; number: "+1 121 743 789"; last_call: "Yesterday at 17:06"; index: 0 } ListElement { photo: "images/photos/beatriz.png"; name: "Beatriz Brito"; number: "+1 121 521 711"; last_call: "Yesterday at 07:59"; index: 1 } } ListModel { id: all_contacts ListElement { photo: "images/photos/aryn.png"; name: "Aryn Jacobssen"; number: "+1 121 743 852"; index: 0; fav_index: -1; rec_index: -1 } ListElement { photo: "images/photos/caspar.png"; name: "Caspar Sawrey"; number: "+1 121 743 789"; index: 1; fav_index: 0; rec_index: 0 } ListElement { photo: "images/photos/beatriz.png"; name: "Beatriz Brito"; number: "+1 121 521 711"; index: 2; fav_index: 1; rec_index: 1 } ListElement { photo: "images/photos/joslin.png"; name: "Joslin Rodgers"; number: "+1 121 581 321"; index: 3; fav_index: -1; rec_index: -1 } ListElement { photo: "images/photos/hirini.png"; name: "Hirini Hakopa"; number: "+1 121 488 300"; index: 4; fav_index: 2; rec_index: -1 } } ListModel { id: duplicated_all_contacts ListElement { photo: "images/photos/aryn.png"; name: "Aryn Jacobssen"; number: "+1 121 743 852"; index: 0; fav_index: -1; rec_index: -1 } ListElement { photo: "images/photos/caspar.png"; name: "Caspar Sawrey"; number: "+1 121 743 789"; index: 1; fav_index: 0; rec_index: 0 } ListElement { photo: "images/photos/beatriz.png"; name: "Beatriz Brito"; number: "+1 121 521 711"; index: 2; fav_index: 1; rec_index: 1 } ListElement { photo: "images/photos/joslin.png"; name: "Joslin Rodgers"; number: "+1 121 581 321"; index: 3; fav_index: -1; rec_index: -1 } ListElement { photo: "images/photos/hirini.png"; name: "Hirini Hakopa"; number: "+1 121 488 300"; index: 4; fav_index: 2; rec_index: -1 } } Item { id: middle anchors { horizontalCenter: parent.horizontalCenter; top: tabs.bottom } width: 264 height: 210 - 13 clip: true Item { opacity: proxy.opacity * (phone.calling ? 0 : 1); id: middleSliding; height: parent.height; width: parent.width * 3; x: - parent.width * phone.currentTab; y: 75 Behavior on x { NumberAnimation { duration: PhoneModel.contactTabSwitchDuration } } Behavior on opacity { NumberAnimation { } } Column { id: favourites width: middle.width spacing: -8 y: - 75 * PhoneModel.favContactsIndex Behavior on y { NumberAnimation { duration: PhoneModel.contactScrollDuration } } Repeater { model: fav_contacts delegate: Row { width: middle.width; Item { width: 20; height: 1 } Image { width: 75; height: 75 source: model.photo } Item { width: 22; height: 1 } Column { anchors.verticalCenter: parent.verticalCenter Text { text: model.name; font.pixelSize: 14; color: Style.lightPeriwinkle; font.family: "Sarabun"; font.bold: true; } Text { text: model.number; font.pixelSize: 14; color: Style.lightPeriwinkle; font.family: "Sarabun"; } } } } } Column { id: recent x: favourites.x + width; width: middle.width; spacing: -8 y: - 75 * PhoneModel.recentContactsIndex Behavior on y { NumberAnimation { duration: PhoneModel.contactScrollDuration } } Repeater { model: recent_contacts delegate: Row { width: middle.width; Item { width: 20; height: 1 } Image { width: 75; height: 75 source: model.photo; } Item { width: 22; height: 1 } Column { anchors.verticalCenter: parent.verticalCenter spacing: -1 Text { text: model.name; font.pixelSize: 14; color: Style.lightPeriwinkle; font.family: "Sarabun"; font.bold: true; } Text { text: model.number; font.pixelSize: 14; color: Style.lightPeriwinkle; font.family: "Sarabun"; } Text { text: model.last_call; font.pixelSize: 12; color: Style.lightPeriwinkle; font.family: "Sarabun"; font.bold: true; } } } } } Column { id: contacts x: favourites.x + width * 2; width: middle.width; spacing: -8 y: - 75 * PhoneModel.allContactsIndex Behavior on y { NumberAnimation { duration: PhoneModel.contactScrollDuration } } Repeater { model: all_contacts delegate: Row { width: middle.width; Item { width: 20; height: 1 } Image { width: 75; height: 75 source: model.photo } Item { width: 22; height: 1 } Column { anchors.verticalCenter: parent.verticalCenter Text { text: model.name; font.pixelSize: 14; color: Style.lightPeriwinkle; font.family: "Sarabun"; font.bold: true; } Text { text: model.number; font.pixelSize: 14; color: Style.lightPeriwinkle; font.family: "Sarabun"; } } } } } } Image { opacity: 1 // Keep opacity constant, so nothing is revealed source: "images/assets-phone-list-pseudo-mask.png" } Image { opacity: 1 // Keep opacity constant, so nothing is revealed source: "images/pseudo-mask-vertical.png" } } Row { id: tabs opacity: proxy.opacity * (phone.calling ? 0 : 1); spacing: 23 y: 74 anchors.horizontalCenter: parent.horizontalCenter Repeater { model: ["Favourites", "Recent", "Contacts"]; delegate: Text { text: modelData; color: Style.lightPeriwinkle; font.pixelSize: 12; font.family: "Sarabun"; opacity: phone.currentTab == index ? 1 : 0.2; Behavior on opacity { NumberAnimation { } } } } } Item { anchors.fill: middle opacity: proxy.opacity * (phone.calling ? 1 : 0); Behavior on opacity { NumberAnimation { } } // FIXME: ListModels elements are not accessible from outside of delegate Repeater { model: duplicated_all_contacts delegate: Column { id: phoneTextCol anchors.horizontalCenter: parent.horizontalCenter; visible: { if (phone.currentTab == 0) { phone.targetContactIndex == model.fav_index } else if (phone.currentTab == 1) { phone.targetContactIndex == model.rec_index } else if (phone.currentTab == 2) { phone.targetContactIndex == model.index } } Row { anchors.horizontalCenter: parent.horizontalCenter spacing: 5 ColorizedImage { anchors.verticalCenter: parent.verticalCenter width: 24; height: width color: "green" source: "images/phone.png" } Column { Text { anchors.horizontalCenter: parent.horizontalCenter text: model.name font.bold: true font.pixelSize: 14 font.family: "Sarabun" color: Style.lightPeriwinkle } Text { anchors.horizontalCenter: parent.horizontalCenter text: model.number font.bold: false; font.pixelSize: 12 font.family: "Sarabun" color: Style.lightPeriwinkle } } } Image { source: model.photo width: 154 height: width } } } Text { anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom } id: callingLabel visible: !phone.connected && phone.calling text: "Calling..." font.pixelSize: 14 font.family: "Sarabun" color: Style.lightPeriwinkle SequentialAnimation { id: callingLabelAnimation loops: Animation.Infinite alwaysRunToEnd: true running: callingLabel.visible PropertyAnimation { target: callingLabel property: "opacity" duration: 400 from: 1.0 to: 0.0 } PauseAnimation { duration: 100 } PropertyAnimation { target: callingLabel property: "opacity" duration: 400 from: 0.0 to: 1.0 } } } Row { anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom } visible: phone.connected && phone.calling Text { text: Math.floor(phone.callDuration / 60) font.pixelSize: 14 font.family: "Sarabun" color: Style.lightPeriwinkle } Text { text: (phone.callDuration % 60) < 10 ? ":0" : ":" font.pixelSize: 14 font.family: "Sarabun" color: Style.lightPeriwinkle } Text { text: Math.floor(phone.callDuration % 60) font.pixelSize: 14 font.family: "Sarabun" color: Style.lightPeriwinkle } } } Timer { id: connectingTimer repeat: false onTriggered: { phone.connected = true } } Timer { id: callProgressTimer running: phone.connected repeat: true interval: 1000 onTriggered: { phone.callDuration += 1 } } } }
