C

Qt Quick Ultralite swipe_game Demo

/****************************************************************************** ** ** Copyright (C) 2021 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.0 import StyleModule 1.0 import SwipeModule 1.0 /* This view provides a list of hardcoded dummy switches. Scrolling is deliberately deactivated on the list itself. Instead it can be scrolled using areas at the sides of the list. */ BaseView { id: root property int swipeAreaSize: Globals.useSmallTouchAreas ? Style.swipeAreaSizeSmall : Style.swipeAreaSizeDefault signal swipeTriggered() clip: true MouseArea { id: scrollArea property int startY: 0 property int startContentY: 0 anchors { top: contentFlickable.top bottom: contentFlickable.bottom left: parent.left right: parent.right } onPressed: { startY = mouseY startContentY = contentFlickable.contentY } onPositionChanged: { contentFlickable.contentY = Math.max(0, Math.min(startContentY - mouseY + startY, contentFlickable.contentHeight - contentFlickable.height)) } MouseArea { id: blockArea anchors { fill: parent leftMargin: root.swipeAreaSize rightMargin: root.swipeAreaSize } } // can be activated in the config view as a guide for users Rectangle { id: leftAreaVisualizer anchors { left: parent.left right: blockArea.left top: parent.top bottom: parent.bottom } color: "magenta" opacity: 0.4 visible: Globals.showTouchAreas } // can be activated in the config view as a guide for users Rectangle { id: rightAreaVisualizer anchors { left: blockArea.right right: parent.right top: parent.top bottom: parent.bottom } color: "magenta" opacity: 0.4 visible: Globals.showTouchAreas } } Flickable { id: contentFlickable property int hypothenuse: root.height * 0.5 anchors { left: parent.left right: parent.right margins: root.swipeAreaSize verticalCenter: parent.verticalCenter } // with the width set by the swipeAreaSize value the height is calulated so its top and bottom hit the circular frame height: 2 * Math.sqrt((hypothenuse * hypothenuse) - ((hypothenuse - root.swipeAreaSize) * (hypothenuse - root.swipeAreaSize))) contentHeight: Math.max(contentColumn.height, contentFlickable.height) contentWidth: 0 interactive: false Column { id: contentColumn width: contentFlickable.width spacing: Style.listSpacing LabeledSwitch { anchors.horizontalCenter: parent.horizontalCenter width: contentColumn.width * 0.9 text: "Show TA" font: Style.textFontSmall checked: Globals.showTouchAreas onTriggered: Globals.showTouchAreas = !Globals.showTouchAreas } LabeledSwitch { anchors.horizontalCenter: parent.horizontalCenter width: contentColumn.width * 0.9 text: "Small TA" font: Style.textFontSmall checked: Globals.useSmallTouchAreas onTriggered: Globals.useSmallTouchAreas = !Globals.useSmallTouchAreas } LabeledSwitch { anchors.horizontalCenter: parent.horizontalCenter width: contentColumn.width * 0.9 text: "Animate" font: Style.textFontSmall checked: Globals.useViewAnimations onTriggered: Globals.useViewAnimations = !Globals.useViewAnimations } Repeater { id: contentRepeater model: 5 delegate: LabeledSwitch { anchors.horizontalCenter: parent.horizontalCenter width: contentColumn.width * 0.9 text: "Dummy " + (index + 1) font: Style.textFontSmall onTriggered: checked = !checked } } } } ScrollIndicator { id: leftIndicator anchors { top: contentFlickable.top bottom: contentFlickable.bottom left: contentFlickable.left } flickable: contentFlickable showIndicator: scrollArea.pressed } ScrollIndicator { id: rightIndicator anchors { verticalCenter: parent.verticalCenter right: contentFlickable.right } height: leftIndicator.height flickable: contentFlickable showIndicator: scrollArea.pressed } // used for navigation between views DirectionalSwipeArea { id: upArea anchors.fill: parent direction: Swipe.Direction.Up onTriggered: { root.swipeTriggered() } } // a mask is required to hide the flickable's content outside the circular frame, because due to the circular // layout of the view clipping alone woulnd't suffice. Image { id: circleMask anchors.fill: parent source: "mask_circle.svg" } }