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.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


  • Moderators

    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


  • Moderators

    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"))
        }
    }
    

    }
    @



  • 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?


  • Moderators

    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.


  • Moderators

    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.



  • Thanks for the solution. it works well.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.