Fix horizontal scrolling to be row independent

This commit is contained in:
2022-09-07 21:49:22 -06:00
parent 5c8d0dacf5
commit d691aeb6e9
2 changed files with 98 additions and 74 deletions
+25 -16
View File
@@ -13,14 +13,24 @@ StackLayout {
property bool viewSelected property bool viewSelected
property int selectedElement property int selectedElement
state: viewSelected ? "selected" : "deselected" state: viewSelected ? "selected" : "deselected"
property int xSelect: 0
property int ySelect: 0 property int ySelect: 0
width: parent.width * viewSelected ? 0.95 : 0.8 width: parent.width * viewSelected ? 0.95 : 0.8
height: parent.height height: parent.height
Item {
Item { // fake object to create notifying array
id: rowSelector
Item {
property int xIndex: 0
}
Item {
property int xIndex: 0
}
}
Repeater { Repeater {
model: providers model: providers
Rectangle { Rectangle {
anchors.fill: parent
color: "#22282A" color: "#22282A"
Row { Row {
Item { Item {
@@ -34,9 +44,9 @@ StackLayout {
z: 1.2 z: 1.2
height: parent.height * 0.25 height: parent.height * 0.25
width: parent.width width: parent.width
title: elementColumn.children[ySelect].provider.getShow(xSelect).title title: elementColumn.children[ySelect].provider.getShow(rowSelector.children[ySelect].xIndex).title
year: elementColumn.children[ySelect].provider.getShow(xSelect).year year: elementColumn.children[ySelect].provider.getShow(rowSelector.children[ySelect].xIndex).year
description: elementColumn.children[ySelect].provider.getShow(xSelect).description description: elementColumn.children[ySelect].provider.getShow(rowSelector.children[ySelect].xIndex).description
} }
ScrollView { ScrollView {
z: 1.0 z: 1.0
@@ -44,14 +54,7 @@ StackLayout {
width: parent.width width: parent.width
contentWidth: 2000 contentWidth: 2000
contentHeight: 2000 contentHeight: 2000
ScrollBar.horizontal.position: xSelect * 0.135
ScrollBar.vertical.position: ySelect * 0.22 ScrollBar.vertical.position: ySelect * 0.22
Behavior on ScrollBar.horizontal.position {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
}
Behavior on ScrollBar.vertical.position { Behavior on ScrollBar.vertical.position {
NumberAnimation { NumberAnimation {
duration: 200 duration: 200
@@ -63,19 +66,21 @@ StackLayout {
Column { Column {
id: elementColumn id: elementColumn
spacing: 20 spacing: 20
width: parent.width
Element { Element {
title: "In Progress" title: "In Progress"
provider: modelData provider: modelData
repeaterModel: modelData.inProgress repeaterModel: modelData.inProgress
elemSelected: viewSelected && (0 == ySelect) elemSelected: viewSelected && (0 == ySelect)
xIndex: xSelect xIndex: rowSelector.children[0].xIndex
} }
Element { Element {
title: "Recently Added" title: "Recently Added"
provider: modelData provider: modelData
repeaterModel: modelData.recentlyAdded repeaterModel: modelData.recentlyAdded
elemSelected: viewSelected && (1 == ySelect) elemSelected: viewSelected && (1 == ySelect)
xIndex: xSelect xIndex: rowSelector.children[1].xIndex
}
} }
} }
} }
@@ -112,13 +117,17 @@ StackLayout {
Keys.onPressed: (event)=> { Keys.onPressed: (event)=> {
if (event.key == Qt.Key_Left) { if (event.key == Qt.Key_Left) {
if (xSelect == 0) { if (rowSelector.children[ySelect].xIndex == 0) {
ySelect = 0;
parent.selectedView = 0; parent.selectedView = 0;
for (var i = 0; i < rowSelector.children.length; i++) {
rowSelector.children[i].xIndex = 0;
}
} else { } else {
xSelect--; rowSelector.children[ySelect].xIndex--;
} }
} else if (event.key == Qt.Key_Right) { } else if (event.key == Qt.Key_Right) {
xSelect++; rowSelector.children[ySelect].xIndex++;
} else if (event.key == Qt.Key_Down) { } else if (event.key == Qt.Key_Down) {
ySelect++; ySelect++;
} else if (event.key == Qt.Key_Up) { } else if (event.key == Qt.Key_Up) {
@@ -1,6 +1,6 @@
import QtQuick 2.12 import QtQuick 2.12
import QtQuick.Controls 1.4 import QtQuick.Controls 1.4
import QtQuick.Controls 2.15
Column { Column {
property var title property var title
@@ -8,6 +8,7 @@ Column {
property var repeaterModel property var repeaterModel
property bool elemSelected property bool elemSelected
property int xIndex property int xIndex
width: parent.width
Item { Item {
width: 10 width: 10
height: 20 height: 20
@@ -15,13 +16,7 @@ Column {
Row { Row {
Item { Item {
height: parent.height height: parent.height
width: 16 + (xIndex * 270) width: 16
Behavior on width {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
}
} }
Text { Text {
text: title text: title
@@ -33,6 +28,23 @@ Column {
width: 10 width: 10
height: 15 height: 15
} }
ScrollView {
width: parent.width
height: 400
ScrollBar.horizontal.position: xIndex * 0.135
Behavior on ScrollBar.horizontal.position {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
}
Flickable {
clip: true
Column {
Item {
width: parent.width
height: 20
}
Row { Row {
Repeater { Repeater {
id: repeater id: repeater
@@ -44,3 +56,6 @@ Column {
} }
} }
} }
}
}
}