QML ComboBox 样式

Question

我使用以下代码自定义了一个组合框，但有些事情我不明白，因此无法修复。首先，悬停元素的高度，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。看到这个。

如何修正 rectDlgt 的高度

高度itemDlgt- 高度rectDlgt= 顶部和底部内边距itemDlgt

40 - 16 = 12 * 2

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