QML TabView in ColumnLayout

Question

I am trying to modify Gallery example. I want to add Button under TabView. So, I put TabView and Button into ColumnLayout, here is code:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Window 2.0

Window {
    visible: true
    title: "settings"
    width: 600
    height: 400
ColumnLayout{
    anchors.fill: parent
    TabView {
        anchors.right: parent.right
        anchors.left: parent.left
        Tab {
            title: "Controls"
            Controls { }
        }
        Tab {
            title: "Itemviews"
            Controls { }
        }
        Tab {
            title: "Styles"
            Controls {  }
        }
        Tab {
            title: "Layouts"
            Controls {  }
        }
    }

    RowLayout{
        anchors.right: parent.right
        anchors.left: parent.left
        Button{
            text: "ok"
        }
    }
}

}

However, when I resize window okButton stands under tab controls. How should I fix code?

You place Button under TabView as I see, so what is your question? I can't test your example just because of udefined Controls but may be you should use Layout.fillHeight & Layout.fillWidth for TabView? But dont't forget to set height of RowLayout — folibis
@folibis Controls.qml is in Qt Quick Controls - Gallery example. Just open Qt creator -> welcome and type "Gallery". When I resize window okButton stands not under TabView but above TabView — lnk

BaCaRoZzo BaCaRoZzo · Accepted Answer · 2014-11-22T10:06:04

When you have defined a Layout, each element added has access to specific properties related to the layout itself. These properties are useful to position the element inside the space covered from the layout. Confront what is described here.

Hence, you should modify the ColumnLayout like this:

ColumnLayout {
    anchors.fill: parent                   
    TabView {
        id:frame
        enabled: enabledCheck.checked
        tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
        Layout.fillHeight: true            // fill the available space vertically 
        Layout.fillWidth: true             // fill the available space horizontally
        Layout.row: 0                      // item in the first row of the column
        anchors.margins: Qt.platform.os === "osx" ? 12 : 2
        Tab {
            id: controlPage
            title: "Controls"
            Controls { }
        }
        Tab {
            title: "Itemviews"
            ModelView { }
        }
        Tab {
            title: "Styles"
            Styles { anchors.fill: parent }
        }
        Tab {
            title: "Layouts"
            Layouts { anchors.fill:parent }
        }
    }

    Button {
        text: "ok"
        Layout.row: 1                       // item in the second row of the column
        Layout.alignment: Qt.AlignCenter    // simple center the button in its spatial slot
    }
}

You don't need a RowLayout for the button. It should be placed in the second row of the ColumnLayout you have defined, since it is a simple component. A sub-layout could be useful in case of multiple elements on the same row, e.g. two or more buttons.

Note also that anchoring is just used for the ColumnLayout to "stretch" and fit the window. All the other operations are executed via the layout properties. For general rules take a look at this other article.

QML TabView in ColumnLayout

1 Answers