QML ComboBox风格

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了QML ComboBox风格相关的知识,希望对你有一定的参考价值。

我使用以下代码定制了一个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的高度以及压制元素上方的灰色矩形是什么?

enter image description here

谢谢。

编辑:有了Jiu的回答,我得到:

enter image description here

而新代码,仅适用于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
          }

          ...

        }
...

谢谢!

答案

什么是灰色矩形

它是backgroundItemDelegate,它的宽度是itemDlgt的填充。 contentItemitemDlgt填充。见this

如何纠正rectDlgt的高度

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

40 - 16 = 12 * 2

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

以上是关于QML ComboBox风格的主要内容,如果未能解决你的问题,请参考以下文章

QML 可以多选ComboBox的实现

QML中的ComboBox SQL QT 5.10.1

如何在 QML 的自定义 ComboBox 中突出显示所选项目?

解决QML开发中ComboBox中一个已选择项没有清除的问题

如何正确地将 ComboBox 的模型从 python (pyQt5) 传递给 QML?

在 QML 中填充 Combobox 模型时如何使用 csv 列表?