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 Updated to NodeBB v4.3 + New Features

autoExclusive property not working for custom Component

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmltabbuttonautoexclusive
1 Posts 1 Posters 199 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.
  • S Offline
    S Offline
    Saviz
    wrote on 4 Feb 2024, 04:52 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

    1/1

    4 Feb 2024, 04:52

    • Login

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