QML ComboBox风格

时间：2023-05-09 17:21:04 买帖 | 投诉/举报

篇首语：本文由小编为大家整理，主要介绍了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的高度以及压制元素上方的灰色矩形是什么？

谢谢。

编辑：有了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          }          ...        }...

谢谢！

答案