首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ComboBox组件如何确定弹出窗口是否需要处于控制之上?

ComboBox组件如何确定弹出窗口是否需要处于控制之上?
EN

Stack Overflow用户
提问于 2021-10-06 11:50:39
回答 1查看 38关注 0票数 0

我在下面的代码中看到了这一点:

代码语言:javascript
运行
复制
Window {
    width: 440
    height: 280
    visible: true
    
    ComboBox {
        id: control
        model: ["First", "Second", "Third"]
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10

        delegate: ItemDelegate {
            width: control.width
            contentItem: Text {
                text: modelData
                color: "#21be2b"
                font: control.font
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }
            highlighted: control.highlightedIndex === index
        }

        indicator: Canvas {
            id: canvas
            x: control.width - width - control.rightPadding
            y: control.topPadding + (control.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"

            Connections {
                target: control
                function onPressedChanged() { canvas.requestPaint(); }
            }

            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
                context.fill();
            }
        }

        contentItem: Text {
            leftPadding: 0
            rightPadding: control.indicator.width + control.spacing

            text: control.displayText
            font: control.font
            color: control.pressed ? "#17a81a" : "#21be2b"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            border.color: control.pressed ? "#17a81a" : "#21be2b"
            border.width: control.visualFocus ? 2 : 1
            radius: 2
        }

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

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex

                ScrollIndicator.vertical: ScrollIndicator { }
            }

            background: Rectangle {
                border.color: "#21be2b"
                radius: 2
            }
        }
    }
}

(窗口底部的Qt文档中的ComboBox示例)

如果你点击ComboBox,弹出窗口会显示在控件上方(因为下面的空间不足)。我想知道是哪个信号或变量造成了这种自动行为,这样我就可以捕获它并触发不同的操作。

EN

回答 1

Stack Overflow用户

发布于 2021-10-06 12:30:35

我不确定我是否完全理解了这个问题,但希望这能解决这个问题。

popup中的代码使用三元来导航popup可见性。See this post regarding QML conditional bindings (ternary operators)

代码语言:javascript
运行
复制
model: control.popup.visible ? control.delegateModel : null

“如果弹出窗口可见,则将model设置为委托model。否则,将popup model设置为null”

让我们来讨论一下信号和插槽。如果您想轻松查看qml对象类型上的所有信号/插槽,请在块中输入' on‘。然后从那里查看所有的代码填充。您也可以查看QT文档。

如果我要实现这一点,我可能会用不同的方式使用弹出信号: open(),close()。它将添加更多的代码行,但提高了可读性,并利用了信号/槽机制。当前的方法在QML组件之间创建了非常紧密的耦合。

嘿,谢谢你的回答!基本上我需要做的是使用弹出式y坐标。更具体地说,根据控件下面还有多少空间来打开弹出式窗口,评估一个条件以分配popup的y属性。像这样: popup.y = some_condition?control.height -1: popup.implicitHeight +1QML已经有了一些方法来知道空间是否足够...然后重新调整弹出窗口的y坐标。我想知道是哪种内部机制处理这个问题。

有三种方法可以解决这个问题:

布局

将所有组件包装在列布局中。让您的列布局填充这两个组件的组合空间。然后可以设置每个组件的最小宽度/高度、首选宽度/高度和最大宽度/高度。此外,您还可以为一个组件设置首选大小。然后调用Layout.fill width/column让它自动占用剩余的空间。

组件属性/成员数据

使用所有其他组件以数学方式计算.y数据。

代码语言:javascript
运行
复制
popup.y = appWindow.y - componentWindow.y
or
popup.y = doMath(some property var of component X)

锚点

将弹出组件锚定到另一个组件。所以假设你想在某个矩形组件下面弹出一个窗口。

代码语言:javascript
运行
复制
Anchors.top = myRect.bottom

我非常喜欢使用嵌套布局来创建动态屏幕,这些动态屏幕总是以我期望的方式填充空间。它阻止了紧密耦合的组件,并让Qt来做繁重的工作。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69465181

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档