Introduktion av Kirigami Addons

Bekanta dig med komponenterna i Kirigami Addons

Kirigami Addons är en ytterligare uppsättning visuella komponenter som fungerar bra på mobiler och skrivbordsdatorer och är garanterade att fungera på flera plattformar. De använder Kirigami i bakgrunden för att skapa sina komponenter.

Här ställer du in det nya Kirigami Addons-projektet och får en introduktion av några användbara komponenter.

Komponenterna använder sig av KDE:s faciliteter för landsinställningar, så innan vi börjar använda dem måste vi skapa ett litet projekt som använder KLocalizedContext.

Skapa projektet

Den ursprungliga projektstrukturen ser ut så här:

addonsexample/
├── CMakeLists.txt
├── main.cpp
└── Main.qml

Vi börjar med att använda en mycket vanlig CMakeLists.txt:

cmake_minimum_required(VERSION 3.20)

project(FormCardTutorial)

find_package(ECM REQUIRED NO_MODULE)
set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})

include(KDEInstallDirs)
include(KDECompilerSettings)
include(KDECMakeSettings)
include(ECMQmlModule)

find_package(Qt6 REQUIRED COMPONENTS
    Widgets        # For QApplication
    Quick          # For QML
    QuickControls2 # For QQuickStyle
)
find_package(KF6 REQUIRED COMPONENTS
    CoreAddons # For KAboutData
    I18n       # For KLocalizedContext
)
qt_policy(SET QTP0001 NEW)

add_executable(addonsexample)

target_sources(addonsexample PRIVATE main.cpp)

ecm_add_qml_module(addonsexample
    GENERATE_PLUGIN_SOURCE
    URI org.kde.addonsexample
)

ecm_target_qml_sources(addonsexample SOURCES
    Main.qml
    SettingsPage.qml
    JsonAboutPage.qml
)

target_link_libraries(addonsexample PRIVATE
    Qt::Widgets
    Qt::Quick
    Qt::QuickControls2
    KF6::CoreAddons
    KF6::I18n
)

install(TARGETS addonsexample DESTINATION ${KDE_INSTALL_BINDIR})

Den intressanta delen är main.cpp:

#include <QtQml>
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QIcon>
#include <QQuickStyle>
#include <KAboutData>
#include <KLocalizedContext>
#include <KLocalizedString>

int main(int argCount, char* argVector[])
{
    QApplication app(argCount, argVector);
    KLocalizedString::setApplicationDomain("org.kde.addonsexample");

    KAboutData aboutData(
        QStringLiteral("addonsexample"),
        i18nc("@title:window", "Addons Example"),
        QStringLiteral("1.0"),
        i18nc("@info", "This program shows how to use Kirigami Addons"),
        KAboutLicense::GPL_V3,
        QStringLiteral("(C) 2023"),
        i18nc("@info", "Optional text shown in the About"),
        QStringLiteral("https://kde.org"));

    aboutData.addAuthor(i18nc("@info:credit", "John Doe"),
                        i18nc("@info:credit", "Maintainer"));

    KAboutData::setApplicationData(aboutData);

    if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) {
        QQuickStyle::setStyle(QStringLiteral("org.kde.desktop"));
    }
    QApplication::setWindowIcon(QIcon::fromTheme(QStringLiteral("kde")));

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextObject(new KLocalizedContext(&engine));
    engine.loadFromModule("org.kde.addonsexample", "Main");
    app.exec();
}

Om du har läst vår KXmlGui-handledning eller den senaste Kirigami-handledningen på Kirigami About-sidan, kommer mycket av det här verka bekant.

Vi skapar vårt programmet och använder den vanliga konstruktorn i KAboutData för att lägga till metadata för vårt program, lägger till oss själva som upphovsmän och använder sedan setApplicationData() för att slutföra processen. För senare anger vi också en programikon som kommer från systemets temat.

Vi använder sedan ett lambdauttryck i qmlRegisterSingletonType för att skicka vårt programs metadata till QML-sidan, och exponera dess egenskaper.

Vi instansierar sedan vårt QML-gränssnitt och ställer in context för att använda KDE:s KLocalizedContext, som används för att integrera översatta strängar och skickar det nyskapade gränssnittet som en parameter.

Vi läser helt enkelt in vår QML-fil från resursfilen, och nu behöver vi bara ta hand om vår ursprungliga QML-fil.

FormCard och FormButtonDelegate

Tanken med vårt program är att konstruera vårt eget Kirigami Addons-galleri, som visar upp flera komponenter, en per sida. Huvudsidan ska innehålla en enkel lista med knappar i en ColumnLayout, där var och en öppnar en separat sida.

Från början ska vår Main.qml se ut så här:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import QtQuick
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard as FormCard

import org.kde.about 1.0

Kirigami.ApplicationWindow {
    id: root
    width: 600
    height: 700

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            // Our code will go here
        }
    }
}

Vi använder vår praktiska pageStack för att ställa in originalsidan till en Kirigami.ScrollablePage.

Även om vi kunde använda en FormLayout tillsammans med QtQuick Controls components för att uppnå vårt mål, här introducerar vi FormCard.

Huvudsyftet med FormCard är att fungera som en behållare för andra komponenter samtidigt som det använder en färg som skiljer sig från bakgrunden, på ett liknande sätt som Kirigami.Card, men för inställningsfönster. Man kan ha flera FormCards i programmet för att indikera olika sektioner. Ett FormCard förväntas också vara direkt underordnat en ColumnLayout.

Genom att importera org.kde.kirigamiaddons.formcard blir alla FormCard-komponenter tillgängliga i QML-filen.

Vi har bara en enda sektion på vår huvudsida, så vi lägger till ett enda FormCard:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import QtQuick
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard as FormCard

import org.kde.about 1.0

Kirigami.ApplicationWindow {
    id: root
    width: 600
    height: 700

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                // Our buttons will go here
            }
        }
    }
}

Det fina med FormCard är att det automatiskt gör en layout åt dig. Med andra ord, bara ordningen på dess komponenter räcker för att indikera deras position inne i ett FormCard, inga bifogade egenskaper för Layout är nödvändiga och det förväntas att förankring eller positionering /qt-6/qtquick-positioning-layouts.html) inte används.

Vi kan helt enkelt lägga till några knappar inne i vårt FormCard:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import QtQuick
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard as FormCard

import org.kde.about 1.0

Kirigami.ApplicationWindow {
    id: root
    width: 600
    height: 700

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutKDEButton
                    icon.name: "kde"
                    text: i18n("About KDE Page")
                }
                FormCard.FormButtonDelegate {
                    id: aboutPageButton
                    icon.name: "applications-utilities"
                    text: i18n("About Addons Example")
                }
                FormCard.FormButtonDelegate {
                    id: settingsButton
                    icon.name: "settings-configure"
                    text: i18n("Single Settings Page")
                }
            }
        }
    }
}

Det är allt! Knapparna är inte användbara än, men vi är nu klara att leka med våra About-sidor.

Vi bygger och kör det sedan så här:

cmake -B build/ -DCMAKE_INSTALL_PREFIX=~/kde5/usr
cmake --build build/
cmake --install build/
aboutexample

För att se andra sätt att bygga program (till exempel på Windows), se sidan Komma igång med Kirigami.

Previous
Om-sida
Next
FormCard om-sidor