Customizing QML TabButton

Question

I want to customize TabButtons in QML and I couldn't find sufficient properties here.

I'm able to change the font color but how can I change the the underlying line style?

Answer 1

I would propose to build your own item, which gives you more control in terms of design decisions.

To build a tab with buttons as you wish you can do something like below (Note: there is a lot of room for improvement here, so go on and experiment, you will learn a lot):

---

TopButton.qml (this is the button item we build and we use it in our tab menu)

import QtQuick 2.0

Rectangle {
    id: button
    width: 100
    height: 20
    color: "#ADD8E6"
    radius: 2
    property alias text: buttontext
    signal clicked

    property bool selected

    Text {
        id: buttontext
        anchors.centerIn: parent
        text: "Test"
    }

    MouseArea {
        id: mouseArea

        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
        onClicked: button.clicked()
    }

    Rectangle {
        id: underlineRect

        visible: button.selected
        height: 2
        width: button.width
        color: "black"
        anchors.bottom: parent.bottom
    }

    Behavior on selected {PropertyAnimation {properties: "selected"; easing.type: Easing.InOutElastic; easing.amplitude: 2.0; easing.period: 0.5}}
}

---

TAB (which arranges the button in a row)

Row {
        id: buttonRow
        spacing:2
        anchors.centerIn: parent

        TopButton {
            id: firstButton

            selected: true
            onClicked: {
                secondButton.selected = false
                selected = true
            }
        }

        TopButton {
            id: secondButton

            onClicked: {
                firstButton.selected = false
                selected = true
            }
        }
    }

Answer 2

You have to implement it by yourself. You can use the same template used by Qt for the button and change whatever you want. In order to find the implentation, you can into the Qt folder. For me it's in:

C:\Qt\5.11.1\Src\qtquickcontrols2\src\imports\controls\material

Another option is to put inside the TabBar whatever you want, for example, you could do:

 TabBar {
        id: tabBarItem

        currentIndex: model.currentIndex 

        contentItem: ListView {
            id: view

            model: model //it Contains the list of items that you want to show
            delegate: delegate // Delegate that could be a button or whatever. You could use the default delegate ItemDelegate
         }

}

https://doc.qt.io/qt-5/qml-qtquick-controls2-itemdelegate.html

Answer 3

Disclaimer

The controls package, IMO, is not built for customizing, it is built for quick OTS stuff that's why i would recommend build your own as @cppiscute said.

Possible Solution

note that i couldn't find a way to make this a reusable component

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
    color: "gray"
    anchors.fill: parent;
    Item {
        anchors.centerIn: parent;
        width: parent.width / 2
        height: 200
        TabBar {
            id: bar
            anchors.top: parent.top;
            width: parent.width;
            currentIndex: 0
            TabButton {
                text: qsTr("Home")
            }
            TabButton {
                text: qsTr("Discover")
            }
            TabButton {
                text: qsTr("Activity")
            }

        }
        Rectangle {
            id : decorator;
            property real targetX: bar.currentItem.x + width * 2
            anchors.top: bar.bottom;
            width: bar.currentItem.width;
            height: 2;
            color: "cyan"
            NumberAnimation on x {
                duration: 200;
                to: decorator.targetX
                running: decorator.x != decorator.targetX
            }
        }

    }
}