qml - 在 Qml 中创建类似 kicker 的子菜单

Question

我在一个 kde plasmoid 上供我自己使用。它是一个类似于 kicker 的应用程序菜单，当我点击主菜单中的一个项目时，我试图打开一个子菜单，如图所示：

但我能做到的就是：

如何在 plasmoid 的主要项目之外打开子菜单。考虑到子菜单是 ListView 也是主菜单。这是菜单的“调用”：

ListDelegate {
            id: recentitemsItem
            text: i18n("Recent Items")                
            highlight: delegateHighlight 
            
            
            PlasmaComponents.Label {
                id: submenuArrow
                text: "⏵"                    
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
            }                
                onClicked: { 
                                  
                   subMenu.visible = !subMenu.visible
                    
                }
        }

这是菜单：

Item { 
    
    id: subMenu
    visible : false     
    
    width: units.gridUnit * 14 
    height: units.gridUnit * 43
    x : units.gridUnit * 16
    y : aboutComputerItem.height + separatorItem.height + systemsettingsItem.height + appStoreItem.height + separatorItem1.height + recentitemsItem.height
    
      
    PlasmaComponents.Label {
                    id: applications                    
                    enabled: false           
                    text: "Applications"
                }
                
    ListView { 
        id: row
        anchors.top: applications.bottom
        
        width: parent.width        
        height: parent.height     
        
       model: Kicker.RecentUsageModel {
                        favoritesModel: globalFavorites                        
                        }
       delegate: ListDelegate {  
            
                height: 24
                width: parent.width
                
                
                highlight: delegateHighlight
                onClicked: if(model.url == undefined){                     
                                        executable.exec("gtk-launch  "  +  model.favoriteId);                                                                                                                  
                                    }
                                    else {executable.exec("xdg-open  '"  + model.url + "'");
                                    }      
        
                PlasmaCore.IconItem {
                    id: icon

                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 10
                    width: 16
                    height: width

                    visible: true

           

                    source: model.decoration
                }

                PlasmaComponents.Label {
                    id: label
                    
                    enabled: true
                    anchors.verticalCenter: icon.verticalCenter
                    anchors.left : icon.right
                    anchors.leftMargin: 10
                    width: parent.width 

                    verticalAlignment: Text.AlignVCenter

                    textFormat: Text.PlainText
                    wrapMode: Text.NoWrap
                    elide: Text.ElideRight

                    text: model.display
                }       
        }
    }
 
}

Answer 1

这个问题的一个答案是这样使用PlasmaCore.ToolTipArea{}：

import org.kde.plasma.core 2.0 as PlasmaCore


        ListDelegate {
            id: recentitemsItem
            text: i18n("Recent Items")                
            highlight: delegateHighlight        
                 
            PlasmaCore.ToolTipArea {
                id: toolTip                   
                         
                anchors.fill: parent
                active: true 
                interactive : true
                timeout : -1
                location: PlasmaCore.Types.LeftEdge 
                
                mainItem: toolTipDelegate  
                          
            } 
            
            onClicked: {
                
                toolTip.showToolTip()
             }
         }

并设置为mainItem: toolTipDelegate以下代码：

Item {
        
            id: toolTipDelegate  

            width: units.gridUnit * 16 
            height: units.gridUnit * 40 
            visible: false
                                      
            ListView { 
                id: row
                                    
                width: parent.width
                height: parent.height
                
    
                model: Kicker.RecentUsageModel {
                    favoritesModel: globalFavorites              
                    }
                    
                    delegate: ListDelegate {  
                       
                        height: 24
                        width: parent.width
                        
                       
                        highlight: delegateHighlight
                           
                            onClicked: if(model.url == undefined){                     
                                    executable.exec("gtk-launch  '"  +  model.favoriteId + "'");                                                                                                                  
                                }
                                else {executable.exec("xdg-open  '"  + model.url + "'");
                                }     
    
                            PlasmaCore.IconItem {
                                    id: icon

                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.leftMargin: 10
                                    width: 16
                                    height: width
                                    visible: true
                                    source: model.decoration
                                }
           
                            PlasmaComponents.Label {
                                    id: label
                
                                    enabled: true
                                    anchors.verticalCenter: icon.verticalCenter
                                    anchors.left : icon.right
                                    anchors.leftMargin: 10
                                    width: parent.width 

                                    verticalAlignment: Text.AlignVCenter

                                    textFormat: Text.PlainText
                                    wrapMode: Text.NoWrap
                                    elide: Text.ElideRight
                                    text: model.display
                               }          
                        }
               
                
                    } 
                }

然后，任何时候鼠标悬停在Recent Items项目上或被单击都会打开一个带有列表视图（我想要的菜单）的工具提示窗口。