对话框 QtQuick 1.1 圆角答案

【问题标题】：Dialog QtQuick 1.1 rounded corners对话框 QtQuick 1.1 圆角
【发布时间】：2014-08-22 06:36:51
【问题描述】：

我正在构建自己的 QML 对话框。因此我想做一个页眉、内容和页脚项目。对话框应该有圆角（Rectangle.radius），但页眉/页脚应该是一个普通的矩形。

这是我的代码：

    Rectangle {
    width: 360
    height: 360
    Rectangle {
        id: dialog
        anchors.centerIn: parent
        width: 200
        height: 300
        radius: 20
        border.color: "gainsboro"

        Rectangle {
            id: header
            width: dialog.width
            height: 50
            border.color: "red"

            Text {
                anchors.centerIn: parent
                text: "HEADER"
            }
        }

        Rectangle {
            id: footer
            anchors.bottom: dialog.bottom
            width: dialog.width
            height: 50
            border.color: "green"

            Text {
                anchors.centerIn: parent
                text: "FOOTER"
            }
        }
    }
}

问题是，对话框没有圆角，因为页眉和页脚与对话框矩形重叠。我想知道如何避免这种情况。

提前致谢！

【问题讨论】：

您是否考虑保留一些顶部和底部边距？
我已经尝试了边距，但是矩形的重叠或间隙区域总是存在问题。

标签： dialog qml rounded-corners

【解决方案1】：

在下面的代码中，headerContent 和 fooderContent 将包含所有页眉和页脚内容。

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    color: "black"
    width: 450
    height: 600

    Item {
        id: dialog
        anchors.centerIn: parent
        width: 200
        height: 300

        Rectangle {
            id: header
            width: dialog.width
            height: 50 * 2
            anchors.top: parent.top
            radius: 20
            border.color: "red"

            Item {
                id: headerContent
                width: parent.width
                height: parent.height / 2
                anchors.top: parent.top

                Text {
                    anchors.centerIn: parent
                    text: "HEADER"
                }
            }
        }

        Rectangle {
            id: footer
            width: dialog.width
            height: 50 * 2
            anchors.bottom: parent.bottom
            radius: 20
            border.color: "green"

            Item {
                id: footerContent
                width: parent.width
                height: parent.height / 2
                anchors.bottom: parent.bottom

                Text {
                    anchors.centerIn: parent
                    text: "FOOTER"
                }
            }
        }

        Rectangle {
            width: parent.width
            anchors.top: header.verticalCenter
            anchors.bottom: footer.verticalCenter
            border.color: "gainsboro"
        }
    }
}

如果这仍然不是您想要的，您可能需要使用Canvas。

【讨论】：

【解决方案2】：

不要创建dialog 的页眉和页脚子项，而是将它们设为兄弟并将页眉和页脚z 属性设置为低于主矩形

【讨论】：

如果这样做，我将无法访问（单击）页眉和页脚项目，这是对话框矩形重叠的原因。
更改它们的锚点 -> 页眉 anchors.bottom:dialog.top 和页脚 anchors.top:dialog.bottom
当我这样做时，我的对话框的角不是圆的。
有没有办法只圆一个矩形的两个角？ - 我发现，我可以使用两个BorderImages 作为页眉和页脚项目。顶部带有圆角的页眉图像和页脚的镜像版本。