QML ComboBox风格

Question

我使用以下代码定制了一个Combobox但有一些我不理解的东西，因此无法修复。首先，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
          }

          ...

        }
...

谢谢！

Answer 1

什么是灰色矩形

它是background的ItemDelegate，它的宽度是itemDlgt的填充。 contentItem在itemDlgt填充。见this。

如何纠正rectDlgt的高度

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

40 - 16 = 12 * 2

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