Create page with header and footer

[nroos]

Hello,

I have run out of ideas how i could create a simple page (template) with header, body and footer in QML. It should have a text as header, a user configurable body and another text as footer. I know there is a component which does exactly this, but i would like to do it manually for learning purposes.

My intuitive approach would be a component like this:

// Page.qml

import QtQuick

Column {
	property alias body: compBody.data
	property alias header: compHeader.text
	property alias footer: compFooter.text

	Component {
		Column {
			id: compBody
		}
	}

	Component {
		Text {
			id: compHeader
		}
	}

	Component {
		Text {
			id: compFooter
		}
	}

	compHeader
	compBody
	compFooter
}

This doesn't compile but shows what i want to achieve. I tried several other attempts as well, but to no success.

So what is an elegant way to get such a component working?

[mzimmers]

@nroos well, IMO the "elegant" way to do it is to use the supplied QML type for this that @JoeCFD referenced.

But if you want to do it yourself, I don't think you want/need to use the Component item. Just use a ColumnLayout and put whatever items you want in it to represent the header, body and footer areas.

[JoeCFD]

@nroos
is this what you want?
https://doc.qt.io/qt-6/qml-qtquick-controls-page.html

[mzimmers]

@nroos well, IMO the "elegant" way to do it is to use the supplied QML type for this that @JoeCFD referenced.

But if you want to do it yourself, I don't think you want/need to use the Component item. Just use a ColumnLayout and put whatever items you want in it to represent the header, body and footer areas.

[nroos]

@mzimmers said in Create page with header and footer:

But if you want to do it yourself, I don't think you want/need to use the Component item. Just use a ColumnLayout and put whatever items you want in it to represent the header, body and footer areas.

Strange, i nearly had it but didn't come to this simple solution. Anyway, this helped me further, it's working now, thank you!