linuxdeepin · 18202781743 · Sep 19, 2024 · Jul 17, 2024 · Jul 18, 2024 · Jul 23, 2024
diff --git a/chameleon/CMakeLists.txt b/chameleon/CMakeLists.txt
@@ -24,6 +24,7 @@ set(QML_FILES
     Frame.qml
     GroupBox.qml
     ItemDelegate.qml
+    ListView.qml
     MenuItem.qml
     Menu.qml
     MenuSeparator.qml

diff --git a/chameleon/ListView.qml b/chameleon/ListView.qml
@@ -0,0 +1,9 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import org.deepin.dtk 1.0 as D
+
+D.ListView {
+
+}
diff --git a/examples/exhibition/ControlGroup.qml b/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
+        }
+    }
+ }
diff --git a/examples/exhibition/qml-qt6.qrc b/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>
diff --git a/qt6/src/dtkdeclarative_qml.qrc b/qt6/src/dtkdeclarative_qml.qrc
@@ -63,6 +63,7 @@
         <file>qml/private/ButtonPanel.qml</file>
         <file>qml/ActionButton.qml</file>
         <file>qml/ItemDelegate.qml</file>
+        <file>qml/ListView.qml</file>
         <file>qml/CheckDelegate.qml</file>
         <file>qml/TipsSlider.qml</file>
         <file>qml/SliderTipItem.qml</file>
@@ -109,6 +110,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>

diff --git a/qt6/src/qml.cmake b/qt6/src/qml.cmake
@@ -52,6 +52,7 @@ set(QML_DTK_CONTROLS
     "qml/ComboBox.qml"
     "qml/ActionButton.qml"
     "qml/ItemDelegate.qml"
+    "qml/ListView.qml"
     "qml/CheckDelegate.qml"
     "qml/TipsSlider.qml"
     "qml/SliderTipItem.qml"
@@ -96,6 +97,9 @@ set(QML_DTK_CONTROLS
     "qml/EmbeddedProgressBar.qml"
     "qml/WaterProgressBar.qml"
     "qml/PlaceholderText.qml"
+    "qml/ControlGroup.qml"
+    "qml/ControlGroupItem.qml"
+    "qml/DragItemsImage.qml"
 )
 
 foreach(QML_FILE ${QML_DTK_CONTROLS})

diff --git a/qt6/src/qml/ArrowListView.qml b/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
 

diff --git a/qt6/src/qml/BoxPanel.qml b/qt6/src/qml/BoxPanel.qml
@@ -22,10 +22,11 @@ Item {
     property int innerShadowOffsetY1: -1
     // Background color changes with hover state if `backgroundFlowingHovered` is `true`.
     property bool backgroundFlowsHovered: true
+    property bool enableBoxShadow: control.D.ColorSelector.family === D.Palette.CommonColor
 
     Loader {
         anchors.fill: backgroundRect
-        active: control.D.ColorSelector.family === D.Palette.CommonColor
+        active: enableBoxShadow
         sourceComponent: BoxShadow {
             shadowBlur: control.boxShadowBlur
             shadowOffsetY: control.boxShadowOffsetY

diff --git a/qt6/src/qml/ButtonBox.qml b/qt6/src/qml/ButtonBox.qml
@@ -6,6 +6,7 @@ import QtQuick 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
 
 Control {
     id: control
@@ -24,11 +25,27 @@ Control {
         children: control.buttons
     }
 
-    background: BoxPanel {
-        implicitWidth: DS.Style.buttonBox.width
-        implicitHeight: DS.Style.buttonBox.height
-        backgroundFlowsHovered: D.ColorSelector.family === D.Palette.CrystalColor
+
+    ParallelAnimation {
+        running:  btnGroup.checkedButton && (btnGroup.checkedButton.x !== backgroundPanel.x || btnGroup.checkedButton.y !== backgroundPanel.y)
+        NumberAnimation { target: backgroundPanel; property: "x"; to: btnGroup.checkedButton ? btnGroup.checkedButton.x : backgroundPanel.x; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "y"; to: btnGroup.checkedButton ? btnGroup.checkedButton.y : backgroundPanel.y; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "width"; to: btnGroup.checkedButton ? btnGroup.checkedButton.width : backgroundPanel.width; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "height"; to: btnGroup.checkedButton ? btnGroup.checkedButton.height : backgroundPanel.height; duration: 200 }
+    }
+
+    P.ButtonPanel {
+        id: backgroundPanel
+        visible: btnGroup.checkedButton
+        implicitWidth: visible ? btnGroup.checkedButton.width : 0
+        implicitHeight: visible ? btnGroup.checkedButton.height : 0
+        button: control
         outsideBorderColor: null
+        color1: D.Palette {
+            normal {
+                common: Qt.rgba(0, 0, 0, 0.2)
+            }
+        }
         color2: color1
     }
 }
diff --git a/qt6/src/qml/CheckDelegate.qml b/qt6/src/qml/CheckDelegate.qml
@@ -12,6 +12,8 @@ T.CheckDelegate {
     id: control
     property Component content
     property D.Palette backgroundColor: DS.Style.itemDelegate.checkBackgroundColor
+    property string indicatorIcon: control.checkState === Qt.Unchecked ? "item_unchecked" : "item_checked"
+    property bool indicatorVisible: control.checked
 
     implicitWidth: DS.Style.control.implicitWidth(control)
     implicitHeight: DS.Style.control.implicitHeight(control)
@@ -26,15 +28,22 @@ T.CheckDelegate {
     indicator: Loader {
         x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
         y: control.topPadding + (control.availableHeight - height) / 2
-        active: control.checked
+        active: indicatorVisible
 
         sourceComponent: D.DciIcon {
             palette: control.D.DTK.makeIconPalette(control.palette)
             mode: control.D.ColorSelector.controlState
             theme: control.D.ColorSelector.controlTheme
-            name: "menu_select"
+            name: indicatorIcon
             sourceSize: Qt.size(DS.Style.itemDelegate.checkIndicatorIconSize, DS.Style.itemDelegate.checkIndicatorIconSize)
             fallbackToQIcon: false
+            onNameChanged: {
+                play(D.DTK.NormalState);
+            }
+            Component.onCompleted: {
+                if (indicatorVisible)
+                    play(D.DTK.NormalState);
+            }
         }
     }
 
@@ -58,12 +67,12 @@ T.CheckDelegate {
         }
     }
 
-    background: Item {
+    background: Control {
         implicitWidth: DS.Style.itemDelegate.width
         implicitHeight: DS.Style.itemDelegate.height
         Rectangle {
             anchors.fill: parent
-            visible: !checked
+            visible: !checked && !control.ListView.view
             color: control.D.ColorSelector.backgroundColor
             radius: DS.Style.control.radius
         }
@@ -74,4 +83,12 @@ T.CheckDelegate {
             radius: DS.Style.control.radius
         }
     }
+
+    onHoveredChanged: {
+        if (checked || !ListView.view)
+            return
+
+        if (ListView.view)
+            ListView.view.setHoverItem(control.hovered ? control : null)
+    }
 }