problem Qml TabBar
Unsolved
QML and Qt Quick
-
wrote on 23 Sept 2019, 07:28 last edited by cosmoff
Hello everyone,
I try to create a dynamic TabButton which change the color of the text in raspberry when I click on the tabButton, and the others tabButtons have their texts colors which should become white.
But in my code, every text from tabButton are raspberry, and nothing is happening when I click on the tabButton and I do not know why.
this is my code :
TabBar { id: tabBar currentIndex: swipeView.currentIndex property int memo :0 Repeater { id: specificTabs state: "NOT_SELECTED" model: [ "A", "B", "C"] delegate: TabButton{ id: idtabButton text: modelData width : 350 state: tabBar.memo === tabBar.currentIndex ? "SELECTED" : "NOT_SELECTED" contentItem: Text { id : textTabBar text: idtabButton.text color: graphicIdentity.white horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } background: Rectangle { id: backgroundTabBar implicitWidth: 100 implicitHeight: 40 border.color: idtabButton.down ? graphicIdentity.raspberry : "#444444" border.width: 1 radius: 2 color : "#444444" } onClicked: { if( tabBar.memo != tabBar.currentIndex ) { console.log("tabBar.currentIndex = " + tabBar.currentIndex) tabBar.memo = tabBar.currentIndex console.log("tabBar.memo = " + tabBar.memo) } } states: [ State { name: "NOT_SELECTED" PropertyChanges { target: textTabBar ; color : graphicIdentity.white } PropertyChanges { target: backgroundTabBar ; color : "#444444"} }, State { name: "SELECTED" PropertyChanges { target: textTabBar ; color : graphicIdentity.raspberry } PropertyChanges { target: backgroundTabBar ; color : "#222222" } } ] } } } SwipeView { id: swipeView interactive: false currentIndex: tabBar.currentIndex Repeater { id: specificPages model: [ "A.qml", "B.qml", "C.qml"] Loader { active: SwipeView.isCurrentItem source: modelData } } } }
do you have an idea of the problem ?
Thanks
-
wrote on 23 Sept 2019, 07:46 last edited by
Hi @cosmoff , i guess this is want what you want, please have a look at the sample code.
Sample Code:-
TabBar { id: tbar width: parent.width height: 40 Repeater { model: 4 delegate:TabButton { id: control text: index contentItem: Text { text: control.text font: control.font opacity: enabled ? 1.0 : 0.3 color: tbar.currentIndex ===index ? "red" : "#17a81a" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { id: backgroundTabBar implicitWidth: 100 implicitHeight: 40 border.width: 1 radius: 2 color : "#444444" } } } }
Sample Output:-
-
Hi @cosmoff , i guess this is want what you want, please have a look at the sample code.
Sample Code:-
TabBar { id: tbar width: parent.width height: 40 Repeater { model: 4 delegate:TabButton { id: control text: index contentItem: Text { text: control.text font: control.font opacity: enabled ? 1.0 : 0.3 color: tbar.currentIndex ===index ? "red" : "#17a81a" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { id: backgroundTabBar implicitWidth: 100 implicitHeight: 40 border.width: 1 radius: 2 color : "#444444" } } } }
Sample Output:-
wrote on 23 Sept 2019, 08:43 last edited by@Shrinidhi-Upadhyaya yes it works !!! thanks a lot
1/3