Question

我正在构建自己的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没有圆角，因为页眉和页脚与对话框Rectangle重叠。我想知道如何避免这种情况。

提前致谢！

Answer 1

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

Answer 2

在下面的代码中，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。

Dialog QtQuick 1.1圆角

2 个答案: