sync: from linuxdeepin/dtkdeclarative

examples/exhibition/ControlGroup.qml

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.0
+import QtQuick.Window 2.11
+import QtQuick.Layouts 1.11
+import org.deepin.dtk 1.0
+import ".."
+
+ ControlGroup {
+    title: "磁盘"
+    ControlGroupItem {
+        Label {
+            visible: true
+            text: "test0111111111111"
+        }
+        Label {
+            visible: true
+            text: "test13333333333"
+        }
+    }
+    ControlGroupItem {
+        Rectangle {
+            width: 100
+            height: 100
+            color: "red"
+            border.color: "black"
+            border.width: 5
+            radius: 10
+        }
+        Switch {
+            checked: true
+            Layout.alignment: Qt.AlignHCenter
+        }
+    }
+    ControlGroupItem {
+        Rectangle {
+            width: 100
+            height: 100
+            color: "green"
+            border.color: "black"
+            border.width: 5
+            radius: 10
+        }
+        Button {
+            width: 100
+            height: 100
+            Layout.alignment: Qt.AlignHCenter
+        }
+    }
+ }

examples/exhibition/qml-qt6.qrc

@@ -25,5 +25,6 @@
         <file>ToolBar.qml</file>
         <file>Dialog.qml</file>
         <file>ProgressBar.qml</file>
+        <file>ControlGroup.qml</file>
     </qresource>
 </RCC>

qt6/src/dtkdeclarative_qml.qrc

@@ -109,6 +109,8 @@
         <file>qml/ButtonIndicator.qml</file>
         <file>qml/EmbeddedProgressBar.qml</file>
         <file>qml/WaterProgressBar.qml</file>
+        <file>qml/ControlGroup.qml</file>
+        <file>qml/ControlGroupItem.qml</file>
         <file>qml/private/ProgressBarImpl.qml</file>
         <file>qml/private/ProgressBarPanel.qml</file>
         <file>qml/PlaceholderText.qml</file>

qt6/src/qml.cmake

@@ -96,6 +96,8 @@ set(QML_DTK_CONTROLS
     "qml/EmbeddedProgressBar.qml"
     "qml/WaterProgressBar.qml"
     "qml/PlaceholderText.qml"
+    "qml/ControlGroup.qml"
+    "qml/ControlGroupItem.qml"
 )
 
 foreach(QML_FILE ${QML_DTK_CONTROLS})

qt6/src/qml/ArrowListView.qml

@@ -5,6 +5,7 @@
 import QtQuick 2.11
 import QtQuick.Window 2.11
 import QtQuick.Layouts 1.11
+import org.deepin.dtk 1.0 as D
 import org.deepin.dtk.style 1.0 as DS
 import org.deepin.dtk.private 1.0 as P
 
@@ -48,6 +49,20 @@ FocusScope {
             }
             interactive: Window.window ? (contentHeight > Window.window.height || model.count > maxVisibleItems) : false
             ScrollIndicator.vertical: ScrollIndicator { }
