Icon in Tab QML - mobile

Question

I was looking in documentation of QML but I didn't find:
Is there any way to insert image into Tab in TabView in QML?
Is there possibility of scrolling Tabs?

Answer 1

#folibis is right, but with his permission, I'd like to show you an example as it may be difficult to understand how to set an image in QML tabs.
import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("Example")
TabView {
anchors.fill: parent
Tab { title: "One" ; Item {}}
Tab { title: "Two" ; Item {}}
Tab { title: "Three" ; Item {}}
Tab { title: "Four" ; Item {}}
style: tabViewStyle
}
Component {
id: tabViewStyle
TabViewStyle {
tabsMovable: true
tab: Item {
implicitWidth: 97
implicitHeight: 28
Image {
id: image
anchors.centerIn: parent
source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
}
Text {
id: text
text: styleData.selected ? "" : styleData.title
anchors.horizontalCenter: parent.horizontalCenter
}
}
frame: Rectangle { color: "steelblue" }
}
}
}
I uploaded the code to GitHub.
Updated
You can use some TabViewStyle properties to load different images depending on your requirements. I.e. the next code is using int styleData.index to load different sources. The code is also in GitHub.
TabViewStyle {
tabsMovable: true
tab: Item {
function loadImage(index) {
return "images/tab"+index+".png";
}
implicitWidth: 97
implicitHeight: 28
Image {
id: image
anchors.centerIn: parent
source: loadImage(styleData.index)
}
Text {
id: text
text: styleData.selected ? "" : styleData.title
anchors.horizontalCenter: parent.horizontalCenter
}
}
frame: Rectangle { color: "steelblue" }
}