QML: QtQuick.Controls Tabs with Icons

Question

I have been learning how to use QT Creator Tool so that I can build UI's quickly and easily. For my current project, I have to use QML to build my UI. I want to have tabs in my display. I would like to use an image in place of text in my tab. My code is below. I have tried to add a source but that did not help me add an icon. Does anyone know how to do this? All help would be greatly appreciated.

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.2

    Window {
        visible: true
        width: 640
        height: 400
        opacity: 1
        TabView {
            height: 300
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            anchors.fill: parent
            Tab {
                title: "Robot"
                component: Qt.createComponent("RobotControls.qml")
            }
            Tab{
               title: "Tab #2"

            }
        }
    }

Answer 1

Elaborating on the answer from Simon Warta in Extending TabViewStyle styleData, here is what you could do :

Define a custom IconTab

You want to extend the Tab item so that you can specify an icon to display. So add a new file to your project, called IconTab.qml:

IconTab.qml

import QtQuick.Controls 1.4

Tab{
    property string icon
}

Define a custom TabViewStyle.

In order to use this new property, you must create your own TabViewStyle. You may have to redefine background and text size and colors so that it fits your app theme, but something like this could work:

MyStyle.qml

import QtQuick 2.5
import QtQuick.Controls.Styles 1.2

TabViewStyle {
    tab: Item {

        implicitWidth: Math.round(textitem.implicitWidth + image.width + 20)
        implicitHeight: Math.round(textitem.implicitHeight + 10)

        Rectangle
        {
            anchors.fill: parent
            anchors.bottomMargin: 2
            radius: 1
            border.width: 1
            border.color: "#AAA"
            color:"transparent"
        }

        Rectangle
        {
            anchors.fill: parent
            anchors.margins: 1
            anchors.bottomMargin: styleData.selected ? 0 : 2
            radius: 1
            gradient: Gradient{
                GradientStop{position:0; color:styleData.selected?"#EDEDED":"#E3E3E3"}
                GradientStop{position:1; color:styleData.selected?"#DCDCDC":"#D3D3D3"}
            }
        }

        Text {
            id: textitem
            anchors.fill: parent
            anchors.leftMargin: 4 + image.width
            anchors.rightMargin: 4
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            text: styleData.title
            elide: Text.ElideMiddle
        }

        Image
        {
            id: image
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.margins: 2
            anchors.leftMargin: 4
            fillMode: Image.PreserveAspectFit
            source: control.getTab(styleData.index).icon

        }
    }
}

Note how you can make use of the control property and the styleData.index to get your icon's url: control.getTab(styleData.index).icon

Put the pieces together

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.0

Window {
    visible: true
    width: 640
    height: 400

    TabView {
        id: tabView
        anchors.fill: parent

        style: MyStyle{}

        IconTab {
            title: "Tab #1"
            icon: "icon.png"
        }
        IconTab{
            title: "Tab #2"
        }
        IconTab{
            title: "Tab #3"
            icon: "icon.png"
        }

    }
}

Result