ComboBox 组件如何确定弹出窗口是否需要超出控制范围？

Question

我已经通过以下代码看到了这一点：

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，弹出窗口将显示在控件上方（因为其下方空间不足）。我想知道是哪个信号或变量产生了这种自动行为，以便我可以捕获它并触发不同的操作。

Answer 1

我不确定我是否完全理解这个问题，但希望这能回答它。

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

model: control.popup.visible ? control.delegateModel : null

"如果弹出可见，设置模型等于委托模型。否则设置弹出模型为空"

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

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

---

您好，谢谢您的回答！基本上我需要做的是与 弹出 y 坐标。更具体地说，评估要分配的条件 popup 的 y 属性，取决于还剩多少空间可以打开 它在控制之下......像这样：popup.y = some_condition？ control.height - 1 : popup.implicitHeight + 1 QML 已经有办法了 要知道空间是否足够...然后重新调整弹出窗口 y 坐标。我想知道哪个内部机制处理这个问题。

想到了三种解决方法：

• Use Layouts
• Use Component attributes/member data
• Use anchors

布局

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

组件属性/成员数据

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

popup.y = appWindow.y - componentWindow.y
or
popup.y = doMath(some property var of component X)

锚点

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

Anchors.top = myRect.bottom

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