Dialog QtQuick 1.1 rounded corners

Question

I'm building my own QML Dialog. Therefore I want to make a header, content and footer item. The Dialog should have rounded corners (Rectangle.radius) but the Header/Footer should be a normal Rectangle.

Heres my code:

    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"
            }
        }
    }
}

The problem is, that the Dialog does not have rounded corners, because the header and footer are overlapping the dialog Rectangle. I would like to know how to avoid that.

Thanks in advance!

I already tried margins, but there's always the problem with overlapping or gap areas of the rectangles. — SGbo

Mitch Mitch · Accepted Answer · 2014-08-22T14:37:31

In the code below, headerContent and fooderContent would contain all of the header and footer contents.

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"
        }
    }
}

If this is still not what you're looking for, you may want to use Canvas.

Dialog QtQuick 1.1 rounded corners

2 Answers