Custom menu

[KiNgFrUiT]

I have a working custom menu component, items are highlighted on mouse-over and change colour to show the user's current selection.
My current code is given below. Im sure there is a more concise / generic way of handling this, any thoughts or suggestions on how to improve my QML are most welcome.

Menu.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
 
Item
{
    width: 100
    height: 650
 
    Column
    {
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20
 
        property int index: -1
 
        function setPage(i)
        {
            if(index != i)
            {
                index = i;
 
                if(index == 0)
                {
                    page0.selected = true;
                    page1.selected = false;
                    page2.selected = false;
                    page3.selected = false;
                }
 
                if(index == 1)
                {
                    page0.selected = false;
                    page1.selected = true;
                    page2.selected = false;
                    page3.selected = false;
                }
 
                if(index == 2)
                {
                    page0.selected = false;
                    page1.selected = false;
                    page2.selected = true;
                    page3.selected = false;
                }
 
                if(index == 3)
                {
                    page0.selected = false;
                    page1.selected = false;
                    page2.selected = false;
                    page3.selected = true;
                }
            }
        }
 
        MyButton
        {
            id: page0
            text: "A"
            onClicked: parent.setPage(0)
 
        }
 
        MyButton
        {
            id: page1
            text: "B"
            onClicked: parent.setPage(1)
        }
 
        MyButton
        {
            id: page2
            text: "C"
            onClicked: parent.setPage(2)
        }
 
        MyButton
        {
            id: page3
            text: "D"
            onClicked: parent.setPage(3)
        }
 
        Component.onCompleted: setPage(0)
    }
}

import QtQuick 2.4
import QtQuick.Controls 1.3

Item
{
    width: 100
    height: 650

    Column
    {
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20

        property int index: -1

        function setPage(i)
        {
            if(index != i)
            {
                index = i;

                if(index == 0)
                {
                    page0.selected = true;
                    page1.selected = false;
                    page2.selected = false;
                    page3.selected = false;
                }

                if(index == 1)
                {
                    page0.selected = false;
                    page1.selected = true;
                    page2.selected = false;
                    page3.selected = false;
                }

                if(index == 2)
                {
                    page0.selected = false;
                    page1.selected = false;
                    page2.selected = true;
                    page3.selected = false;
                }

                if(index == 3)
                {
                    page0.selected = false;
                    page1.selected = false;
                    page2.selected = false;
                    page3.selected = true;
                }
            }
        }

        MyButton
        {
            id: page0
            text: "A"
            onClicked: parent.setPage(0)

        }

        MyButton
        {
            id: page1
            text: "B"
            onClicked: parent.setPage(1)
        }

        MyButton
        {
            id: page2
            text: "C"
            onClicked: parent.setPage(2)
        }

        MyButton
        {
            id: page3
            text: "D"
            onClicked: parent.setPage(3)
        }

        Component.onCompleted: setPage(0)
    }
}

To copy to clipboard, switch view to plain text mode 

MyButton.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
 
Item {
    id: menuButton
 
    width:100
    height:100
 
    property string text: ""
    property bool selected: false
 
    signal clicked
 
    Rectangle {
        anchors.fill: parent
        color: selected == true ? "#008080" : "white"
        border.width: 4
        border.color: mouseArea.containsMouse ? "black" : "#007070"
    }
 
    Text {
        anchors.centerIn: parent
        text: parent.text
        color: selected == true ? "white" : "#008080"
        font.family: "Roboto-Medium"
        font.pointSize: 12
        font.weight: Font.Normal
        elide: Text.ElideRight
        width: parent.width
        horizontalAlignment: Text.AlignHCenter
        anchors.margins: 4
    }
 
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        Component.onCompleted: clicked.connect(menuButton.clicked)
    }
}

import QtQuick 2.4
import QtQuick.Controls 1.3

Item {
    id: menuButton

    width:100
    height:100

    property string text: ""
    property bool selected: false

    signal clicked

    Rectangle {
        anchors.fill: parent
        color: selected == true ? "#008080" : "white"
        border.width: 4
        border.color: mouseArea.containsMouse ? "black" : "#007070"
    }

    Text {
        anchors.centerIn: parent
        text: parent.text
        color: selected == true ? "white" : "#008080"
        font.family: "Roboto-Medium"
        font.pointSize: 12
        font.weight: Font.Normal
        elide: Text.ElideRight
        width: parent.width
        horizontalAlignment: Text.AlignHCenter
        anchors.margins: 4
    }

    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        Component.onCompleted: clicked.connect(menuButton.clicked)
    }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Your spaghetti if blocks are not the prettiest ones. You made your code totally imperative which is not necessary.

Your code can be rewritten as:

import QtQuick 2.4
import QtQuick.Controls 1.3
 
Item
{
    width: 100
    height: 650
 
    Column
    {
        id: col
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20
 
        property int index: -1
 
        function setPage(i)
        {
            col.index = i
        }
 
        MyButton
        {
            id: page0
            selected: col.index == 0
            text: "A"
            onClicked: parent.setPage(0)
 
        }
 
        MyButton
        {
            id: page1
            selected: col.index == 1
            text: "B"
            onClicked: parent.setPage(1)
        }
 
        MyButton
        {
            id: page2
            selected: col.index == 2
            text: "C"
            onClicked: parent.setPage(2)
        }
 
        MyButton
        {
            id: page3
            selected: col.index == 3
            text: "D"
            onClicked: parent.setPage(3)
        }
 
        Component.onCompleted: setPage(0)
    }
}

import QtQuick 2.4
import QtQuick.Controls 1.3

Item
{
    width: 100
    height: 650

    Column
    {
        id: col
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20

        property int index: -1

        function setPage(i)
        {
            col.index = i
        }

        MyButton
        {
            id: page0
            selected: col.index == 0
            text: "A"
            onClicked: parent.setPage(0)

        }

        MyButton
        {
            id: page1
            selected: col.index == 1
            text: "B"
            onClicked: parent.setPage(1)
        }

        MyButton
        {
            id: page2
            selected: col.index == 2
            text: "C"
            onClicked: parent.setPage(2)
        }

        MyButton
        {
            id: page3
            selected: col.index == 3
            text: "D"
            onClicked: parent.setPage(3)
        }

        Component.onCompleted: setPage(0)
    }
}

To copy to clipboard, switch view to plain text mode 

or even shorter:

import QtQuick 2.4
import QtQuick.Controls 1.3
 
Item
{
    width: 100
    height: 650
 
    Column
    {
        id: col
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20
 
        property int index: 0
 
        Repeater {
            model: [ "A", "B", "C", "D" ]
 
            MyButton
            {
                selected: col.index == index
                text: modelData
                onClicked: col.index = index
 
            }
    }
}

import QtQuick 2.4
import QtQuick.Controls 1.3

Item
{
    width: 100
    height: 650

    Column
    {
        id: col
        anchors.verticalCenter: parent.verticalCenter
        spacing: 20

        property int index: 0

        Repeater {
            model: [ "A", "B", "C", "D" ]

            MyButton
            {
                selected: col.index == index
                text: modelData
                onClicked: col.index = index
    
            }
    }
}

To copy to clipboard, switch view to plain text mode 

[KiNgFrUiT]

Thanks for your quick response. I really like your second method using the repeater, the code becomes very compact.