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