将插件选择器提取为单独组件

qml/AppUI/AppPageHeader.qml

@@ -34,7 +34,7 @@ Item {
             name: "normal"
             PropertyChanges { target: searchBar; scale: 0.9; y: -pluginSelectionBar.height }
             PropertyChanges { target: pluginSelectionBar; scale: 1.0; y: 0 }
-            StateChangeScript { script: sortMenu.sortMenuModel.reactivateProvider() }
+            StateChangeScript { script: pluginSelectMenu.model.reactivateProvider() }
         },
         State {
             name: "search"
@@ -80,7 +80,7 @@ Item {
                 useStyleTransparent: false
                 onTextChanged: {
                     if (text === "") {
-                        sortMenu.sortMenuModel.reactivateProvider();
+                        pluginSelectMenu.model.reactivateProvider();
                     } else {
                         appPageHeaderUtils.activateProvider(providerId);
                         appPageHeaderUtils.startSearch(text);
@@ -138,125 +138,13 @@ Item {
                 }
             }
 
-            Row {
+            PluginSelectMenu {
+                id: pluginSelectMenu
                 Layout.preferredWidth: childrenRect.width
                 Layout.preferredHeight: 32
+                Layout.maximumHeight: 32
                 Layout.rightMargin: 8
                 Layout.alignment: Qt.AlignVCenter
-
-                AppControls2.RoundButton {
-                    id: providerIcon
-                    width: 32; height: width
-                    buttonIcon: "image://appicon/ukui-selected"
-
-                    onClicked: {
-                        sortMenu.sortMenuModel.autoSwitchProvider();
-                    }
-                }
-
-                Image {
-                    id: providerSelector
-                    width: 16
-                    height: width
-                    anchors.verticalCenter: parent.verticalCenter
-                    source: "image://appicon/ukui-down.symbolic"
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            sortMenu.show();
-                        }
-                    }
-                }
-
-                function updateProviderIcon() {
-                    providerIcon.buttonIcon = sortMenu.sortMenuModel.currentProviderIcon();
-                }
-
-                Component.onCompleted: {
-                    updateProviderIcon();
-                    sortMenu.sortMenuModel.currentIndexChanged.connect(updateProviderIcon);
-                }
-            }
-        }
-    }
-
-    Menu {
-        id: sortMenu
-        width: 128
-        height: 120
-        padding: 8
-        clip: true
-        property var sortMenuModel: appPageHeaderUtils.model(PluginGroup.SortMenuItem)
-
-        function show() {
-            popup();
-        }
-
-        onOpened: {
-            providerSelector.source = "image://appicon/ukui-up.symbolic";
-        }
-
-        onClosed: {
-            providerSelector.source = "image://appicon/ukui-down.symbolic";
-        }
-
-        // TODO 添加边框阴影
-        background: AppControls2.StyleBackground {
-            paletteRole: Palette.Window
-            useStyleTransparent: false
-            radius: 8
-        }
-
-        contentItem: ListView {
-            clip: true
-            spacing: 4
-            model: sortMenu.sortMenuModel
-            delegate: AppControls2.StyleBackground {
-                width: ListView.view ? ListView.view.width : 0
-                height: 32
-                radius: 4
-                alpha: (model.isChecked || mouseArea.isHoverd) ? 0.2 : 1
-                paletteRole: (model.isChecked || mouseArea.isHoverd) ? Palette.Text : Palette.Window
-                useStyleTransparent: false
-
-                Item {
-                    anchors.fill: parent
-                    anchors.margins: 8
-                    Image {
-                        visible: model.isChecked
-                        anchors.verticalCenter: parent.verticalCenter
-                        width: 16
-                        height: 16
-                        source: "image://appicon/object-select.symbolic"
-                    }
-                    AppControls2.StyleText {
-                        x: 24
-                        verticalAlignment: Text.AlignVCenter
-                        width: parent.width - x
-                        height: parent.height
-                        text: model.name
-                    }
-                }
-
-                MouseArea {
-                    id: mouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    property bool isHoverd: false
-                    onClicked: {
-                        if (model.isChecked) {
-                            return;
-                        }
-                        appPageHeaderUtils.activateProvider(model.id);
-                    }
-                    onEntered: {
-                        isHoverd = true;
-                    }
-                    onExited: {
-                        isHoverd = false;
-                    }
-                }
             }
         }
     }

