Developer
In the first part of this tutorial, you generated a sample Kirigami application that doesn’t do much yet. Time to change that! In this part you will be filling the screen with some controls.
In the following, we will use the example of an application that checks departures
and routes for public transport.
On the start page, there needs to be a way to enter start and
destination of our journey as well as the date and time of our travel. For start
and destination you can use the TextField
component from QtQuick Controls 2. Note that
the older version 1 of QtQuick Controls is still around for the foreseable future,
but you want to avoid using that. We’re extending the Kirigami.Page
element in
main.qml
with our controls
ColumnLayout {
width: parent.width
Label {
text: "From:"
}
TextField {
Layout.fillWidth: true
placeholderText: "Würzburg..."
}
Label {
text: "To:"
}
TextField {
Layout.fillWidth: true
placeholderText: "Berlin..."
}
}
A ColumnLayout is a component that positions its children vertically. We set it to be as wide as its parent, the page. The TextFields shall span the whole width as well. Instead of using the same ‘width: parent.width’ we are using ‘Layout.fillWidth: true’. This property is only available to children of a Layout. The difference to the first way is that all the width that is not already occupied by other elements in the layout is filled.
Next you need some way to enter a departure date and time. Creating a time and date picker requires the need of the Kirigami Addons, so for the time being two simple placeholder buttons shall be enough. Let’s add them to our ColumnLayout
RowLayout {
width: parent.width
Button {
text: "Pick date"
Layout.fillWidth: true
}
Button {
text: "Pick time"
Layout.fillWidth: true
}
}
Now your app looks like this. Both buttons have the Layout.fillWidth
property set to
true, resulting in each one getting 50% of the space.
The buttons look a bit weird, don’t they? That’s because they are using the built-in
QtQuick Controls style. If you are using Plasma you are probably used to the
org.kde.desktop
style which emulates the active Qt Widgets style. You can force your
app to use the org.kde.desktop
style by running QT_QUICK_CONTROLS_STYLE="org.kde.desktop" <app name>
.
Looks closer to what you have on the desktop, doesn’t it? Qt also offers a ‘material’ style that follows Android’s material guidelines
Next we need a way to press “Search”. We could solve that with yet another button, but Kirigami offers another way. Pages in Kirigami can have Actions associated with them. The presentation differes from the phone to the desktop. On the phone actions are displayed on the bottom where they are easily reachable while on the desktop they are displayed in form of a toolbar at the top of the page. Let’s add an action to our page.
Kirigami.Page
{
id: root
title: "Start journey"
actions.main: Kirigami.Action {
icon.name: "search"
text: "Search"
onTriggered: pageStack.push(Qt.resolvedUrl("ConnectionsPage.qml"))
}
ColumnLayout {
On the phone you get this
while on the desktop you get that:
You can force the mobile view on the desktop by setting the QT_QUICK_CONTROLS_MOBILE
environement variable to 1
.
Triggering the action pushes ConnectionsPage.qml on the pageStack. Of cource you need to create that one now:
import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.4
import org.kde.kirigami 2.4 as Kirigami
Kirigami.Page
{
title: "Connections"
}
Now that you know how to add elements to the user interface of your application, you will probably want them to have useful functionality. Continue to the next page on how to do that.