Active indicator on custom menu

[ParkerInt64]

So I've been tring to use qml to create a Material3 like NavigationRail.

I've tried to use the FocusScope to act like a active indicator, represent which icon I selected. This works well if I only operate in the menu area, howerer once I clicked the Button that is not within its area, the indicator I wrote lose the focus.

Is there a better way to handle such case ?

Here are some of the qml files.

NavigationRail.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

/*
*  @brief: this is the navigation rail
*
*/

Pane {
    id: navPaneContainer
    width: 80
    height: 600
    padding: 0

    ColumnLayout {
        id: appIconLayout
        focus: true

        spacing: 12

        Item {
            width: 24
            height: 24

            Layout.alignment: Qt.AlignTop
            Layout.leftMargin: 28
            Layout.topMargin: 20
            Layout.bottomMargin: 30

            Image {
                id: menu
                width: 24
                height: 24
                anchors.centerIn: parent
                source: "../../assets/material-icons/menu.svg"
                fillMode: Image.PreserveAspectFit
                smooth: true
                mipmap: true

                ToolTip.visible: menuMA.containsMouse
                ToolTip.text: qsTr("Menu")


                MouseArea {
                    id: menuMA
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    hoverEnabled: true
                }
            }
        }

        AppIcons {
            id: home
            source: "\ue88a"
            text: qsTr("Home")
            focus: true

        }

        AppIcons {
            id: settings
            source: "\ue8b8"
            text: qsTr("Settings")
        }
    }
}

AppIcons.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Material.impl

/*
 * @brief: sidebar icons
 *         the material3 style
*/

Item {
    id: iconContainer
    width: 80
    height: 56

    property alias source: iconText.text
    property alias text: iconLabel.text
    property alias textColor: iconLabel.color
    property alias color: bgRect.color


    FocusScope {
        id: iconScope
        width: parent.width
        height: parent.height
        focus: true

        ColumnLayout {
            id: iconLayout

            anchors.fill: parent

            spacing: 4

            Rectangle {
                id: bgRect
                width: 56
                height: 32
                radius: 16
                Layout.alignment: Qt.AlignCenter
                color: "transparent"

                Rectangle{
                    id: hoverRect
                    anchors.fill: parent
                    color: "transparent"
                    radius: 16
                    z: -5
                    state: "mouseOut"
                }

                Ripple {
                    id: ripple
                    width: bgRect.width
                    height: bgRect.height
                    anchor: bgRect
                    clipRadius: parent.radius
                    color: "#60000000"
                    z: -20
                    pressed: iconMouseArea.pressed
                    active: enabled && (iconMouseArea.pressed)
                }

                Text {
                    id: iconText
                    anchors.centerIn: parent
                    font.family: m3icons.font.family
                    font.weight: m3icons.font.weight
                    font.styleName: m3icons.font.styleName
                    font.pixelSize: 24
                }

            }

            Text {
                id: iconLabel
                Layout.alignment: Qt.AlignHCenter
                lineHeight: 16
                font.pixelSize: 12
                font.weight: 500
            }
        }
    }

    MouseArea {
        id: iconMouseArea
        anchors.fill: parent
        focus: true
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked:  {
            iconLayout.forceActiveFocus()
        }
    }



    states: [
        State {
            name: "active"
            when: iconLayout.activeFocus
            PropertyChanges {
                target: bgRect
                color: "#E8DEF8"
            }

            PropertyChanges {
                target: iconText
                scale: 1.2
            }

        },

        State {
            name: "hover"
            when: iconMouseArea.containsMouse
            PropertyChanges {
                target: hoverRect
                color: "#CECECE"

            }
        }    ]

    transitions: Transition {

            NumberAnimation {
                properties: "scale"
                duration: 200
            }
    }

    // Load the material icon font
    FontLoader {
        id: m3icons
        source: "../../assets/fonts/material-icons.ttf"
    }
}

Note: I also tried to set the Button 's focusPolicy to Qt.NoFocus. And this could work. But in that case I would have to change lots of components' focusPolicy.

[ParkerInt64]

So finally, focusScope doesn't help. Simple ListView solve the problem. Not sure what I am thinking at the start...

[ParkerInt64]

So what's wrong with the images I upload ? :(

[ParkerInt64]

So finally, focusScope doesn't help. Simple ListView solve the problem. Not sure what I am thinking at the start...