QML and Tabs
-
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.htmlBut 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 -
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
-
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
-
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.0Rectangle {
width: 360
height: 360TabView { anchors.fill: parent Component.onCompleted: { addTab("Tab 1", Qt.createComponent("MyItem1.qml")) addTab("Tab 2", Qt.createComponent("MyItem2.qml")) } }
}
@ -
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?
-
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.
-
Ah, I just remembered that you can create inline components:
@
// main.qml
import QtQuick 2.0
import QtQuick.Controls 1.0TabView {
width: 360
height: 360Component.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.
-
Thanks for the solution. it works well.