QML 组合框样式答案

【问题标题】：QML ComboBox styleQML 组合框样式
【发布时间】：2018-02-27 16:09:39
【问题描述】：

我使用以下代码自定义了一个组合框，但有些东西我不明白，因此无法修复。首先，id 为 rectDlgt 的悬停元素的高度。我在控制台中输出了 itemDlgt 和 rectDlgt 的高度，它们并不相同，而我希望它们应该如此。 itemDlgt 高度为 40，rectDlgt 为 16。

第二件事是当我按下列表中的一个元素时出现的灰色矩形。我假设它已链接到 listView，但即使在 ListView 中有委托，它似乎也没有改变。

ComboBox {
  id:equipmentList
  anchors.verticalCenter: parent.verticalCenter
  width: 318
  height:64

  model: [ qsTr("Equipment1"), qsTr("Equipment2"), qsTr("Equipment3"), qsTr("Equipment4"), qsTr("Equipment5"), qsTr("Equipment6") ]

  //the background of the combobox
  background: Rectangle {
      color: "#95A4A8"
      border.color: "white"
      radius: height/2
  }

  delegate: ItemDelegate {
      id:itemDlgt
      width: equipmentList.width
      height:40

      contentItem: Rectangle{
          id:rectDlgt
          width:parent.implicitWidth
          height:itemDlgt.height
          color:itemDlgt.hovered?"#507BF6":"white";

          Text {
              id:textItem
              text: modelData
              color: hovered?"white":"#507BF6"
              font: equipmentList.font
              elide: Text.ElideRight
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignLeft
          }
       }

        onPressed: console.log(itemDlgt.height+" "+rectDlgt.height)//are not the same!
   }

   //the arrow on the right in the combobox
   indicator:Image{
         width:50; height:width;
         horizontalAlignment:Image.AlignRight
         source:comboPopup.visible ? "arrowOpen.png":"arrowClose.png";
   }

   //the text in the combobox
   contentItem: Text {
         leftPadding: 20
         rightPadding: equipmentList.indicator.width + equipmentList.spacing

         text: equipmentList.displayText
         font: equipmentList.font
         color: "white"
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignLeft
         elide: Text.ElideRight
   }

   //the list of elements and their style when the combobox is open
   popup: Popup {
         id:comboPopup
         y: equipmentList.height - 1
         width: equipmentList.width
         height:contentItem.implicitHeigh
         padding: 1

         contentItem: ListView {
             id:listView
             implicitHeight: contentHeight
             model: equipmentList.popup.visible ? equipmentList.delegateModel : null

             ScrollIndicator.vertical: ScrollIndicator { }
         }

         background: Rectangle {
            radius: 20
            border.width: 1
            border.color:"#95A4A8"
         }
     }

  }

那么如何校正rectDlgt的高度以及被按下元素上方的灰色矩形是什么？

谢谢。

编辑：有了 Jiu 的回答，我得到：

而新代码，仅适用于 ComboBox 中的委托：

...
delegate: ItemDelegate {
          id:itemDlgt
          width: equipmentList.width
          height:40
          padding:0

          contentItem: Text {
              id:textItem
              text: modelData
              color: hovered?"white":"#507BF6"
              font: equipmentList.font
              elide: Text.ElideRight
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignLeft
              leftPadding: 20
          }

          background: Rectangle {
            radius: 20
            color:itemDlgt.hovered?"#507BF6":"white";
            anchors.left: itemDlgt.left
            anchors.leftMargin: 0
            width:itemDlgt.width-2
          }

          ...

        }
...

谢谢！

【问题讨论】：

标签： qt combobox styles qml qtquickcontrols2

【解决方案1】：

什么是灰色矩形

是ItemDelegate的background，宽度是itemDlgt的内边距。 contentItem 在 itemDlgt 填充内。见this。

如何修正rectDlgt的高度

itemDlgt 的高度 - rectDlgt 的高度 = itemDlgt 的顶部和底部填充

40 - 16 = 12 * 2

如果您希望两个高度的值相同，则可以将填充设置为零。但我猜你可能需要修改默认的background。

【讨论】：