QML 组合框样式

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

what is the grey rectangle

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

how to correct the height of rectDlgt

itemDlgt 的高度 - rectDlgt 的高度 = itemDlgt

的顶部和底部填充

40 - 16 = 12 * 2

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

QML 组合框样式

QML ComboBox style

qt

combobox

styles

qml

qtquickcontrols2