C

Qt Quick Ultralite Watch Demo

/****************************************************************************** ** ** Copyright (C) 2019 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 Watch 1.0 Item { enum AppId { Tools = 0, Compass = 1, SportApp = 2, YourHealth = 3, Settings = 4 } id: root property bool onScreen: false property bool offScreen: false property real selectedOp: 1.0 property real othersOp: 0.1 readonly property int entryHeight: 90 readonly property int entryWidth: width readonly property int maxTextAlpha: 255 readonly property int minTextAlpha: 178 property int currentIndex: 1 signal selected(ApplicationList.AppId app) function isCurrentIndex(i : int) : bool { return i === root.currentIndex } function swipeToIndex(index: int) { listView.contentY = -entryHeight * index + (2 * entryHeight) } ListView { id: listView anchors.fill: parent clip: true Component.onCompleted: { contentY = -entryHeight * currentIndex } onContentYChanged: { var __localIndex = Math.round(Math.abs(contentY) / entryHeight) currentIndex = Math.min(__localIndex + 2, 6) } // Two items are placed at the beginning and at the end // are included so that we could we could center selected // item model: ListModel { ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" } ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" } ListElement { name: "Tools"; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" } ListElement { name: "Compass"; img: "images/list/compass.png"; imgBig: "images/list/compass-big.png" } ListElement { name: "Sport App"; img: "images/list/sport-app.png"; imgBig: "images/list/sport-app-big.png" } ListElement { name: "Your Health"; img: "images/list/your-health.png"; imgBig: "images/list/your-health-big.png" } ListElement { name: "Settings"; img: "images/list/settings.png"; imgBig: "images/list/settings-big.png" } ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" } ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" } } delegate: MouseArea { id: delegate width: root.entryWidth height: root.entryHeight onClicked: { if (model.name === "") { return } if (root.currentIndex === index ) { selected(index-2) } currentIndex = index swipeToIndex(currentIndex) } opacity: index === root.currentIndex ? selectedOp : othersOp Image { id: image anchors.left: parent.left anchors.leftMargin: margin anchors.verticalCenter: parent.verticalCenter source: isCurrentIndex(-index) ? model.imgBig : model.img visible: model.name !== "" property int margin: isCurrentIndex(index) ? 8 : 18 } Text { anchors.left: image.right anchors.leftMargin: 25 anchors.verticalCenter: parent.verticalCenter text: model.name font.pixelSize: 34 font.family: Theme.fontFamily color: Qt.rgba(255, 255, 255, alpha/maxTextAlpha); property int alpha: isCurrentIndex(-index) ? maxTextAlpha : minTextAlpha } } } }