QML custom tabbar

Customize one vertical TabBar, That is, vertical TabBar.QT default TabBar They are all level , And customize it Tab The background and font colors of items are troublesome . Let's customize a vertical with the following effect today TabBar：

1、 Default TabBar

default TabBar The implementation is as follows , Is written by a TabBar Add a StackLayout Combination to achieve ,StackLayout Is a stack layout , The so-called stack layout simply means that only one stack element in the layout can be displayed at the same time , Stack layout can be used currentIndex To control which tab is displayed .TabButton Default and TabBar In combination with , As TabBar Each independent click button exists in .

TabBar {
	id: bar
	width: parent.width
	TabButton {
		text: qsTr("Home")
	}
	TabButton {
		text: qsTr("Discover")
	}
}

StackLayout {
	width: parent.width
	anchors.top: bar.bottom
	anchors.bottom: parent.bottom
	currentIndex: bar.currentIndex
	Rectangle {
		color: "red"
	}
	Rectangle {
		color: "yellow"
	}
}

The above default state effect is as follows ：

2、 Customized ideas

Use a ListView To complete . Actually consult TabBar Source code can be found , The source code itself uses a ListView As one of it contentItem term .

ListView There is one orientation Property is used to indicate whether the list is vertical or horizontal , Here we set it to ListView.Vertical Vertical ,ListView.Vertical It is also its default value , If we want to use horizontal TabBar You can change this value to ListView.Horizontal.

We mainly customize ListView Agent for delegate, It is generally designated as a ItemDelegate that will do .

ItemDelegate There are two items that can be customized. One is the background color background, We designate a Rectangle, And then set its color attribute . The other is its content item contentItem, Here we use a Rectangle, As a container , You can set the background color , At the same time, it can contain a Text, Used to display our text data . in addition , If you want to change the gesture of the mouse , Or add some click event processing , Can be in ItemDelegate Add one next MouseArea, Fill the entire parent （ namely ItemDelegate）.

There is a key problem here , How to do it when clicking tab The switch of ？

ItemDelegate Triggered when clicked clicked The signal , stay onClicked In the slot function of ListView Of currentIndex Property is assigned to index, among index yes delegate Default properties of agents , Indicates the current index value , The code is as follows

onClicked: control.currentIndex = index

3、 The overall architecture

custom TabBar The overall code architecture is as follows ：

delegate: ItemDelegate {
	text: modelData
	onClicked: control.currentIndex = index

	MouseArea {
		anchors.fill: parent
		acceptedButtons: Qt.NoButton
		cursorShape: Qt.PointingHandCursor
	}

	contentItem: Rectangle {
		anchors.fill: parent
		Text {
			anchors.fill: parent
			text: tabDelegate.text
		}
	}

	background: Rectangle {
		color: tabBackgroundColor
	}
}

---

The complete implementation can search official account through wechat ：“ Shangguan Hongzhu ”, Or scan the QR code below , Pay attention to and reply to ：“TabBar”, Get resource links . If you have any questions, you can also leave a message for consultation .