Awesome Flat QML UI

 

A control that sets the position of the rounded corners of the rectangle.

file import

Attributes

• radiusCorners: int

describe

• By setting a radiusCorners value, you can control the direction of the rounded corners.

RoundRectangle {
    width: 100; height: 50
    color: "lightblue"
    radius: 10
    radiusCorners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom }

example

properties document

• radiusCorners: int Sets the fillet position.
• Available values ​​for radiusCorners:

constant	value	describe
Qt. AlignLeft	0x0001	align to left edge
Qt. AlignRight	0x0002	align to right edge
Qt. AlignTop	0x0020	align to top
Qt. AlignBottom	0x0040	align to bottom

• Combination value ranges available for radiusCorners:

source code

Main.qml 

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("https://dabreha.blogspot.com/")
    property int roundRectangleWidth: 100
    property int roundRectangleHeight: 60
    property int roundRectangleRadius: 15


    Rectangle {
        anchors.fill: parent


        Grid {
            anchors.centerIn: parent
            columns: 3
            rows: 5
            columnSpacing: 60
            rowSpacing: 30


            /**
             * Method 1 :
             */


            /*The effect is equivalent to Rectangle */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#0984e3"
                radius: roundRectangleRadius
                corners: 0
            }


            /* Square corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#0984e3"
                radius: roundRectangleRadius
                corners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom
            }


            /* top left, top right rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#e17055"
                radius: roundRectangleRadius
                corners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop
            }


            /* upper left, lower left rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#00cec9"
                radius: roundRectangleRadius
                corners:  Qt.AlignLeft | Qt.AlignTop | Qt.AlignBottom
            }


            /*top right, bottom right rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#00cec9"
                radius: roundRectangleRadius
                corners:  Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom
            }


            /* bottom left, bottom right rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#e17055"
                radius: roundRectangleRadius
                corners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignBottom
            }


            /**
             * Method 2:
             * Specify a fillet using an array method
             */


            /* top left fillet */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#27ae60"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignLeft | Qt.AlignTop
                ]
            }


            /* bottom left fillet */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#9b59b6"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignLeft | Qt.AlignBottom
                ]
            }
            /* top right fillet */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#f1c40f"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignRight | Qt.AlignTop
                ]
            }


            /*bottom right fillet */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#34495e"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignRight | Qt.AlignBottom
                ]
            }


            /* top left, top right, bottom left rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#27ae60"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignLeft | Qt.AlignTop,
                    Qt.AlignRight | Qt.AlignTop,
                    Qt.AlignLeft | Qt.AlignBottom
                ]
            }


            /* upper left, upper right, lower right rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#9b59b6"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignLeft | Qt.AlignTop,
                    Qt.AlignRight | Qt.AlignTop,
                    Qt.AlignRight | Qt.AlignBottom
                ]
            }
            /* bottom left, top right, bottom right rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#f1c40f"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignLeft | Qt.AlignBottom,
                    Qt.AlignRight | Qt.AlignTop,
                    Qt.AlignRight | Qt.AlignBottom
                ]
            }


            /* upper left, lower left, lower right rounded corners */
            RoundRectangle {
                width: roundRectangleWidth; height: roundRectangleHeight
                color: "#34495e"
                radius: roundRectangleRadius
                corners: [
                    Qt.AlignLeft | Qt.AlignTop,
                    Qt.AlignLeft | Qt.AlignBottom,
                    Qt.AlignRight | Qt.AlignBottom
                ]
            }


        }
    }
}

 

RoundRectangle.qml

import QtQuick 2.0
Rectangle {
    id: root
    property int radiusCorners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom /* Default: */
    /*
                            Qt.AlignLeft |      Qt.AlignLeft |      Qt.AlignRight |     Qt.AlignLeft |      Qt.AlignLeft |
                            Qt.AlignRight |     Qt.AlignTop |       Qt.AlignTop |       Qt.AlignRight |     Qt.AlignRight |
              None:0        Qt.AlignTop |       Qt.AlignBottom      Qt.AlignBottom      Qt.AlignTop         Qt.AlignBottom
                            Qt.AlignBottom
        *****************     *************       ***************   ***************       *************     *****************
        *               *    *             *     *              *   *              *     *             *    *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *    *             *     *              *   *              *    *               *    *             *
        *****************     *************       ***************   ***************     *****************     *************
    */

    Repeater {
        model: [ {
                x: 0,
                y: 0,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: 0,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: 0,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignBottom),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignBottom),
                radius: root.radius
            } ]

        Rectangle {
            x: modelData.x; y: modelData.y
            width: modelData.radius; height: width
            visible: !modelData.visible
            color: parent.color
        }
    }

    QtObject {
        id: internal

        function aligns(direction) {
            return (root.radiusCorners & direction) === direction
        }
    }
}