Kirigami Addons is an additional set of visual components that work well on mobile and desktop and are guaranteed to be cross-platform. It uses Kirigami under the hood to create its components.
Here you will be setting up your new Kirigami Addons project and be introduced to a few useful components.
These components make use of KDE's localization facilities, so before we start using these, we will need to set a little project that makes use of KLocalizedContext.
We create our application and use KAboutData's default constructor to add the metadata of our application, add ourselves as an author, and then use setApplicationData() to finish the process. For later, we also set an application icon that comes from the system theme.
We then use a lambda in qmlRegisterSingletonType to directly send the metadata of our application to the QML side, exposing its properties.
We then instantiate our QML engine, and set its context to use KDE's KLocalizedContext, used to integrate translated strings, passing the just created engine as a parameter.
We simply load our QML file from the resource file, and now we just need to take care of our initial QML file.
FormCard and FormButtonDelegate
The idea for our app is to design our own Kirigami Addons gallery, showcasing multiple components, one per page. The main page will contain a simple list of buttons in a ColumnLayout, each opening a separate page.
Initially, our contents/ui/main.qml should look like this:
import QtQuickimport QtQuick.Layoutsimport org.kde.kirigami as Kirigamiimport org.kde.kirigamiaddons.formcard as FormCardimport org.kde.about 1.0Kirigami.ApplicationWindow {id: root width: 600 height: 700 pageStack.initialPage: Kirigami.ScrollablePage { ColumnLayout {// Our code will go here } }}
The main purpose of a FormCard is to serve as a container for other components while following a color different from the background, in a similar manner to a Kirigami.Card, but for settings windows. You can have multiple FormCards in your application to indicate different sections. Your FormCard is also expected to be a direct child of a ColumnLayout.
Importing org.kde.kirigamiaddons.formcard makes all FormCard components available to your QML file.
We will have only a single section in our main page, so we add a single FormCard:
import QtQuickimport QtQuick.Layoutsimport org.kde.kirigami as Kirigamiimport org.kde.kirigamiaddons.formcard as FormCardimport org.kde.about 1.0Kirigami.ApplicationWindow {id: root width: 600 height: 700 pageStack.initialPage: Kirigami.ScrollablePage { ColumnLayout {FormCard.FormCard {// Our buttons will go here } } }}
The great thing about FormCard is that it does automatic layouting for you. In other words, just the order of its components is enough to indicate their position inside the FormCard, no Layout attached properties are necessary and you are expected not to use anchors or positioners.
We can simply add a few buttons inside our FormCard: