autoExclusive property not working for custom Component
-
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 aTabButton
within my customSideBar
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 ofSideBarButton
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 theButtonGroup
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.