[Interest] Structuring of QML app as set of interlinked screens for maximum code reuse

[Elvis Stansvik]

Hi all,

I'm working on a fullscreen Qt Quick/QML app (for machine control)
which will consist of a set of interlinked screens, with key presses
as the only interaction method.

Each screen will have roughly the following QML structure:

Rectangle {

    NavBar {
        id: topBar
        ...
        controls for navigation and information stuff,
        different depending on which screen
        ...
    }

    Rectangle {
        id: topSeparator
        ...
        aesthetic divider rectangle between top nav bar and content.
        ...
    }

    Rectangle {
        id: content
        ...
        main content here, different depending on which screen.
        ...
    }

    Rectangle {
        id: bottomSeparator
        ...
        aesthetic divider rectangle between top nav bar and content.
        ...
    }

    NavBar {
        id: bottomBar
        ...
        controls for navigation and information stuff,
        different depending on which screen
        ...
    }
}

And I'm now trying to find a good structure that will minimize
repetition of QML code.

I understand that QMLs main model for code reuse is composition, but
that it also has a form of "inheritance": by defining a new Item in a
separate file using another Item as the top level item and redefining
some of its properties, I'm sort of inheriting that item.

I could save the above general structure in a Screen.qml, and in
FooScreen.qml, BarScreen et.c. do:

Screen {
    ...
    override some properties
    ...
}

But this will only allow me to redefine properties, and add new child
items. How would I then be able to define both which content goes in
the main area (the content Rectangle in the "base" item) and in the
two navigation bars (topBar and bottomBar Rectangles)?

It seems QML is not really meant to be used this way, and I'd have to
essentially redefine these things in each of my screens, even if
they'll all have the same general structure? There's no "template"
mechanism so to speak?

I'm very thankful for any tips from people more experienced with Quick / QML.

And if you know of a well designed full screen QML app modeled as a
set of interlinked screens with keyboard navigation, I'm idle ears.

Cheers,
Elvis