[solved] Add/remove tabs dynamically



  • Hi again!

    I am trying on something similar to "this post":http://qt-project.org/forums/viewthread/30016/.
    I also want to add/remove tabs in qml by pressing buttons and am somehow stuck. My code so far:

    main.qml:
    @
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Layouts 1.1

    ApplicationWindow{
    id:win
    toolBar: ToolBar{
    RowLayout{
    ToolButton{
    text: "addTab"
    onClicked: tb.loadTab()
    }
    ToolButton{
    text: "removeTab"
    onClicked:tb.removeTab()
    }
    }
    }
    TabView{
    id:tb
    anchors.fill:parent
    function loadTab(){
    var t=tb.addTab("x",myComponent)
    }
    function removeTab(){
    tb.removeTab(1)
    }
    }
    }
    @

    myComponent.qml:
    @
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Layouts 1.1

    GridLayout {
    id: id_gridLayout
    anchors.fill: parent
    Layout.rowSpan: 2
    columns: 3
    Button { text: "prev" }
    Button { text: "next" }
    Slider { Layout.fillWidth: true }
    Text { text: "asdf" }
    Button { text: "prev" }
    Button { text: "next" }
    Text {
    text: "asdf"
    Layout.columnSpan: 2
    }
    Slider { Layout.fillWidth: true }
    }
    @

    It compiles and I don't get any warnings, unless I hit the buttons:

    • addTab: "ReferenceError: myComponent is not defined"
    • removeTab: "RangeError: Maximum call stack size exceeded."

    Do you have some hints/code snippets for me? Any help is greatly appreciated!


  • Moderators

    Hi,

    bq. addTab: “ReferenceError: myComponent is not defined”

    The second argument of "addTab":https://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-tabview.html#addTab-method takes a component, so first you need to create a "component":https://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-component.html
    for e.g
    @
    Component {
    id: comp
    MyComponent{
    }
    }
    @

    and then pass the component id to your addTab function.

    bq. removeTab: “RangeError: Maximum call stack size exceeded.”

    Change your removeTab name to something else as it is going into recursion and hence the error. For eg.
    Change
    @
    function removeTab(){
    tb.removeTab(1)
    }
    @

    to
    @
    function deleteTab(){
    tb.removeTab(0)
    }
    @

    And yes remove the tab at correct index.



  • Perfect, thank you very much for the great answer!

    In case, someone is interested in the code:
    main.qml:
    @

    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Layouts 1.1

    ApplicationWindow{
    id: win
    width: 300
    height: 300

    Component{
        id: id_comp
        MyTab{
            id: id_myTab
        }
    }
    
    toolBar: ToolBar{
        id: id_toolBar
        RowLayout{
            ToolButton{
                text: "addTab"
                onClicked: {
                    var title = id_textField.text;
                    // console.log("textfield: " + title)
                    tb.myAddTab(title, id_comp)
                }
            }
            ToolButton{
                text: "removeTab"
                onClicked: {
                    // console.log("tb.currentIndex is: " + tb.currentIndex);
                    tb.myRemoveCurrentTab();
                }
            }
        }
    }
    
    TextField{
        id: id_textField
        text: "tab title...";
        anchors.top: parent.top
        anchors.topMargin: 5
    }
    
    TabView{
        id: tb
        anchors.top: id_textField.bottom
        anchors.topMargin: 5
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: parent.left
    
        Tab{
            id: id_tab1
            title: "MyTab"
            MyTab{
                id: id_myTab
            }
        }
    
        function myAddTab(title, componentID){
            var t = tb.addTab(title, componentID)
        }
    
        function myRemoveCurrentTab(){
            tb.removeTab(tb.currentIndex)
        }
    }
    

    }
    @

    MyTab.qml:
    @
    import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Layouts 1.1

    GridLayout {
    id: id_gridLayout
    //anchors.fill: parent
    //spacing: 2

    //Layout.rowSpan: 2
    
    columns: 3
    Button { text: "prev"
        focus: false
    

    }
    Button { text: "next" }
    Slider { Layout.fillWidth: true }
    Text { text: "asdf" }
    Button { text: "prev" }
    Button { text: "next" }
    Text { text: "asdf" }
    Slider {
    Layout.fillWidth: true
    Layout.columnSpan: 2
    }

    }
    @


Log in to reply
 

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