TableView is overlapping TabBar

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