Implement smooth source select with Loaders, implement vertical tabbar for settings, add header

This commit is contained in:
Dark Steveneq
2025-10-13 02:55:16 +02:00
parent b48a29935d
commit 362166cc1f
7 changed files with 243 additions and 69 deletions

View File

@@ -8,50 +8,168 @@ RowLayout {
// Layout.leftMargin: parent.width * 2
// Layout.rightMargin: parent.width * 2
TabBar {
Container {
id: settingsCategory
Layout.fillWidth: false
Layout.fillHeight: true
Layout.rightMargin: 15
spacing: 10
implicitWidth: 240
clip: true
contentItem: ListView {
spacing: 7.5
model: settingsCategory.contentModel
currentIndex: settingsCategory.currentIndex
spacing: settingsCategory.spacing
snapMode: ListView.SnapOneItem
orientation: ListView.Vertical
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: width - 40
}
TabButton {
Button {
text: qsTr("Appearance")
width: 284
width: 240
outlined: true
onClicked: settingsCategory.currentIndex = 0
}
TabButton {
Button {
text: qsTr("Language")
width: 240
outlined: true
onClicked: settingsCategory.currentIndex = 1
}
Button {
text: qsTr("Playback Settings")
width: 240
outlined: true
onClicked: settingsCategory.currentIndex = 2
}
Button {
text: qsTr("About")
width: 284
width: 240
outlined: true
onClicked: settingsCategory.currentIndex = 3
}
}
Rectangle {
Layout.fillHeight: true
width: 5
color: Colors.text
radius: 5
}
StackLayout {
SwipeView {
Layout.fillWidth: true
Layout.fillHeight: true
currentIndex: settingsCategory.currentIndex
orientation: Qt.Vertical
interactive: false
currentIndex: tabbar.currentIndex
Loader {
active: tabbar.currentIndex == 0
asynchronous: true
visible: status == Loader.Ready
sourceComponent: ColumnLayout {
Label {
text: "Appearance"
heading: "h1"
font.bold: true
}
}
}
Loader {
active: tabbar.currentIndex == 1
asynchronous: true
visible: status == Loader.Ready
sourceComponent: ColumnLayout {
Label {
text: "Language"
heading: "h1"
font.bold: true
}
}
}
Loader {
active: tabbar.currentIndex == 2
asynchronous: true
visible: status == Loader.Ready
sourceComponent: ColumnLayout {
Label {
text: "Playback Settings"
heading: "h1"
font.bold: true
}
}
}
Loader {
active: tabbar.currentIndex == 3
asynchronous: true
visible: status == Loader.Ready
sourceComponent: ColumnLayout {
Label {
text: "About"
heading: "h1"
font.bold: true
}
Label {
text: "YouRadio"
heading: "h2"
font.bold: true
}
Label {
text: "by Youpiter"
heading: "h3"
font.bold: true
}
Label {
text: "Music source"
heading: "base"
font.bold: true
}
Label {
text: "QYouRadio"
heading: "h3"
font.bold: true
}
Label {
text: "by Ghostfox"
heading: "h3"
font.bold: true
}
Label {
text: "Client development"
heading: "base"
font.bold: true
}
Label {
text: "Attribution"
heading: "h1"
font.bold: true
}
Label {
text: "Qt"
heading: "h2"
font.bold: true
}
Label {
text: "by Qt Group Inc."
heading: "h3"
font.bold: true
}
Label {
text: "Open-Source library on which QYouRadio is built uppon, licensed under LGPL-3.0"
heading: "base"
font.bold: true
}
}
}
}
}
}