Kirigami.AboutPage allows you to have a page that shows the copyright notice of the application together with the list of contributors and some information of which platform it's running on.
First, we are going to edit our main.cpp file from previous tutorials.
#include<QApplication>#include<QQmlApplicationEngine>#include<QtQml>#include<QUrl>#include<KAboutData>#include<KLocalizedContext>#include<KLocalizedString>intmain(intargc,char*argv[]){QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QApplicationapp(argc,argv);KLocalizedString::setApplicationDomain("helloworld");QCoreApplication::setOrganizationName(QStringLiteral("KDE"));QCoreApplication::setOrganizationDomain(QStringLiteral("kde.org"));QCoreApplication::setApplicationName(QStringLiteral("Hello World"));if(qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")){QQuickStyle::setStyle(QStringLiteral("org.kde.desktop"));}KAboutDataaboutData(QStringLiteral("helloworld"),i18nc("@title","Hello World"),QStringLiteral("1.0"),i18n("Hello world application"),KAboutLicense::GPL,i18n("(c) 2021"));aboutData.addAuthor(i18nc("@info:credit","Your name"),i18nc("@info:credit","Author Role"),QStringLiteral("your@email.com"),QStringLiteral("https://yourwebsite.com"));// Set aboutData as information about the app KAboutData::setApplicationData(aboutData);// Register a singleton that will be accessible from QML. qmlRegisterSingletonType("org.kde.example",// How the import statement should look like 1,0,// Major and minor versions of the import "About",// The name of the QML object [](QQmlEngine*engine,QJSEngine*)->QJSValue{// Here we retrieve our aboutData and give it to the QML engine // to turn it into a QML type returnengine->toScriptValue(KAboutData::applicationData());});// Load an application from a QML file QQmlApplicationEngineengine;engine.rootContext()->setContextObject(newKLocalizedContext(&engine));engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if(engine.rootObjects().isEmpty()){return-1;}returnapp.exec();}
In the main.cpp file we include KAboutData, a core KDE frameworks component that lets us store information about our application. This information can then be reused by many other KDE Frameworks components. We instantiate a new aboutData object with its fairly complete default constructor and add author information.
We then create a qmlRegisterSingletonType(). This is used to allow us to import the C++ code as a module in our main.qml with import org.kde.example 1.0.
Its first argument is the URI that will be used for the import, the second and third arguments are major and minor versions respectively, the fourth is the type name, the name that we will call when accessing our About type, and the last is a reference to the C++ object that is exposed to QML. In the latter's case, we use a lambda to instantiate the aboutData of our application in place.
importQtQuickimportQtQuick.LayoutsimportQtQuick.ControlsasControlsimportorg.kde.kirigamiasKirigamiimportorg.kde.example1.0Kirigami.ApplicationWindow{id: roottitle:i18nc("@title:window","Day Kountdown")globalDrawer:Kirigami.GlobalDrawer{isMenu:trueactions:[Kirigami.Action{text:i18n("Quit")icon.name:"gtk-quit"shortcut:StandardKey.QuitonTriggered:Qt.quit()},Kirigami.Action{// <==== Action to open About page text:i18n("About")icon.name:"help-about"onTriggered:pageStack.layers.push(aboutPage)}]}Component{// <==== Component that instantiates the Kirigami.AboutPage id: aboutPageKirigami.AboutPage{aboutData:About}}ListModel{id: kountdownModel}AddEditSheet{id: addEditSheetonAdded:kountdownModel.append({"name":name,"description":description,"date":Date.parse(kdate)});onEdited:kountdownModel.set(index,{"name":name,"description":description,"date":Date.parse(kdate)});onRemoved:kountdownModel.remove(index,1)}functionopenPopulatedSheet(mode,index=-1,listName="",listDesc="",listDate=""){addEditSheet.mode=modeaddEditSheet.index=index;addEditSheet.name=listNameaddEditSheet.description=listDescaddEditSheet.kdate=listDateaddEditSheet.open()}pageStack.initialPage:Kirigami.ScrollablePage{title:i18nc("@title","Kountdown")actions:[Kirigami.Action{id: addActionicon.name:"list-add"text:i18nc("@action:button","Add kountdown")onTriggered:openPopulatedSheet("add")}]Kirigami.CardsListView{id: layoutmodel:kountdownModeldelegate:KountdownDelegate{}}}}
First, we use the import we defined in the main.cpp file, namely org.kde.example. We then add a Kirigami.Action to our global drawer that will send us to the About page, and create a component with a Kirigami.AboutPage in it, which expects a KAboutData::applicationData() object. We exposed precisely that in our main.cpp and called it About, so we can pass it here.
