QtQuick 按钮显示在对话框之外答案

【问题标题】：QtQuick button shows outside of dialogQtQuick 按钮显示在对话框之外
【发布时间】：2020-06-09 20:34:03
【问题描述】：

我正在尝试在 QtQuick 中创建一个可自定义的单按钮错误消息对话框，但是当我打开对话框时，“Ok”按钮会显示在其外部：

看起来像这样

当我再次打开对话框时，它正常工作，按钮显示在正确的位置。

这是一个最小的工作示例：

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4

Window {
visible: true
width: 640
height: 480

   Button {
        text: "Open Dialog"
        onClicked: {
            dialog.show("This text can be customized.")
      }

    Dialog {

        id: dialog
        standardButtons: Dialog.Ok
        title: "Error"
        modal: true

        function show(txt) {
            label.text = txt
            open()
        }

        Label {
            id: label
        }
    }
  }
}

我使用 Qt 5.11.3 和 QtQuick 2.11，构建目标是 Desktop GCC 64 位。

这是一个错误吗？我究竟做错了什么？

【问题讨论】：

您的示例是否重现了错误？因为按钮对我来说看起来不错！
哦，这很奇怪。我刚刚在 QtCreator 中创建了一个新的“Qt Quick application - Empty”，将示例粘贴到 main.qml 中，错误就在那里。不过，我正在 Linux 上运行该应用程序。我也在安卓上测试过，bug也在那里。你在哪个操作系统上测试了@luffy？
另外，这只发生在 Qt 5.11.3 中，我刚刚在 Qt 5.14 中尝试过，该错误不存在（使用相同版本的 QtQuick 和 QtQuick.Controls！）跨度>
我在 Windows 10 上进行了测试。我将尝试在 Linux 上进行测试。我在虚拟机中运行 Ubuntu 18
Window里面的Item是什么意思？这个元素在这里没有任何意义，而且由于它没有大小，它可能导致嵌套项的错误定位。此外，Button 应该位于 (0,0)，因为您没有为它定义任何位置。因此，您的示例代码看起来与您提供的图像不匹配。

标签： qt qml qt-quick qtquickcontrols2

【解决方案1】：

这似乎是 Qt 5.11.3 或我在 Linux 上安装它的错误。

这是我使用的解决方法，基本上是从常规弹出窗口重新创建对话框：

import QtQuick 2.0
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3

Popup {
    x: (parent.width-width)/2
    y: (parent.height-height)/2
    modal: true
    closePolicy: Popup.NoAutoClose

    property var title: "Error"
    property var msg: ""

    function show(message) {
        msg = message
        open()
    }

    ColumnLayout {
        spacing: 30

        Label {
            Layout.alignment: Qt.AlignLeft
            Layout.preferredHeight: 5

            font.bold: true
            text: title

        }

        Label {
           text: msg
        }

        Button {
            Layout.alignment: Qt.AlignRight
            text: "Ok"
            onClicked: {
                close()
            }
        }

    }
}

【讨论】：