QML and Tabs

bence.takacs

I want to use tabs with QML.

My only problem is that there is no built-in elemnt that does this.

I found an example code and an article how could I use that:
http://qt-project.org/doc/qt-5.0/qdoc/componentset-tabwidget-qml.html
http://qt-project.org/doc/qt-5.0/qdoc/qml-uicomponents1-tabwidget.html

But no images, nothing... Additionally this is working with QtQuick 1 and as far as I know Qt5 uses QtQuick 2.

Is this the only way to have a Widget that support tabs? To copy-paste the code and get tabBegin and tabEnd images from somewhere?

Regards:
Bence

JKSH

Hi,

It is unfortunate that the documentation presents TabWidget this way, because it is meant to be an example only, not an actual component for developers to use.

For a proper tabbed QML component, see http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-tabview.html

You will need Qt 5.1.0 or higher

bence.takacs

According to QtCreator's QML editor: "TabView is not a type"

I tried to "downgrade" and import QtQuick 1.0, but "qmlscene: 'import QtQuick 1.0' is no longer supported." (by default I used QtQuick 2.0 since this is the default in QtCreator 2.8)

I'm using Qt 5.1.1 built with MinGW

JKSH

Hi,

TabView is in the "Qt Quick Controls":http://qt-project.org/doc/qt-5.1/qtquickcontrols/qtquickcontrols-index.html module. Do:

@
import QtQuick.Controls 1.0
@

Stick to the default; QtQuick 2.0 is the correct one to use. (Despite the differences in version number, QtQuick.Controls 1.0 goes with QtQuick 2.0)

EDIT: I hadn't used TabView myself before, so I gave it a try. This code worked for me (MyItem1.qml and MyItem2.qml contain different Rectangles):

@
// main.qml
import QtQuick 2.0
import QtQuick.Controls 1.0

Rectangle {
width: 360
height: 360

TabView {
    anchors.fill: parent
    Component.onCompleted: {
        addTab("Tab 1", Qt.createComponent("MyItem1.qml"))
        addTab("Tab 2", Qt.createComponent("MyItem2.qml"))
    }
}

}
@

bence.takacs

First: Thanks for your help.

Second: I tried with the following code (derived from the TabWidget example):

@ TabView {
id: tabwidget
x: 100
y: 100
width: 200
height: 200
Component.onCompleted: {
addTab(tab1)
addTab(tab2)
}

    Rectangle {
        id: tab1
        anchors.fill: parent
        color: "red"
        property string title: "Title1"
    }
    Rectangle {
        id: tab2
        anchors.fill: parent
        color: "blue"
        property string title: "Title2"
    }

}@

...but does not work. Any tips?

JKSH

It looks like addTab() can't accept id tags. (I think it's an important feature that's missing -- I'll submit a suggestion to improve TabView for Qt 5.3). In the meantime, you need to create external .qml files and use Qt.createComponent(), like my example.

Remember, TabWidget does not exist. That page is an example for teaching users how to write documentation. It is not for teaching users how to use existing QML types.

JKSH

Ah, I just remembered that you can create inline components:

@
// main.qml
import QtQuick 2.0
import QtQuick.Controls 1.0

TabView {
width: 360
height: 360

Component.onCompleted: {
    addTab("Tab 1", tab1)
    addTab("Tab 2", tab2)
}

Component {
    id: tab1
    Rectangle {color: "red"}
}

Component {
    id: tab2
    Rectangle {color: "blue"}
}

}
@

By the way, when something doesn't work, see the "Application Output" window at the bottom of Qt Creator. It contains useful debugging messages.

bence.takacs

Thanks for the solution. it works well.