1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
Item {
id: selector
property int curIdx: 0
property int maxIdx: 3
property int gridWidth: 240
property Flickable flickable
width: parent.width
height: 64
function advance(steps) {
const nextIdx = curIdx + steps
if (nextIdx < 0 || nextIdx > maxIdx)
return
flickable.contentX += gridWidth * steps
curIdx += steps
}
Image {
source: "pics/arrow.png"
MouseArea{
anchors.fill: parent
onClicked: selector.advance(-1)
}
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
opacity: selector.curIdx == 0 ? 0.2 : 1.0
Behavior on opacity {NumberAnimation{}}
}
Image {
source: "pics/arrow.png"
mirror: true
MouseArea{
anchors.fill: parent
onClicked: selector.advance(1)
}
opacity: selector.curIdx == selector.maxIdx ? 0.2 : 1.0
Behavior on opacity {NumberAnimation{}}
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
}
Repeater {
model: [ "Scale", "Repeat", "Scale/Repeat", "Round" ]
delegate: Text {
required property string modelData
required property int index
text: modelData
anchors.verticalCenter: parent.verticalCenter
x: (index - selector.curIdx) * 80 + 140
Behavior on x { NumberAnimation{} }
opacity: selector.curIdx == index ? 1.0 : 0.0
Behavior on opacity { NumberAnimation{} }
}
}
}
|