javascript - 如何在 QML 的弹出窗口中排列项目？

Question

https://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html

这是我尝试过的。我希望弹出窗口的矩形的内部矩形填满整个区域。左侧和顶部有一些间隙。

Window
{
    visible: true
    width: 1000
    height: 1000
    title: qsTr("Hello World")


    Rectangle
    {
        id: dot

        color:"blue"; radius: 100
        height: 33
        width:  33

        MouseArea
        {
            anchors.fill: parent
            onClicked: popup.open()
        }
    }

    Popup
    {
        id: popup;
        width: 114
        height: 88
        x: 100; y: 45
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
       Rectangle
       {
           color: "red";
           anchors.fill: parent

           ColumnLayout
           {anchors.fill: parent
               Rectangle{ height: 30; width: 100; border.color: "black"}
               Rectangle{ height: 30; width: 100; border.color: "black"}
               Rectangle{ height: 30; width: 100; border.color: "black"}
           }
       }
    }

标签： javascriptqtqml

Answer 1

您需要注意Popup padding, ColumnLayout spacing。

间隙是由弹出窗口引起的padding……如果您不想padding将其设置为 0。

但即使是 0 padding，

您将在右侧得到间隙 ..因为popup width(114) 由弹出窗口的 Rectangle 继承，但内部矩形设置为固定width100 .. 因此出现 14 的间隙。

如果你修复它..你仍然必须考虑Columnlayout间距..默认情况下不是0，这可能导致最后一个矩形延伸到Popup的矩形下方，因此clip可以使用矩形；

例如，此代码按预期绘制矩形。

Popup
{
    id: popup;
    padding: 0
    width: 114
    height: 88
    x: 100; y: 45
    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
   Rectangle
   {
       color: "red";
       anchors.fill: parent

       ColumnLayout
       {
           anchors.fill: parent
           Rectangle{ height:30; width: popup.width; border.color: "black"}
           Rectangle{ height: 30; width: popup.width; border.color: "black"}
           Rectangle{ height: 30; width: popup.width; border.color: "black"}
       }
   }
}

如果我想概括popup和Columnlayout默认值，我会考虑使用contentitem它给出弹出窗口的矩形尺寸：例如：

Popup
{
    id: popup;
    width: 114
    height: 29 * 3
    x: 100; y: 45
    focus: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
   Rectangle
   {
       color: "red";
       anchors.fill: parent

       ColumnLayout
       {
           anchors.fill: parent
            Repeater{
                id: repeater
                model: 3
                Rectangle{ height: (popup.contentItem.height - parent.spacing*repeater.count)/repeater.count; width: popup.contentItem.width; border.color: "black"}
            }
       }
   }
}