TableView is overlapping TabBar - qml

Question

I have this inside of my main.qml:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Imagine
ApplicationWindow {
visible: true
width: Screen.width
height: Screen.height
title: "Portmod"
TabBar {
id: bar
width: parent.width
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
StackLayout {
width: parent.width
height: parent.height
currentIndex: bar.currentIndex
TableView {
id: manageTab
columnSpacing: 1
rowSpacing: 1
clip: true
model: installed_pkgs_model
selectionModel: ItemSelectionModel {}
delegate: Rectangle {
implicitWidth: 300
implicitHeight: 50
color: selected ? "blue" : "lightgray"
required property bool selected
Text {
text: display
}
}
}
Item {
id: searchTab
}
}
}
It's displaying my TableView and TabBar with two TabButtons fine, but the TableView is overlapping with the TabBar and I have to drag the TableView out of the way to see it.
I'd like the TableView to be moved down so the TabBar is always visible, but I'm not sure how to do this. The layout system is a bit confusing to me.

Answer 1

A simple way would be to move the TabBar into a header:
header: TabBar {
id: bar
width: parent.width
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
Using layouts, you could do it like this:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Imagine
import Qt.labs.qmlmodels 1.0
ApplicationWindow {
width: Screen.width
height: Screen.height
title: "Portmod"
visible: true
ColumnLayout {
anchors.fill: parent
spacing: 0
TabBar {
id: bar
Layout.fillWidth: true
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
StackLayout {
currentIndex: bar.currentIndex
Layout.fillWidth: true
Layout.fillHeight: true
TableView {
id: manageTab
columnSpacing: 1
rowSpacing: 1
clip: true
model: TableModel {
TableModelColumn { display: "name" }
TableModelColumn { display: "color" }
rows: [
{
"name": "cat",
"color": "black"
},
{
"name": "dog",
"color": "brown"
},
{
"name": "bird",
"color": "white"
}
]
}
selectionModel: ItemSelectionModel {}
delegate: Rectangle {
implicitWidth: 300
implicitHeight: 50
color: selected ? "blue" : "lightgray"
required property bool selected
required property string display
Text {
text: display
}
}
}
Item {
id: searchTab
}
}
}
}