QML: QtQuick.Controls Tabs with Icons - qt

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