+            highlight: Rectangle {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 6
+                anchors.rightMargin: 6
+                anchors.topMargin: 6
+                anchors.bottomMargin: 6
+                property D.Palette backgroundColor: DS.Style.highlightPanel.background
+                color: D.ColorSelector.backgroundColor
+                radius: 6 // TODO can't display background when using dtk's InWindowBlur.
+            }
+            highlightFollowsCurrentItem: true
+            highlightMoveDuration: -1
+            highlightMoveVelocity: 400
         }
 
         P.ArrowListViewButton {

qt6/src/qml/ControlGroup.qml

@@ -0,0 +1,171 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.0
+import QtQuick.Layouts 1.11
+import org.deepin.dtk 1.0 as D
+import org.deepin.dtk.style 1.0 as DS
+
+ColumnLayout {
+    id: root
+    spacing: 10
+    clip: true
+
+    property string title
+    property bool isExpanded: true
+    property int interval: 400 / (itemLayout.children.length)
+    property int index: 0
+    property int titleHeight: 36
+    default property alias childItem: itemLayout.children
+
+    Control {
+        id: title
+        Layout.fillWidth: true
+        Layout.preferredHeight: 36
+        property int inset: 4
+        leftInset: inset
+        rightInset: inset
+        topInset: inset
+        bottomInset: inset
+        state: "normal"
+        states: [
+            State {
+                name: "normal"
+                PropertyChanges {
+                    target: title
+                    inset:4
+                }
+            },
+            State {
+                name: "hovered"
+                PropertyChanges {
+                    target: title
+                    inset:0
+                }
+            },
+            State {
+                name: "pressed"
+                PropertyChanges {
+                    target: title
+                    inset: 4
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                from: "normal"
+                to: "hovered"
+                NumberAnimation {
+                    properties: "inset"
+                    easing.type: Easing.Linear
+                    duration: 500
+                }
+            },
+            Transition {
+                from: "hovered"
+                to: "normal"
+                NumberAnimation {
+                    properties: "inset"
+                    easing.type: Easing.Linear
+                    duration: 500
+                }
+            },
+            Transition {
+                from: "hovered"
+                to: "pressed"
+                NumberAnimation {
+                    properties: "inset"
+                    easing.type: Easing.Linear
+                    duration: 500
+                }
+            },
+            Transition {
+                from: "pressed"
+                to: "hovered"
+                NumberAnimation {
+                    properties: "inset"
+                    easing.type: Easing.Linear
+                    duration: 500
+                }
+            }
+        ]
+        RowLayout {
+            anchors.fill: parent
+            spacing: 0
+            Label {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                text: root.title
+                font: DTK.fontManager.t5
+                verticalAlignment: Qt.AlignVCenter
+            }
+            D.DciIcon {
+                Layout.preferredWidth: 36
+                Layout.preferredHeight: 36
+                rotation: root.isExpanded ? 0 : - 90
+                name: "arrow_ordinary_down"
+
+                Behavior on rotation {
+                    NumberAnimation {
+                        duration: root.interval
+                        easing.type: Easing.Linear
+                    }
+                }
+            }
+        }
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: root.isExpanded = !root.isExpanded
+            onPressed: title.state = "pressed"
+            onReleased: title.state = "hovered"
+            onEntered: title.state = "hovered"
+            onExited: title.state = "normal"
+        }
+        background: Item {
+            Loader {
+                anchors.fill: parent
+                active: title.hovered
+                sourceComponent: D.RoundRectangle {
+                    color: DS.Style.itemDelegate.normalColor
+                    radius: DS.Style.control.radius
+                    corners: D.RoundRectangle.TopLeftCorner | D.RoundRectangle.TopRightCorner | D.RoundRectangle.BottomLeftCorner | D.RoundRectangle.BottomRightCorner
+                }
+            }
+        }
+    }
+
+    Timer {
+        id: timer
+    }
+
+    ColumnLayout {
+        id: itemLayout
+    }
+
+    onIsExpandedChanged: (isExpanded) => {
+        for(let i = 0; i < itemLayout.children.length; ++i) {
+            itemLayout.children[i].isExpanded = !itemLayout.children[i].isExpanded
+        }
+        //     delay(0, timeout)
+    }
+
+    function timeout() {
+        itemLayout.children[index].isExpanded = !itemLayout.children[index].isExpanded
+        ++index
+        if (index === itemLayout.children.length) {
+            timer.stop()
+            timer.triggered.disconnect(timeout)
+            index = 0
+        }
+    }
+
+    function delay(delayTime, cb) {
+        timer.interval = delayTime
+        timer.repeat = true
+        timer.triggered.connect(cb)
+        timer.restart()
+    }
+}

qt6/src/qml/ControlGroupItem.qml

@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.0
+import QtQuick.Layouts 1.11
+import QtQml.Models 2.11
+import org.deepin.dtk 1.0
+
+RowLayout {
+    id: root
+
+    property int initY
+    property bool isExpanded: true
+
+    y: isExpanded ? initY : - parent.parent.titleHeight
+    opacity: isExpanded ? 1.0 : 0.0
+    visible: opacity === 0.0 ? false : true
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+
+    Behavior on y {
+        NumberAnimation {
+            duration: parent.parent.interval
+            easing.type: Easing.Linear
+        }
+    }
+    Behavior on opacity {
+        NumberAnimation {
+            duration: parent.parent.interval
+            easing.type: Easing.Linear
+        }
+    }
+
+    Component.onCompleted: {
+        root.initY = root.y
+    }
+}