如何在嵌套Item中的根ApplicationWindow中添加Popup？

Question

我想创建一个涵盖整个根Popup modal的ApplicationWindow，但我想在小工具容器中实例化这个Popup我将会深入嵌套在QML层次结构中。不幸的是，实例化Popup不是ApplicationWindow的直接子项并且滚动出视图不会居中并覆盖ApplicationWindow。

在下面的代码中，我已经在孩子Popup中实例化Item，但我无法弄清楚如何让它在视口中居中：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
  id: root;
  visible: true
  width: 100
  height: 150

  Flickable {
    id: flickable;
    contentHeight: col_layout.height;
    anchors.fill: parent;
    ColumnLayout {
      id: col_layout;
      Rectangle {color:'green'; width:100; height: 100}
      Rectangle {color:'red';   width:100; height: 100;
        Popup{
          id: popup;
          modal: true;
          visible: true;
          Rectangle{ color:'blue'; width:200; height: 200; }
        }
      }
    }
    MouseArea {
      anchors.fill: parent;
      onClicked: {
        popup.open();
        popup.visible = true;
      }
    }
  }
}

这会产生（蓝色Rectangle是模态内容）：

我是否必须在Popup的全局范围内放置ApplicationWindow，或者是否有某种方法来实例化和控制某些子Popup或模块中的Item ？

我已尝试将parent的{​​{1}}属性设置为Popup无效。我真的很想避免将每个可以设想的弹出窗口都插入根root。

Answer 1

您无法将Popup的父级设置为root，因为root不是Item - 类型。因此，它不能是parent。

但您可以将其设为root.contentItem。

由于您可能会在其他某个文件中声明Popup，因此可能会影响id: root，我会投票支持使用附加属性ApplicationWindow，这是可用的，如果你使用它。

Popup {
    id: popup;
    modal: true;
    visible: true;
    parent: ApplicationWindow.contentItem // This will do the trick
    Rectangle{ color:'blue'; width:200; height: 200; }
}

Answer 2

Documentation example 显示将Popup变为ApplicationWindow.overlay