Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. autoExclusive property not working for custom Component
Forum Update on Tuesday, May 27th 2025

autoExclusive property not working for custom Component

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmltabbuttonautoexclusive
1 Posts 1 Posters 189 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • SavizS Offline
    SavizS Offline
    Saviz
    wrote on last edited by
    #1

    Firstly, I'd like to provide information about the project setup and statistics:

    • Qt version: 6.5 LTS
    • Operating System: Windows 10 64-bit
    • Compiler: MinGW_64_bit-Debug

    I am currently working on implementing a sidebar menu that allows me to select a tab button option to navigate to a specific page. I've developed a custom component type called SideBarButton, intended to function as a TabButton within my custom SideBar type. Here is the code for this custom component:

    import QtQuick
    import QtQuick.Controls.Basic
    import QtQuick.Layouts
    
    Item {
        id: root
    
        property alias text: tabButton.text
        property alias autoExclusive: tabButton.autoExclusive
        property alias checked: tabButton.checked
    
        signal buttonClicked
    
        TabButton {
            id: tabButton
    
            text: qsTr("")
            checkable: true
            autoExclusive: true
            checked: false
    
            width: root.width
            height: root.height
    
            contentItem: RowLayout {
    
                Text {
                    Layout.fillHeight: true
                    text: tabButton.text
                    font: tabButton.font
                    horizontalAlignment : Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
    
                    color: {
                        if(tabButton.checked) {
                            "#3c5d84"
                        }
    
                        else {
                            "#595959"
                        }
                    }
                }
    
                Item {
                    id: item_Spacer
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
    
            background: Rectangle {
                color: {
                    if(tabButton.checked) {
                        "#cce2f3"
                    }
    
                    else if(tabButton.hovered) {
                        "whitesmoke"
                    }
    
                    else {
                        "#e4e4e4"
                    }
                }
            }
    
            onClicked: {
                buttonClicked()
            }
        }
    }
    

    Below is my SideBar component, which generates several instances of SideBarButton for illustrative purposes:

    import QtQuick
    import QtQuick.Controls.Basic
    import QtQuick.Layouts
    
    Item {
        id: root
    
        ButtonGroup {
            exclusive: true
            buttons: columnLayout.children
        }
    
        Rectangle {
            id: rectangle_Background
    
            width: root.width
            height: root.height
    
            color: black
    
            ColumnLayout {
                id: columnLayout
                anchors.fill: parent
                clip: true
                spacing: 0
    
                SideBarButton {
                    text: "Photo"
    
                    autoExclusive: true
                    checked: true
    
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                }
    
                SideBarButton {
                    text: "Media Player"
    
                    autoExclusive: true
    
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                }
    
                SideBarButton {
                    text: "Media Recorder"
    
                    autoExclusive: true
    
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                }
    
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
    
                SideBarButton {
                    text: "Credits"
    
                    autoExclusive: true
    
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                }
            }
        }
    }
    

    I am facing an issue where, despite trying various methods and solutions, the buttons do not function collectively as a group. The desired behavior is that when one button is checked, all others should be unchecked. I attempted to address this by setting the autoExclusive property to true, which according to the documentation will make the buttons with the same parent work as a group. I also attempted to use a button manager like the ButtonGroup type, which again stated by the documentation will attepmt to manage them as a group. However, none of these approaches seem to produce the intended outcome. I am currently unsure about the source of the problem and would greatly appreciate any assistance.

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved