QML：自定义ComboBox中元素在鼠标光标上弹跳

huangapple
go评论133阅读模式
英文:

QML: Elements bouncing in customized ComboBox on mouse cursor

问题

我的任务是创建带有图像的ComboBox。我尝试根据Qt的文档自定义ComboBox。它可以正常工作，但当你用鼠标指向元素时，它会水平弹跳。我希望它保持静态。这是我的实现：

  1. ComboBox {
  2.     Component.onCompleted: {
  3.         // 这里执行一些与索引相关的操作
  4.     }
  6.     id: languageComboBox
  8.     contentItem: Image {
  9.         id: countryFlag
  11.         anchors.left: parent.left
  12.         anchors.leftMargin: 5
  13.         horizontalAlignment: Image.AlignLeft
  14.         smooth: false
  15.         antialiasing: false
  16.         sourceSize: Qt.size(40, 20)
  17.         fillMode: Image.Pad
  18.     }
  20.     delegate: ItemDelegate {
  21.         contentItem: Image {
  22.             id: currentFlag
  24.             anchors.left: parent.left
  25.             anchors.leftMargin: 5
  26.             horizontalAlignment: Image.AlignLeft
  27.             sourceSize: Qt.size(40, 20)
  28.             smooth: false
  29.             antialiasing: false
  30.             opacity: 1.0
  31.             fillMode: Image.Pad
  32.             source: imgSource
  33.         }
  34.         highlighted: languageComboBox.highlightedIndex === index
  35.     }
  37.     popup: Popup {
  38.         y: languageComboBox.height - 1
  39.         width: languageComboBox.width
  40.         implicitHeight: contentItem.implicitHeight
  41.         padding: 1
  43.         contentItem: ListView {
  44.             implicitHeight: contentHeight
  45.             clip: true
  46.             model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
  47.             currentIndex: languageComboBox.highlightedIndex
  48.             boundsBehavior: Flickable.StopAtBounds
  49.         }
  50.     }
  51.     model: ListModel {
  52.         // 这里有用于更改图像源和其他内容的元素数据
  53.     }
  55.     onActivated: {
  56.         // 当激活时执行一些操作
  57.     }
  58. }

从我理解的情况来看，问题可能出在Popup或ListView上。我完全不知道如何解决它。我尝试了boundsBehavior: Flickable.StopAtBounds，但没有效果。

这可能看起来有点生疏。这是我找到的第一个实现查看图像的解决方案。

编辑

我已经测试了Qt提供的示例 - 其中的元素（文本）也会在鼠标悬停时弹跳！

英文:

My task is to make ComboBox with images. I have tried to implement ComboBox customization from Qt documentation. It's works well, but when you point an element with mouse cursor it bouncing horizontally. I want it static look. Here is my implementation:

  1. ComboBox {
  2.                 Component.onCompleted: {
  3.                     //Some actions with index here
  4.                 }
  6.                 id: languageComboBox
  8.                 contentItem: Image {
  9.                     id: countryFlag
  11.                     anchors.left: parent.left
  12.                     anchors.leftMargin: 5
  13.                     horizontalAlignment: Image.AlignLeft
  14.                     smooth: false
  15.                     antialiasing: false
  16.                     sourceSize: Qt.size(40, 20)
  17.                     fillMode: Image.Pad
  18.                 }
  21.                 delegate: ItemDelegate {
  22.                     contentItem: Image {
  23.                         id: currentFlag
  25.                         anchors.left: parent.left
  26.                         anchors.leftMargin: 5
  27.                         horizontalAlignment: Image.AlignLeft
  28.                         sourceSize: Qt.size(40, 20)
  29.                         smooth: false
  30.                         antialiasing: false
  31.                         opacity: 1.0
  32.                         fillMode: Image.Pad
  33.                         source: imgSource
  34.                     }
  35.                     highlighted: languageComboBox.highlightedIndex === index
  36.                 }
  38.                 popup: Popup {
  39.                     y: languageComboBox.height - 1
  40.                     width: languageComboBox.width
  41.                     implicitHeight: contentItem.implicitHeight
  42.                     padding: 1
  44.                     contentItem: ListView {
  45.                         implicitHeight: contentHeight
  46.                         clip: true
  47.                         model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
  48.                         currentIndex: languageComboBox.highlightedIndex
  49.                         boundsBehavior: Flickable.StopAtBounds
  51.                     }
  52.                 }
  53.                 model: ListModel {
  54.                     // There is data in elements I use to change image source and other 
  55.                 }
  57.                 onActivated : {
  58.                     // Some actions on activated
  59.                 }
  60.             }

As I understand, there is troubles with Popup or ListView. And absolutely have no idea how to fix it. I'm tried boundsBehavior: Flickable.StopAtBounds but it have no effect on this.
It's may seem rusty. This is first solution I found to implement possibility to see images in

EDIT

I have tested example provided from Qt - it's elements (text) is bouncing on mouse too!

答案1

得分: 0

只需在Popup中的您的ListView上添加锚点。使用anchors.fill: parent。

因此，您的弹出窗口将如下所示：

  1. popup: Popup {
  2.     y: languageComboBox.height - 1
  3.     implicitWidth: languageComboBox.width
  4.     implicitHeight: contentItem.implicitHeight
  5.     padding: 1
  7.     contentItem: ListView {
  8.         implicitHeight: contentHeight
  9.         clip: true
  10.         anchors.fill: parent
  11.         model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
  12.         currentIndex: languageComboBox.highlightedIndex
  13.         boundsBehavior: Flickable.StopAtBounds
  14.     }
  15. }
英文:

Just add anchors to your ListView in Popup. Use anchors.fill: parent.

So your popup would look like this:

  1. popup: Popup {
  2.     y: languageComboBox.height - 1
  3.     implicitWidth: languageComboBox.width
  4.     implicitHeight: contentItem.implicitHeight
  5.     padding: 1
  7.     contentItem: ListView {
  8.         implicitHeight: contentHeight
  9.         clip: true
  10.         anchors.fill: parent
  11.         model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
  12.         currentIndex: languageComboBox.highlightedIndex
  13.         boundsBehavior: Flickable.StopAtBounds
  14.     }
  15. }

huangapple
  • 本文由 发表于 2023年7月20日 21:07:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76730242.html
  • combobox
  • qml
  • qt
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定