Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Creating A Sidebar Using QML



  • Hi,
    I am trying to create a sidebar in QML for fun. I really like the one that QC uses. So I tried to make it. I still haven't added any icons or text to my buttons.

    Here is my QML code:

    main.qml:

    import QtQuick 2.15
    import QtQuick.Controls 2.5
    import QtQuick.Window 2.15
    
    ApplicationWindow
    {
        id: root
        width: 640
        height: 480
        visible: true
        title: qsTr("Inum")
    
        Rectangle
        {
            id: sidebarBackground
            visible: true
            width: 80
            height: Screen.height
            color: "#E4E4E4"
        }
    
        Column
        {
            anchors.fill: sidebarBackground
            SideButton{}
            SideButton{}
            SideButton{}
        }
    }
    

    SideButton.qml:

    import QtQuick 2.15
    
    // A custom button for the sidebar
    
    Rectangle
    {
        width: 80
        height: 80
        color: "#E4E4E4"
    
        Rectangle
        {
            id: left_Border
            visible: false
            width: 3
            height: 80
            color: "#5D5F61"
        }
    
        MouseArea
        {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
    
            onEntered:
            {
                parent.color = "#CDCDCD"
            }
    
            onClicked:
            {
                parent.color = "#F6F6F6"
                left_Border.visible = true
            }
    
            onExited:
            {
                parent.color = "#E4E4E4"
                left_Border.visible = false
            }
        }
    }
    

    Here is a GIF showing the result:

    SideBar.gif

    As you can see it almost works. The issue is that after leaving the "MouseArea" the "onExited" method overwrites the "onClicked" method effect. I am stuck and I don't know what I can do about that because without this method I Can't undo the hover effect. I really want it to be more tab based like QC sidebar shown below:

    H8lQzEQPgD.gif

    Can anyone help me with this issue?



  • @Saviz said in Creating A Sidebar Using QML:

    As you can see it almost works. The issue is that after leaving the "MouseArea" the "onExited" method overwrites the "onClicked" method effect. I am stuck and I don't know what I can do about that because without this method I Can't undo the hover effect. I really want it to be more tab based like QC sidebar shown below:

    If you don't want to reset the click event when click is done then simply check if click is done:

    onExited:
    {
        if(! left_Border.visible)
            parent.color = "#E4E4E4"
    }
    


  • @KroMignon

    Sorry for bothering you again, unfortunately it did not work.

    Here is a GIF of what is happening:

    SideBarNew.gif

    Is there anything else that I can potentially do?



  • @Saviz said in Creating A Sidebar Using QML:

    Is there anything else that I can potentially do?

    I would suggest you to add ExclusiveGroup support to your SideButton component (cf. https://doc.qt.io/qt-5/qml-qtquick-controls-exclusivegroup.html#adding-support-to-exclusivegroup)

    import QtQuick 2.15
    
    // A custom button for the sidebar
    
    Rectangle
    {
        id: _rootItem
        
        implicitWidth: 80
        implicitHeight: 80
    
        // needed for exclusive group support
        property bool checked: false
        property ExclusiveGroup exclusiveGroup: null
        onExclusiveGroupChanged: {
            if (exclusiveGroup)
                exclusiveGroup.bindCheckable(_rootItem)
        }
        
        color: checked ? "#F6F6F6" : (mouseArea.hasHover ? "#CDCDCD" : "#E4E4E4")
    
        Rectangle {
            id: left_Border
            visible: _rootItem.checked
            width: 3
            height: _rootItem.height
            color: "#5D5F61"
        }
    
        MouseArea{
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            property bool hasHover: false
    
            onEntered: hasHover = true
            onExited: hasHover = false
            onClicked: _rootItem.checked = true;
        }
    }
    

    then in your main:

        Column
        {
            anchors.fill: sidebarBackground
            ExclusiveGroup { id: sideButton }
            SideButton { exclusiveGroup: sideButton }
            SideButton { exclusiveGroup: sideButton }
            SideButton { exclusiveGroup: sideButton }
        }
    


  • @Saviz said in Creating A Sidebar Using QML:

    ethod overwrites the "onClicked" method effect.

    here is a declarative way of implementing your Side Button, you might need adjust the behavior but this gives you the general idea.

    Tested here : https://qmlonline.kde.org/

    import QtQuick 2.7
    import QtQuick.Controls 2.3
    import QtQuick.Layouts 1.12
    
    Rectangle
    {
        width: 80
        height: 80
        
        property bool isSelected : false
        
        color: mouseArea.containsMouse && !isSelected ? "#CDCDCD" : isSelected ?  "#F6F6F6" : "#E4E4E4"
    
        Rectangle
        {
            id: left_Border
            visible: isSelected 
            width: 3
            height: 80
            color: "#5D5F61"
            
        }
         MouseArea
        {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: isSelected = !isSelected
        }
    }
    
    

    See also QML States

    Or Customiste existing QML Button



  • @ODБOï

    Unfortunately that did not work either, I am getting the same result as last time. It think @KroMignon is right, the reason why this is happening is because the buttons are not exclusive.

    Thank you for taking the time to read my question :)



  • @Saviz said in Creating A Sidebar Using QML:

    Unfortunately that did not work either,

    It was not supposed to fix any issue :) its is just a note. QML is a declarative language

    @Saviz said in Creating A Sidebar Using QML:

    It think @KroMignon is right, the reason why this is happening is because the buttons are not exclusive.

    yes, he is



  • @ODБOï

    Sorry my mistake :)


Log in to reply