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"
    }
}