-
Notifications
You must be signed in to change notification settings - Fork 0
2.09
Explanation of the contents of a topic page @ Topic reference page
Objective: How to create good, re-usable components
- What is a component?
- What is a content item?
- What other properties should be made visible from the component?
- How to define the header?
- How to define the footer?
https://doc.qt.io/qt-5/qml-qtquick-controls2-applicationwindow.html
K: Don't know how to explain content item?
Tino: Take the button or something very similar. First, you may thing the button should have text or an icon or both. No, it could have a framed text. No, it could have padding in the frame. The developer may continue forever to specialise the properties and still it is not sufficient in some use cases. The content item maximises the re-usability of the component, as it's not specialised for any use case. Too specialised components is a very typical error. We also did it in Qt Quick Controls 1.
To this point, we have been making standalone components, but now we are going to see how to integrate them in to a user facing application with navigation, layout and styling.
Components are typically added to a root Window
which acts as the top-level interface for user. There also exists an extended ApplicationWindow
which contains convenient methods to add frequently used UI items to the window. It also provides an interface to control the the window's properties, appearance and layout from within QML.
ApplicationWindow
contains item properties that can be populated with any Item
or with ready-made containers such as ToolBar
or TabBar
. The header
and footer
items are positioned at the top and the bottom of the window, respectively.
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true
header: ToolBar {
// ...
}
footer: TabBar {
// ...
}
StackView {
anchors.fill: parent
}
}
As previously discussed with making generic Component
s, it is not preferable to reference the id of the application root elements as this creates dependencies to other items. ApplicationWindow
provides these generic properties create a interface to itself without creating a dependency to a certain window id.