qml/AppUI/PluginSelectMenu.qml

@@ -0,0 +1,129 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import AppControls2 1.0 as AppControls2
+import org.ukui.menu.core 1.0
+import org.ukui.menu.utils 1.0
+
+RowLayout {
+    id: pluginSelectMenuRoot
+    property var model: appPageHeaderUtils.model(PluginGroup.SortMenuItem)
+    spacing: 2
+    AppControls2.RoundButton {
+        id: pluginSelectButton
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        Layout.maximumWidth: height
+        buttonIcon: "image://appicon/ukui-selected"
+        onClicked: {
+            pluginSelectMenuRoot.model.autoSwitchProvider();
+        }
+    }
+
+    MouseArea {
+        Layout.alignment: Qt.AlignVCenter
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        Layout.maximumWidth: 16
+        Layout.maximumHeight: 16
+
+        onClicked: {
+            sortMenu.popup();
+        }
+
+        Image {
+            id: sortMenuSelector
+            anchors.fill: parent
+            source: "image://appicon/ukui-down.symbolic"
+        }
+
+        Menu {
+            id: sortMenu
+            width: 128
+            height: 120
+            padding: 8
+            clip: true
+
+            // TODO 添加边框阴影
+            background: AppControls2.StyleBackground {
+                paletteRole: Palette.Window
+                useStyleTransparent: false
+                radius: 8
+            }
+
+            contentItem: ListView {
+                clip: true
+                spacing: 4
+                model: pluginSelectMenuRoot.model
+                delegate: AppControls2.StyleBackground {
+                    width: ListView.view ? ListView.view.width : 0
+                    height: 32
+                    radius: 4
+                    alpha: (model.isChecked || mouseArea.isHoverd) ? 0.2 : 1
+                    paletteRole: (model.isChecked || mouseArea.isHoverd) ? Palette.Text : Palette.Window
+                    useStyleTransparent: false
+
+                    Item {
+                        anchors.fill: parent
+                        anchors.margins: 8
+                        Image {
+                            visible: model.isChecked
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: 16
+                            height: 16
+                            source: "image://appicon/object-select.symbolic"
+                        }
+                        AppControls2.StyleText {
+                            x: 24
+                            verticalAlignment: Text.AlignVCenter
+                            width: parent.width - x
+                            height: parent.height
+                            text: model.name
+                        }
+                    }
+
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        property bool isHoverd: false
+                        onClicked: {
+                            if (model.isChecked) {
+                                return;
+                            }
+                            appPageHeaderUtils.activateProvider(model.id);
+                        }
+                        onEntered: {
+                            isHoverd = true;
+                        }
+                        onExited: {
+                            isHoverd = false;
+                        }
+                    }
+                }
+            }
+
+            Component.onCompleted: {
+                updateProviderIcon();
+                pluginSelectMenuRoot.model.currentIndexChanged.connect(updateProviderIcon);
+            }
+
+            Component.onDestruction: {
+                pluginSelectMenuRoot.model.currentIndexChanged.disconnect(updateProviderIcon);
+            }
+
+            function updateProviderIcon() {
+                pluginSelectButton.buttonIcon = pluginSelectMenuRoot.model.currentProviderIcon();
+            }
+
+            onOpened: {
+                sortMenuSelector.source = "image://appicon/ukui-up.symbolic";
+            }
+
+            onClosed: {
+                sortMenuSelector.source = "image://appicon/ukui-down.symbolic";
+            }
+        }
+    }
+}

qml/AppUI/qmldir

@@ -6,3 +6,4 @@ NormalUI 1.0 NormalUI.qml
 FullScreenUI 1.0 FullScreenUI.qml
 AppPageHeader 1.0 AppPageHeader.qml
 SearchInputBar 1.0 SearchInputBar.qml
+PluginSelectMenu 1.0 PluginSelectMenu.qml

qml/qml.qrc

@@ -27,5 +27,6 @@
         <file>AppControls2/RoundButton.qml</file>
         <file>AppUI/SelectionPage.qml</file>
         <file>AppUI/AppPageContent.qml</file>
+        <file>AppUI/PluginSelectMenu.qml</file>
     </qresource>
 </RCC>