Introduzione ai componenti aggiuntivi Kirigami
Kirigami Addons è un insieme aggiuntivo di componenti visivi che funzionano bene su dispositivi mobili e desktop e sono garantiti multipiattaforma. Utilizza Kirigami sotto il cofano per creare i suoi componenti.
Qui configurerai il tuo nuovo progetto Kirigami Addons e ti verranno presentati alcuni componenti utili.
Questi componenti fanno uso delle funzionalità di localizzazione di KDE, quindi prima di iniziare a usarli, dovremo impostare un piccolo progetto che faccia uso di KLocalizedContext.
Configurazione del progetto
La struttura iniziale del progetto assomiglierà a questa:
addonsexample/
├── CMakeLists.txt
├── main.cpp
└── Main.qmlSuggerimento
Puoi creare rapidamente questa struttura di file con:
mkdir -p addonsexample/contents/ui
touch addonsexample/{CMakeLists.txt,main.cpp}
touch addonsexample/Main.qmlAbbiamo iniziato usando un CMakeLists.txt molto standard:
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})
La parte interessante sarà nel 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();
}
Se hai letto il nostro tutorial KXmlGui o l'ultimo tutorial di Kirigami nella pagina Informazioni su Kirigami, molti di questi ti sembreranno familiari.
Creiamo la nostra applicazione e utilizziamo il costruttore predefinito di KAboutData per aggiungere i metadati della nostra applicazione, aggiungerci come autori e quindi utilizzare setApplicationData() per completare il processo. Per dopo, impostiamo anche un'icona dell'applicazione che deriva dal tema del sistema.
Utilizziamo quindi un lambda in qmlRegisterSingletonType() per inviare direttamente i metadati della nostra applicazione al lato QML, esponendone le proprietà.
Quindi istanziamo il nostro motore QML e impostiamo il suo contesto per utilizzare il KLocalizedContext di KDE, utilizzato per integrare le stringhe tradotte, passando il motore appena creato come parametro.
Carichiamo semplicemente il nostro file QML dal file di risorse e ora dobbiamo solo occuparci del nostro file QML iniziale.
FormCard e FormButtonDelegate
L'idea alla base della nostra app è quella di progettare la nostra galleria di componenti aggiuntivi Kirigami, mostrando più componenti, uno per pagina. La pagina principale conterrà un semplice elenco di pulsanti in un ColumnLayout, ciascuno dei quali apre una pagina separata.
Inizialmente, il nostro Main.qml dovrebbe apparire così:
| |
Usiamo il nostro pratico pageStack per impostare la pagina iniziale su una Kirigami.ScrollablePage.
Anche se potremmo utilizzare un FormLayout insieme a Componenti QtQuick Controls per raggiungere il nostro obiettivo, qui ti verrà presentato FormCard.
Lo scopo principale di una FormCard è quello di servire da contenitore per altri componenti seguendo un colore diverso dallo sfondo, in modo simile a una Kirigami.Card, ma per le finestre delle impostazioni. Puoi avere più FormCard nella tua domanda per indicare diverse sezioni. Si prevede inoltre che la tua FormCard sia figlia diretta di un ColumnLayout.
L'importazione di org.kde.kirigamiaddons.formcard rende disponibili nel fine QML tutti i componenti FormCard.
Avremo solo una singola sezione nella nostra pagina principale, quindi aggiungiamo un singolo FormCard:
| |
La cosa grandiosa di FormCard è che esegue il layout automatico per te. In altre parole, solo l'ordine dei suoi componenti è sufficiente per indicare la loro posizione all'interno della FormCard, non sono necessarie proprietà associate al layout e non è necessario utilizzare ancoraggi o posizionatori.
Possiamo semplicemente aggiungere alcuni pulsanti all'interno della nostra FormCard:
| |
Questo è tutto! I pulsanti non sono ancora utilizzabili, ma ora siamo pronti per giocare con le nostre pagine Informazioni!
Quindi lo costruiamo e lo eseguiamo in questo modo:
cmake -B build/ -DCMAKE_INSTALL_PREFIX=~/kde5/usr
cmake --build build/
cmake --install build/
aboutexamplePer vedere altri modi per creare la tua applicazione (ad esempio, su Windows), consulta la pagina Introduzione a Kirigami.
