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

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

QML: Elements bouncing in customized ComboBox on mouse cursor

问题

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

ComboBox {
    Component.onCompleted: {
        // 这里执行一些与索引相关的操作
    }

    id: languageComboBox

    contentItem: Image {
        id: countryFlag

        anchors.left: parent.left
        anchors.leftMargin: 5
        horizontalAlignment: Image.AlignLeft
        smooth: false
        antialiasing: false
        sourceSize: Qt.size(40, 20)
        fillMode: Image.Pad
    }

    delegate: ItemDelegate {
        contentItem: Image {
            id: currentFlag

            anchors.left: parent.left
            anchors.leftMargin: 5
            horizontalAlignment: Image.AlignLeft
            sourceSize: Qt.size(40, 20)
            smooth: false
            antialiasing: false
            opacity: 1.0
            fillMode: Image.Pad
            source: imgSource
        }
        highlighted: languageComboBox.highlightedIndex === index
    }

    popup: Popup {
        y: languageComboBox.height - 1
        width: languageComboBox.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
            implicitHeight: contentHeight
            clip: true
            model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
            currentIndex: languageComboBox.highlightedIndex
            boundsBehavior: Flickable.StopAtBounds
        }
    }
    model: ListModel {
        // 这里有用于更改图像源和其他内容的元素数据
    }

    onActivated: {
        // 当激活时执行一些操作
    }
}

从我理解的情况来看,问题可能出在PopupListView上。我完全不知道如何解决它。我尝试了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:

ComboBox {
                Component.onCompleted: {
                    //Some actions with index here
                }

                id: languageComboBox

                contentItem: Image {
                    id: countryFlag

                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    horizontalAlignment: Image.AlignLeft
                    smooth: false
                    antialiasing: false
                    sourceSize: Qt.size(40, 20)
                    fillMode: Image.Pad
                }


                delegate: ItemDelegate {
                    contentItem: Image {
                        id: currentFlag

                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        horizontalAlignment: Image.AlignLeft
                        sourceSize: Qt.size(40, 20)
                        smooth: false
                        antialiasing: false
                        opacity: 1.0
                        fillMode: Image.Pad
                        source: imgSource
                    }
                    highlighted: languageComboBox.highlightedIndex === index
                }

                popup: Popup {
                    y: languageComboBox.height - 1
                    width: languageComboBox.width
                    implicitHeight: contentItem.implicitHeight
                    padding: 1

                    contentItem: ListView {
                        implicitHeight: contentHeight
                        clip: true
                        model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
                        currentIndex: languageComboBox.highlightedIndex
                        boundsBehavior: Flickable.StopAtBounds

                    }
                }
                model: ListModel {
                    // There is data in elements I use to change image source and other 
                }

                onActivated : {
                    // Some actions on activated
                }
            }

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

因此,您的弹出窗口将如下所示:

popup: Popup {
    y: languageComboBox.height - 1
    implicitWidth: languageComboBox.width
    implicitHeight: contentItem.implicitHeight
    padding: 1

    contentItem: ListView {
        implicitHeight: contentHeight
        clip: true
        anchors.fill: parent
        model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
        currentIndex: languageComboBox.highlightedIndex
        boundsBehavior: Flickable.StopAtBounds
    }
}
英文:

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

So your popup would look like this:

popup: Popup {
    y: languageComboBox.height - 1
    implicitWidth: languageComboBox.width
    implicitHeight: contentItem.implicitHeight
    padding: 1

    contentItem: ListView {
        implicitHeight: contentHeight
        clip: true
        anchors.fill: parent
        model: languageComboBox.popup.visible ? languageComboBox.delegateModel : null
        currentIndex: languageComboBox.highlightedIndex
        boundsBehavior: Flickable.StopAtBounds
    }
}

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

发表评论

匿名网友

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

确定