Colored rectangle

[GrahamLa]

Hi
Is it possible to color parts of a rectangle with different colors?

[JasmineSethi]

@GrahamLa yes it is possible. But can you explain what exactly you want?

[GrahamLa]

@JasmineSethi
Hi
I need a control that looks like the image below.
Each area is clicklable and change color

[JasmineSethi]

@GrahamLa check if this can slove ypur problem. Also adjust width,height, radius as u want.

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
id: appWindow
visible: true
width: 500
height: 600

Rectangle
{
    width: parent.width/2
    height: parent.height/10
    color: "black"
    anchors.centerIn: parent
    radius: 10
    Rectangle
    {
        id: r1
        width: parent.width/3
        height: parent.height
        color: "transparent"
        radius: 5
        Text {
            id: name
            text: qsTr("CEP")
            color: "white"
            font.pixelSize: 20
            anchors.centerIn: parent
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                r1.color = "yellow"
                r2.color = "transparent"
                r3.color = "transparent"
            }
        }
    }
    Rectangle
    {
        id: r2
        width: parent.width/3
        height: parent.height
        color: "transparent"
        radius: 5
        anchors.left: r1.right
        Text {
            //id: name
            text: qsTr("DEP")
            color: "white"
            font.pixelSize: 20
            anchors.centerIn: parent
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                r2.color = "yellow"
                r1.color = "transparent"
                r3.color = "transparent"
            }
        }
    }
    Rectangle
    {
        id: r3
        width: parent.width/3
        height: parent.height
        color: "transparent"
        radius: 5
        anchors.left: r2.right
        Text {
            //id: name
            text: qsTr("PEP")
            color: "white"
            font.pixelSize: 20
            anchors.centerIn: parent
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                r3.color = "yellow"
                r2.color = "transparent"
                r1.color = "transparent"
            }
        }
    }
}

}

[ODБOï]

@GrahamLa
You can use clip property for that

   Item {          
            clip: true
            Rectangle {
                anchors.fill: parent
                anchors.rightMargin: -radius
                radius: 10
            }
        }

example :

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

Window
{
    id: appWindow
    visible: true
    width: 500
    height: 600

    property int currentSelected : 0
    property string defaultColor: "grey"

    RowLayout{
        width: parent.width*0.8
        anchors.horizontalCenter: parent.horizontalCenter
        height: 90

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            Rectangle {
                anchors.fill: parent
                anchors.rightMargin: -radius
                radius: 10
                color: currentSelected == 0 ? "red" : defaultColor
                MouseArea{
                    anchors.fill: parent
                    onClicked: currentSelected=0
                }
            }
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: currentSelected == 1 ? "green" : defaultColor
            MouseArea{
                anchors.fill: parent
                onClicked: currentSelected=1
            }
        }
        Item {
            clip: true
            Layout.fillWidth: true
            Layout.fillHeight: true
            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: -radius
                radius: 10
                color: currentSelected == 2 ? "blue" : defaultColor
                opacity: 0.5
                MouseArea{
                    anchors.fill: parent
                    onClicked: currentSelected=2
                }
            }
        }
    }
}

[GrahamLa]

@JasmineSethi
Thank you so much it worked

[JasmineSethi]

@GrahamLa mark your question as solved :)