QML組合框項目DropDownMenu樣式

Question

我想在我的項目中使用ComboBox類型。是否可以更改下拉菜單的外觀（顏色，形狀，文本樣式），還是需要使用矩形組合，ListView和其他類型？

下面的代碼應用自定義，但沒有修改對於這仍然灰色的下拉菜單來定義：

ComboBox { 
    currentIndex: 2 
    activeFocusOnPress: true 
    style: ComboBoxStyle { 
     id: comboBox 
     background: Rectangle { 
      id: rectCategory 
      radius: 5 
      border.width: 2 
      color: "#fff" 

      Image { 
       source: "pics/corner.png" 
       anchors.bottom: parent.bottom 
       anchors.right: parent.right 
       anchors.bottomMargin: 5 
       anchors.rightMargin: 5 
      } 
     } 
     label: Text { 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.pointSize: 15 
      font.family: "Courier" 
      font.capitalization: Font.SmallCaps 
      color: "black" 
      text: control.currentText 
     } 
    } 

    model: ListModel { 
     id: cbItems 
     ListElement { text: "Banana" } 
     ListElement { text: "Apple" } 
     ListElement { text: "Coconut" } 
    } 
    width: 200 
} 

Answer 1

當前公共API不允許下拉菜單的定製如所述here。 Qt 5.4，即Styles 1.3，剛剛引入了一些屬性來定製字體和文本（文檔號here），但仍然沒有公共訪問下拉式自定義。

此外，鏈接中提供的示例不適用於較新版本的Qt。下面是修改後的版本，我使用Qt 5.3測試的Qt 5.4和Qt 5.5（記得要加import QtQuick.Controls.Private 1.0到進口）：

ComboBox { 
    id: box 
    currentIndex: 2 
    activeFocusOnPress: true 
    style: ComboBoxStyle { 
     id: comboBox 
     background: Rectangle { 
      id: rectCategory 
      radius: 5 
      border.width: 2 
      color: "#fff" 
     } 
     label: Text { 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.pointSize: 15 
      font.family: "Courier" 
      font.capitalization: Font.SmallCaps 
      color: "black" 
      text: control.currentText 
     } 

     // drop-down customization here 
     property Component __dropDownStyle: MenuStyle { 
      __maxPopupHeight: 600 
      __menuItemType: "comboboxitem" 

      frame: Rectangle {    // background 
       color: "#fff" 
       border.width: 2 
       radius: 5 
      } 

      itemDelegate.label:    // an item text 
       Text { 
       verticalAlignment: Text.AlignVCenter 
       horizontalAlignment: Text.AlignHCenter 
       font.pointSize: 15 
       font.family: "Courier" 
       font.capitalization: Font.SmallCaps 
       color: styleData.selected ? "white" : "black" 
       text: styleData.text 
      } 

      itemDelegate.background: Rectangle { // selection of an item 
       radius: 2 
       color: styleData.selected ? "darkGray" : "transparent" 
      } 

      __scrollerStyle: ScrollViewStyle { } 
     } 

     property Component __popupStyle: Style { 
      property int __maxPopupHeight: 400 
      property int submenuOverlap: 0 

      property Component frame: Rectangle { 
       width: (parent ? parent.contentWidth : 0) 
       height: (parent ? parent.contentHeight : 0) + 2 
       border.color: "black" 
       property real maxHeight: 500 
       property int margin: 1 
      } 

      property Component menuItemPanel: Text { 
       text: "NOT IMPLEMENTED" 
       color: "red" 
       font { 
        pixelSize: 14 
        bold: true 
       } 
      } 

      property Component __scrollerStyle: null 
     } 
    } 

    model: ListModel { 
     id: cbItems 
     ListElement { text: "Banana" } 
     ListElement { text: "Apple" } 
     ListElement { text: "Coconut" } 
    } 
    width: 200 
}  

這裏__dropDownStyle被分配一個MenuStyle型。這種類型的一些屬性被定製以獲得期望的樣式，特別是itemDelegate（其定義了組合框內的項目的外觀）和frame（整體背景）。有關更多詳細信息，請參閱鏈接的MenuStyle API。總體結果：

注意，這種方法不完全在Windows和Android的工作而在OSX代碼完全忽略。可以檢查Qt安裝中的qml樣式文件（搜索像qml/QtQuick/Controls/Styles/Desktop這樣的子路徑）以查看w.r.t中的更改。 Windows並嘗試修改所提供的解決方案。這部分留給讀者。

Answer 2

非常感謝！我解決了這個由下面的代碼：

Item { 
id: app 
width: 200 
height: 150 

ListModel{ 
    id: dataModel 
    ListElement{ name: "Day" } 
    ListElement{ name: "Week" } 
    ListElement{ name: "Month" } 
    ListElement{ name: "Year" } 
} 

Button { 
    id: comboButton 
    width: parent.width 
    height: parent.height/5 
    checkable: true 

    style: ButtonStyle { 
     background: Rectangle { 
      color: control.pressed ? "#888" : "#fff" 
      smooth: true 
      radius: 5 
      border.width: 2 

      Image { 
       source: "pics/corner.png" 
       anchors.bottom: parent.bottom 
       anchors.right: parent.right 
       anchors.bottomMargin: 5 
       anchors.rightMargin: 5 
      } 
     } 
     label: Text { 
      renderType: Text.NativeRendering 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.family: "Courier" 
      font.capitalization: Font.SmallCaps 
      font.pointSize: 15 
      color: "black" 
      text: "Day" 
     } 
    } 
    onVisibleChanged: { 
     if(!visible) 
      checked = false 
    } 
} 

TableView { 
    id: tableView 
    height: 120 
    width: parent.width 
    anchors.bottom: parent.bottom 
    highlightOnFocus: true 
    headerVisible: false 
    visible: comboButton.checked ? true : false 

    TableViewColumn { 
     role: "name" 
    } 
    model: dataModel 

    itemDelegate: Item { 
     Rectangle { 
      color: styleData.selected ? "#888" : "#fff" 
      height: comboButton.height - 0.5 
      border.width: 0.5 
      width: parent.width 

      Text { 
       renderType: Text.NativeRendering 
       anchors.verticalCenter: parent.verticalCenter 
       anchors.horizontalCenter: parent.horizontalCenter 
       font.family: "Courier" 
       font.capitalization: Font.SmallCaps 
       font.pointSize: 15 
       color: "black" 
       elide: styleData.elideMode 
       text: styleData.value 
      } 
     } 
    } 

    rowDelegate: Item { 
     height: comboButton.height - 0.5 
    } 

    onClicked: { 
     comboButton.checked = false 
     tableView.selection.clear() 
    } 
} 
} 

Answer 3

我一直在使用這樣的方法，但他們有一個很大的侷限性與focus管理和z-index管理。

我已經完成了ComboBox的實現，它由2部分組成：實際放置在某處的頭部和動態創建的下拉部件。後者由覆蓋所有內容（並攔截鼠標活動）的Item以及精心定位在標題下的下拉列表組成。

代碼是非常巨大的，以包括在這裏，所以你可以看到細節in my blogpost with all the code