在 Qt Creator 依次点击：-> File -> New File or Project-> Applications -> Qt Quick Application

然后一路点击 next 直到 finish 。

Linux 系统里安装过的应用，都会在 /usr/share/applications 目录下有相应的配置文件，用于说明如何启动该应用，如下：

#ls-1X/usr/share/applications/apport-gtk.desktopapturl.desktoparduino.desktopaudacity.desktopbcompare.desktop...

以 bcompare.desktop 为例：

[DesktopEntry]Name=BeyondCompareExec=bcompareIcon=bcompare...

字段含义：

Name 字段是应用的名称，

Exec 字段是应用的启动命令，

Icon 字段是应用的图标名称，

解析配置文件：

//文件：main.cppQVariantListapps(){QVariantListret;QDirIteratorit(DESKTOP_FILE_SYSTEM_DIR,...);while(it.hasNext()){constautofilename=it.next();QSettingsdesktopFile(filename,QSettings::IniFormat);//定位到[DesktopEntry]desktopFile.beginGroup(DESKTOP_ENTRY_STRING);//提取app信息AppInfoapp;app.exec=desktopFile.value("Exec").toString().remove("\"").remove(QRegExp("%."));app.icon=desktopFile.value("Icon").toString();app.name=desktopFile.value("Name").toString();//保存app信息ret.append(QStringList{app.name,app.icon,app.exec});}returnret;}intmain(intargc,char*argv[]){[...]//将解析到的app信息传递给QML前端engine.rootContext()->setContextProperty("apps",apps());[...]}

核心就是遍历某个目录下的所有文件，解析配置文件的工作则由 QSettings 负责。

运行效果：

//打印出所有的app启动信息exec:"xpad"icon:"xpad"name:"Xpad"[...]3. 实现整体布局

我们可以使用 Repeater 这个控件。Repeater 可以帮我们生成重复的内容，这里我们规定一页最多显示 24 个 app。

通过 SwipeView + Repeater 实现布局：

//文件:main.qmlSwipeView{[...]propertyintselectedIndex:0Repeater{id:pageRepeatermodel:appPages.lengthItem{propertyvarpage:appPages[index]Grid{columns:6Repeater{model:page.lengthImage{source:"qrc:/images/qtlogo.png"}}}}}}

第一个 Repeater 用于实现生成所有的页面，

第二个 Repeater 用于生成页面里的所有 APP 的图标，这里我们先用 Qt 的 logo 来代替真实的 APP 图标。

运行效果：

这时候已经支持左右滑动了，但是还没填入 APP 信息。

在 main() 里，我们设置了一个名为 apps 的属性，它包含了所有 APP 的信息：

engine.rootContext()->setContextProperty("apps",apps());

我们需要在前端界面中使用 APP 的图标替换掉 Qt logo。

显示 APP 图标：

//文件：main.qmlGrid{[...]Repeater{model:page!==undefined?page.length:0Column{Image{propertyvarapp:page[index]//APP图标source:"image://icons/"+app[1][...]}Label{propertyvarapp:page[index]id:label//APP的名称text:app[0][...]}}}}

改动非常少。

运行效果：

这时仅支持显示图标，但是仍不支持鼠标选中。

选中应用需要添加对鼠标 hover 事件的处理。当鼠标移动到某个图标上时，Qt 会捕获到鼠标 hover 事件，并传递给当前焦点所在的控件上。我们将 APP 的界面代码抽取出来，单独放在 AppEntry.qml，使其成为一个独立的控件，然后再在其中添加对鼠标 hover 事件的处理。

图标控件：AppEntry.qml

///文件：AppEntry.qmlPane{id:rootpropertyvarapp[...]//当鼠标移动到该图标时，发送信号hovered()signalhovered()MouseArea{[...]onHoveredChanged:{if(hovered){root.hovered()}}}Column{anchors.fill:parentImage{source:"image://icons/"+app[1][...]}Label{[...]}}}

在 main.qml 中接受到 AppEntry 控件的 hovered 信号时，需改变其背景色以提示用户已选中图标。

//文件：main.qmlRepeater{model:page.lengthAppEntry{app:page[index][...]//selected改变时，背景色会变化selected:swipeView.selectedIndex===indexonHovered:{swipeView.select(index)}[...]}}

运行效果：

这是已经能显示选中状态了，但是仍无法启动应用。

在 Qt 里，可以使用 QProcess 来创建进程。这里我们创建一个 QProcess 的子类用于运行 APP。

QProcess 的子类：

//文件：process.cppvoidProcess::start(constQString&program,constQVariantList&arguments){[...]QProcess::startDetached(program);}//文件：process.hclassProcess:publicQProcess{Q_OBJECTpublic:Process(QObject*parent=nullptr);Q_INVOKABLEvoidstart(constQString&program,constQVariantList&arguments={});};//文件：main.cppintmain(intargc,char*argv[]){//将Process的实例传递给前端engine.rootContext()->setContextProperty("proc",newProcess(&engine));}

前端处理点击事件：

//文件：AppEntry.qmlsignalclicked()MouseArea{[...]onClicked:{root.clicked()}}

当用户点击图标时，AppEntry 控件会发出 clicked() 信号。

//文件：main.qmlAppEntry{app:page[index][...]//主窗口启动APPonClicked:{exec(app[2])}[...]}functionexec(program){console.debug("Exec:"+program)proc.start(program)Qt.quit();}

最后调用到 Process::start()，启动 APP。

运行效果：