fix: remove clippingrectangle in favor of passing radius to sub-items

This commit is contained in:
2026-09-30 14:26:59 +02:00
parent 4a021d81ac
commit f6fa2f0230
6 changed files with 95 additions and 78 deletions
+77 -74
View File
@@ -11,8 +11,8 @@ import qs.Components
Item {
id: root
readonly property real nonAnimWidth: view.implicitWidth + clipWrapper.anchors.margins * 2
readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + clipWrapper.anchors.margins + clipWrapper.anchors.topMargin
readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins + viewWrapper.anchors.topMargin
required property ScreenState screenState
@@ -74,115 +74,118 @@ Item {
anchors.margins: Tokens.padding.small
}
CustomClippingRect {
id: clipWrapper
Item {
id: viewWrapper
property int radius: Tokens.rounding.extraLarge - anchors.margins
anchors.top: tabs.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.topMargin: Tokens.spacing.small
anchors.margins: Tokens.padding.small
radius: Tokens.rounding.extraLarge - anchors.margins
clip: true
Item {
id: viewWrapper
Flickable {
id: view
readonly property int currentIndex: root.screenState.dashboardTab
readonly property Item currentItem: {
repeater.count;
return repeater.itemAt(currentIndex);
}
anchors.fill: parent
Flickable {
id: view
implicitWidth: currentItem?.implicitWidth ?? 0
implicitHeight: currentItem?.implicitHeight ?? 0
readonly property int currentIndex: root.screenState.dashboardTab
readonly property Item currentItem: {
repeater.count;
return repeater.itemAt(currentIndex);
}
contentX: currentItem?.x ?? 0
contentWidth: row.implicitWidth
contentHeight: row.implicitHeight
anchors.fill: parent
interactive: false
implicitWidth: currentItem?.implicitWidth ?? 0
implicitHeight: currentItem?.implicitHeight ?? 0
onContentXChanged: {
if (!moving || !currentItem)
return;
contentX: currentItem?.x ?? 0
contentWidth: row.implicitWidth
contentHeight: row.implicitHeight
const x = contentX - currentItem.x;
if (x > currentItem.implicitWidth / 2)
root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
else if (x < -currentItem.implicitWidth / 2)
root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
}
interactive: false
RowLayout {
id: row
onContentXChanged: {
if (!moving || !currentItem)
return;
Repeater {
id: repeater
const x = contentX - currentItem.x;
if (x > currentItem.implicitWidth / 2)
root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
else if (x < -currentItem.implicitWidth / 2)
root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
}
model: ScriptModel {
values: root.dashboardTabs
}
RowLayout {
id: row
delegate: Loader {
id: paneLoader
Repeater {
id: repeater
required property int index
required property var modelData
model: ScriptModel {
values: root.dashboardTabs
}
Layout.alignment: Qt.AlignTop
delegate: Loader {
id: paneLoader
sourceComponent: modelData.component
required property int index
required property var modelData
Layout.alignment: Qt.AlignTop
sourceComponent: modelData.component
Component.onCompleted: active = Qt.binding(() => {
if (index === view.currentIndex)
return true;
const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
})
}
Component.onCompleted: active = Qt.binding(() => {
if (index === view.currentIndex)
return true;
const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
})
}
}
}
Component {
id: dashComponent
Component {
id: dashComponent
Dash {
screenState: root.screenState
}
Dash {
screenState: root.screenState
radius: viewWrapper.radius
}
}
Component {
id: weatherComponent
Component {
id: weatherComponent
WeatherTab {}
WeatherTab {
radius: viewWrapper.radius
}
}
Component {
id: mediaComponent
Component {
id: mediaComponent
Media {
screenState: root.screenState
}
Media {
screenState: root.screenState
radius: viewWrapper.radius
}
}
Component {
id: procsComponent
Component {
id: procsComponent
ProcessesTab {}
ProcessesTab {
radius: viewWrapper.radius
}
}
Behavior on contentX {
Anim {
type: Anim.DefaultEffects
}
Behavior on contentX {
Anim {
type: Anim.DefaultEffects
}
}
}