添加跟随主题的背景和文字，收藏区域组件

qml/AppControls2/CollectionItem.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.12
+import org.ukui.menu.core 1.0
+
+RoundButton {
+    id: control
+    property string appName: ""
+    property string appIcon: ""
+
+    height: 104
+    width: height
+    radius: 10
+    scale: control.pressed ? 1.1 : 1.0
+    hoverEnabled: true
+
+    contentItem: IconLabel {
+        anchors.fill: parent
+        appName: control.appName
+        appIcon: control.appIcon
+        display: Display.TextUnderIcon
+    }
+
+    background: StyleBackground {
+        radius: control.radius
+        useStyleTransparent: false
+        alpha: control.pressed ? 0.75 : control.hovered ? 0.6 : 0.40
+    }
+}
+

qml/AppControls2/IconLabel.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.0
+import org.ukui.menu.core 1.0
+
+Item {
+    id: root
+
+    property int display: Display.TextUnderIcon
+    // 上下布局icon大小为48*48  左右布局icon大小为32*32
+    property int iconHeight: 48
+    property int iconWidth: 48
+    property string appName: ""
+    property string appIcon: ""
+    // 上下布局spacing：0  左右布局spacing：12
+    property int spacing: 2
+    state: root.display
+
+    states: [
+        State {
+            name: Display.TextBesideIcon
+            AnchorChanges {
+                target: iconImage
+                anchors.verticalCenter: root.verticalCenter
+            }
+            PropertyChanges {
+                target: iconText
+                textMaxWidth: root.width - iconImage.width - root.spacing
+
+                anchors.left: iconImage.right
+                anchors.leftMargin: root.spacing
+                anchors.verticalCenter: root.verticalCenter
+            }
+        },
+        State {
+            name: Display.TextUnderIcon
+            PropertyChanges {
+                target: iconImage
+                anchors.top: root.top
+                anchors.topMargin: (root.height - root.spacing -iconImage.height -iconText.height) / 2
+                anchors.horizontalCenter: root.horizontalCenter
+            }
+            PropertyChanges {
+                target: iconText
+                textMaxWidth: root.width
+
+                anchors.top: iconImage.bottom
+                anchors.topMargin: root.spacing
+                anchors.horizontalCenter: root.horizontalCenter
+            }
+        }
+    ]
+
+    Image {
+        id: iconImage
+        height: root.iconHeight
+        width: root.iconWidth
+        source: root.appIcon
+    }
+
+    StyleText {
+        id: iconText
+        property int textMaxWidth: root.width
+        text: root.appName
+        font.pixelSize: 14
+        elide: Text.ElideRight
+        Component.onCompleted:  {
+            var textWidth = contentWidth > textMaxWidth ? textMaxWidth : contentWidth
+            width = textWidth
+        }
+    }
+}

qml/AppControls2/StyleBackground.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.5
+import org.ukui.menu.core 1.0
+
+Rectangle {
+    property bool useStyleTransparent: true
+    property int paletteRole: Palette.Base
+    property int paletteGroup: Palette.Active
+    property real alpha: 1.0
+
+    clip: true
+
+    function updateColor() {
+        if (useStyleTransparent) {
+            color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup)
+        } else {
+            color = themePalette.paletteColorWithCustomTransparency(paletteRole,paletteGroup,alpha)
+        }
+    }
+
+    Component.onCompleted: {
+        updateColor()
+        themePalette.styleColorChanged.connect(updateColor)
+    }
+    Component.onDestruction: {
+        themePalette.styleColorChanged.disconnect(updateColor)
+    }
+
+    onUseStyleTransparentChanged: {
+        updateColor()
+    }
+    onPaletteRoleChanged: {
+        updateColor()
+    }
+    onPaletteGroupChanged: {
+        updateColor()
+    }
+    onAlphaChanged: {
+        updateColor()
+    }
+}
+

qml/AppControls2/StyleText.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.0
+import org.ukui.menu.core 1.0
+
+Text {
+    property int paletteRole: Palette.Text
+
+    function updateColor() {
+        color = themePalette.paletteColor(paletteRole)
+    }
+
+    Component.onCompleted: {
+        updateColor()
+        themePalette.styleColorChanged.connect(updateColor)
+    }
+    Component.onDestruction: {
+        themePalette.styleColorChanged.disconnect(updateColor)
+    }
+
+    onPaletteRoleChanged: {
+        updateColor()
+    }
+}

qml/qml.qrc

@@ -10,5 +10,9 @@
         <file>AppUI/Sidebar.qml</file>
         <file>AppControls2/qmldir</file>
         <file>AppControls2/App.qml</file>
+        <file>AppControls2/CollectionItem.qml</file>
+        <file>AppControls2/StyleBackground.qml</file>
+        <file>AppControls2/StyleText.qml</file>
+        <file>AppControls2/IconLabel.qml</file>
     </qresource>
 </RCC>

src/commons.h

@@ -24,6 +24,19 @@
 
 namespace UkuiMenu {
 
+class Display {
+    Q_GADGET
+public:
+    enum Type {
+        IconOnly,
+        TextOnly,
+        TextBesideIcon,
+        TextUnderIcon
+    };
+
+    Q_ENUM(Type)
+};
+
 class SortType
 {
     Q_GADGET
@@ -94,6 +107,7 @@ public:
         qRegisterMetaType<UkuiMenu::DataType::Type>("DataType::Type");
         qRegisterMetaType<UkuiMenu::DataEntity>("DataEntity");
 
+        qmlRegisterUncreatableType<Display>(uri, versionMajor, versionMinor, "Display", "Use enums only.");
         qmlRegisterUncreatableType<UkuiMenu::SortType>(uri, versionMajor, versionMinor, "SortType", "Use enums only");
         qmlRegisterUncreatableType<UkuiMenu::DataType>(uri, versionMajor, versionMinor, "DataType", "Use enums only");
 //        qmlRegisterUncreatableType<UkuiMenu::DataEntity>(uri, versionMajor, versionMinor, "DataEntity", "unknown");