C
Qt Quick Ultralite swipe_game Demo
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
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
Flickable {
id: contentFlickable
property int hypothenuse: root.height * 0.5
flickableDirection: Flickable.VerticalFlick
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
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: contentFlickable.movingVertically
}
ScrollIndicator {
id: rightIndicator
anchors {
verticalCenter: parent.verticalCenter
right: contentFlickable.right
}
height: leftIndicator.height
flickable: contentFlickable
showIndicator: contentFlickable.movingVertically
}
// 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"
}
}