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?
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:You don't need a
RowLayout
for the button. It should be placed in the second row of theColumnLayout
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.