Introducción a los complementos de Kirigami
Los complementos de Kirigami son un conjunto adicional de componentes visuales que funcionan bien en el móvil y en el escritorio, con la garantía de ser multiplataforma. Usan Kirigami internamente para crear sus componentes.
Aquí configurará su nuevo proyecto de los complementos de Kirigami y conocerá algunos componentes útiles.
Estos componentes hacen uso de las funciones de localización de KDE, por lo que, antes de empezar a usarlos, necesitaremos configurar un pequeño proyecto que haga uso de KLocalizedContext .
Configuración del proyecto
La estructura inicial del proyecto será parecida a esto:
addonsexample/
├── CMakeLists.txt
├── main.cpp
├── resources.qrc
└── contents/
└── ui/
└── main.qml
Consejo
Puede crear esta estructura rápidamente con:
mkdir -p addonsexample/contents/ui
touch addonsexample/{CMakeLists.txt,main.cpp,resources.qrc}
touch addonsexample/contents/ui/main.qml
Empezamos usando un CMakeLists.txt bastante estándar:
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)
find_package(Qt${QT_MAJOR_VERSION} REQUIRED COMPONENTS
Widgets # For QApplication
Quick # For QML
QuickControls2 # For QQuickStyle
)
find_package(KF${QT_MAJOR_VERSION} REQUIRED COMPONENTS
CoreAddons # For KAboutData
I18n # For KLocalizedContext
)
add_executable(addonsexample)
target_sources(addonsexample PRIVATE main.cpp resources.qrc)
target_link_libraries(addonsexample PRIVATE
Qt::Widgets
Qt::Quick
Qt::QuickControls2
KF${QT_MAJOR_VERSION}::CoreAddons
KF${QT_MAJOR_VERSION}::I18n
)
install(TARGETS addonsexample DESTINATION ${KDE_INSTALL_BINDIR})
Un resources.qrc estándar:
<!DOCTYPE RCC>
<RCC version="1.0">
<qresource prefix="/">
<file alias="main.qml">contents/ui/main.qml</file>
</qresource>
</RCC>
La parte interesante será el 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"),
i18n("Addons Example"),
QStringLiteral("1.0"),
i18n("This program shows how to use Kirigami Addons"),
KAboutLicense::GPL_V3,
QStringLiteral("(C) 2023"),
i18n("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")));
qmlRegisterSingletonType(
"org.kde.about",
1, 0, "About",
[](QQmlEngine *engine, QJSEngine *) -> QJSValue {
return engine->toScriptValue(KAboutData::applicationData());
}
);
QQmlApplicationEngine engine;
engine.rootContext()->setContextObject(new KLocalizedContext(&engine));
engine.load(QStringLiteral("qrc:/main.qml"));
app.exec();
}
Si ha leído nuestro tutorial de KXmlGui o el último tutorial de Kirigami en la página acerca de Kirigami, gran parte de todo esto ya debería serle familiar.
Creamos nuestra aplicación y usamos el constructor predeterminado de KAboutData's para añadir los metadatos de nuestra aplicación, nos añadimos a nosotros mismos como autor y luego usamos setApplicationData() para terminar el proceso. Para después, también definimos un icono para la aplicación que proviene del tema del sistema.
A continuación usamos una lambda en qmlRegisterSingletonType para enviar directamente los metadatos a la parte QML de nuestra aplicación, exponiendo sus propiedades.
A continuación creamos una instancia de nuestro motor QML y definimos su contexto para que use KLocalizedContext de KDE, que sirve para integrar los mensajes traducidos, pasando el motor recién creado como parámetro.
Solo tenemos que cargar nuestro archivo QML del archivo de recursos y ya solo tenemos que ocuparnos de nuestro archivo QML inicial.
FormCard y FormButtonDelegate
La idea para nuestra aplicación es diseñar nuestra propia galería de complementos de Kirigami, mostrando múltiples componentes, uno por página. La página principal contendrá una sencilla lista de botones en un ColumnLayout, cada uno de los cuales abre una página separada.
Al principio, nuestro contents/ui/main.qml debería parecerse a esto:
| |
Usamos nuestra útil pageStack para definir la página inicial a una Kirigami.ScrollablePage .
Aunque podríamos usar un FormLayout junto con componentes de controles de QtQuick para conseguir nuestro objetivo, aquí se usará una FormCard.
El propósito principal de una FormCard es de servir como contenedor para otros componentes con un color distinto para el fondo, de un modo similar a Kirigami.Card , pero para ventanas de preferencias. Puede tener varias FormCards en una aplicación para indicar distintas secciones. También se espera que la FormCard sea descendiente directa de una ColumnLayout.
La importación de org.kde.kirigamiaddons.formcard hace que todos los componentes de FormCard estén disponibles para nuestro archivo QML.
Solo tendremos una única sección en nuestra página principal, por lo que añadimos una única FormCard:
| |
Lo mejor de una FormCard es que organiza automáticamente su contenido. En otras palabras, basta con indicar el orden de sus componentes para definir su posición dentro de la FormCard, por lo que no se necesitan propiedades adjuntas de diseño ni el uso de anclajes o posicionadores.
Podemos añadir algunos botones dentro de nuestra FormCard:
| |
¡Ya está! Los botones todavía no se pueden usar, pero ya están preparados para lanzar nuestras páginas «Acerca de».
Ahora compilamos y ejecutamos:
cmake -B build/ -DCMAKE_INSTALL_PREFIX=~/kde5/usr
cmake --build build/
cmake --install build/
aboutexample
Para ver otras formas de compilar la aplicación (por ejemplo, en Windows), consulte la página Primeros pasos con Kirigami.
