CODEWITHSUNDEEP
javascriptqtqml
Kobojunkie
Kobojunkie

Reputation: 6535

How to position a component at the top of all my QML views

I have a QML Menu component that I would like to place at the top of each and everyone of my views and sort of sync up so it goes the look and feel of the typical webpage menu. How do I go about doing this please

import QtQuick 1.0 

Row {
    width: 500
    height: 50
    anchors.centerIn: parent
    spacing: parent.width/6

    Button {
         id: loadButton
         text: qsTr("Menu")
    }
    Button { 
         id: saveButton
         text: qsTr("Profile")
    }
    Button {
         id: exitButton
         text: qsTr("View Products")
    }

}

Upvotes: 6

Views: 18290

Answers (3)

Liyong Zhou
Liyong Zhou

Reputation: 221

One option is to use ApplicationWindow that is designed for desktop applications with a header on top, a footer on bottom (for status etc), and a middle content area.

ApplicationWindow {
visible:true

header: ToolBar {
    RowLayout {
        anchors.fill: parent
        ToolButton {
            text: qsTr("‹")
            onClicked: stack.pop()
        }
        Label {
            text: "Title"
            elide: Label.ElideRight
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            Layout.fillWidth: true
        }
        ToolButton {
            text: qsTr("⋮")
            onClicked: menu.open()
        }
    }
}

StackView {
    id: stack
    anchors.fill: parent
}
}

From: https://doc.qt.io/qt-6/qml-qtquick-controls2-applicationwindow.html

The StackView takes the big middle area where one and only one of your many content pages shows up.

Upvotes: 0

muenalan
muenalan

Reputation: 619

Read about "z" property QDeclarativeItem or QML Item. The answer is to give your menu component instance the highest z value.

MyMenu
{
   z: 100

   ...
}

Rectangle
{
   z: 1

   ...
}

The qml renderer decides upon this values which items to draw first; and in case of something overlaying your menu it will end below it. By the way, the default z value is 0, so all are same and it is more or less undefined in which order it is rendered.

Good Luck!

Upvotes: 10

Wes Hardaker
Wes Hardaker

Reputation: 22252

With QML everything needs to end up in a container in order to align everything with it. In this case, if you're trying to build a bunch of Buttons into a menu/row then you need that to always be at the top of every page-like container you put it in.

IE, put your above stuff all in a file called "Menu.qml". Then inside your program every place you want the menu to appear, make an enclosing Rectangle (or whatever) and anchor the menu to the top:

Rectangle {
    Menu { id: menu; anchor.top: parent.top; anchor.left: parent.left; }

    // put other stuff here
    Rectangle { anchor.top: menu.bottom; }
 }

If you do that for every object that will appear then you're good to go!

As another example, in a PageStack, make each page include that at the top.

Upvotes: 1

Related Questions