今天給大家分享一下：如何用 Qt 實(shí)現(xiàn)一個(gè) launcher (程序啟動(dòng)器)。

運(yùn)行效果：

github 鏈接：

https://github.com/alamminsalo/qml-launcher

代碼很少，C 部分大約 100行代碼。

下面是實(shí)現(xiàn)過(guò)程。

1. 創(chuàng)建 QML 應(yīng)用

在 Qt Creator 依次點(diǎn)擊：

-> File -> New File or Project

-> Applications -> Qt Quick Application

然后一路點(diǎn)擊 next 直到 finish 。

2. 解析配置文件

Linux 系統(tǒng)里安裝過(guò)的應(yīng)用，

都會(huì)在 /usr/share/applications 目錄下有相應(yīng)的配置文件，

用于說(shuō)明如何啟動(dòng)該應(yīng)用，如下：

#?ls?-1X?/usr/share/applications/
apport-gtk.desktop
apturl.desktop
arduino.desktop
audacity.desktop
bcompare.desktop
...


以 bcompare.desktop 為例：

[Desktop?Entry]
Name=Beyond?Compare
Exec=bcompare
Icon=bcompare
...
字段含義：

• Name 字段是應(yīng)用的名稱，

• Exec 字段是應(yīng)用的啟動(dòng)命令，

• Icon 字段是應(yīng)用的圖標(biāo)名稱，

解析配置文件：

//?文件：main.cpp

QVariantList?apps()
{
????QVariantList?ret;
????QDirIterator?it(DESKTOP_FILE_SYSTEM_DIR,?...);

????while?(it.hasNext())?{
????????const?auto?filename?=?it.next();
????????QSettings?desktopFile(filename,?QSettings::IniFormat);
????????
????????//?定位到?[Desktop?Entry]
????????desktopFile.beginGroup(DESKTOP_ENTRY_STRING);

????????//?提取?app?信息
????????AppInfo?app;
????????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});
????}
????return?ret;
}

int?main(int?argc,?char?*argv[])
{
????[...]
????//?將解析到的?app?信息傳遞給?QML?前端
????engine.rootContext()->setContextProperty("apps",?apps());
????[...]
}
核心就是遍歷某個(gè)目錄下的所有文件，解析配置文件的工作則由 QSettings 負(fù)責(zé)。

運(yùn)行效果：

//?打印出所有的?app?啟動(dòng)信息

exec:??"xpad"?
icon:??"xpad"?
name:??"Xpad"
[...]


3. 實(shí)現(xiàn)整體布局

我們通過(guò) SwipeView 來(lái)實(shí)現(xiàn)滑動(dòng)翻頁(yè)的功能，參考我之前的文章：

《Qt 官方示例 | 這幾個(gè) QML 版的 HelloWorld 你學(xué)會(huì)了嗎？》

至于單獨(dú)一頁(yè)的布局，我們可以使用 Repeater 這個(gè)控件。

Repeater 可以幫我們生成重復(fù)的內(nèi)容，這里我們規(guī)定一頁(yè)最多顯示 24 個(gè) app。

通過(guò) SwipeView Repeater 實(shí)現(xiàn)布局：

//?文件:?main.qml

SwipeView?{
????????[...]
????????property?int?selectedIndex:?0
????????Repeater?{
????????????id:?pageRepeater
????????????model:?appPages.length

????????????Item?{
????????????????property?var?page:?appPages[index]
????????????????Grid?{
????????????????????columns:?6
????????????????????Repeater?{
????????????????????????model:?page.length

????????????????????????Image?{
????????????????????????????source:?"qrc:/images/qtlogo.png"
????????????????????????}
????????????????????}
????????????????}
????????????}
????????}
????}
第一個(gè) Repeater 用于實(shí)現(xiàn)生成所有的頁(yè)面，

第二個(gè) Repeater 用于生成頁(yè)面里的所有 APP 的圖標(biāo)，這里我們先用 Qt 的 logo 來(lái)代替真實(shí)的 APP 圖標(biāo)。

運(yùn)行效果：

這時(shí)候已經(jīng)支持左右滑動(dòng)了，但是還沒(méi)填入 APP 信息。

4. 支持顯示應(yīng)用圖標(biāo)

在 main() 里，我們?cè)O(shè)置了一個(gè)名為 apps 的屬性，它包含了所有 APP 的信息：

engine.rootContext()->setContextProperty("apps",?apps());
我們需要在前端界面中使用 APP 的圖標(biāo)替換掉 Qt logo。

顯示 APP 圖標(biāo)：

//?文件：main.qml

Grid?{
????[...]
????Repeater?{
????????model:?page?!==?undefined???page.length?:?0

????????Column?{
????????????Image?{
????????????????property?var?app:?page[index]
????????????????//?APP?圖標(biāo)
????????????????source:?"image://icons/"? ?app[1]
????????????????[...]
????????????}

????????????Label?{
????????????????property?var?app:?page[index]
????????????????id:?label
????????????????//?APP?的名稱
????????????????text:?app[0]
????????????????[...]
????????????}
????????}
????}
}
改動(dòng)非常少。

運(yùn)行效果：

這時(shí)僅支持顯示圖標(biāo)，但是仍不支持鼠標(biāo)選中。

5. 支持選中應(yīng)用

選中應(yīng)用需要添加對(duì)鼠標(biāo) hover 事件的處理。

當(dāng)鼠標(biāo)移動(dòng)到某個(gè)圖標(biāo)上時(shí)，Qt 會(huì)捕獲到鼠標(biāo) hover 事件，并傳遞給當(dāng)前焦點(diǎn)所在的控件上。

我們將 APP 的界面代碼抽取出來(lái)，單獨(dú)放在 AppEntry.qml，使其成為一個(gè)獨(dú)立的控件，

然后再在其中添加對(duì)鼠標(biāo) hover 事件的處理。

圖標(biāo)控件：AppEntry.qml

///?文件：AppEntry.qml

Pane?{
????id:?root
????property?var?app
????[...]

????//?當(dāng)鼠標(biāo)移動(dòng)到該圖標(biāo)時(shí)，發(fā)送信號(hào)?hovered()
????signal?hovered()
????MouseArea?{
????????[...]
????????onHoveredChanged:?{
????????????if?(hovered)?{
????????????????root.hovered()
????????????}
????????}
????}

????Column?{
????????anchors.fill:?parent

????????Image?{
????????????source:?"image://icons/"? ?app[1]
????????????[...]
????????}

????????Label?{
????????????[...]
????????}
????}
}
在 main.qml 中接受到 AppEntry 控件的 hovered 信號(hào)時(shí)，

需改變其背景色以提示用戶已選中圖標(biāo)。

//?文件：main.qml

Repeater?{
????model:?page.length

????AppEntry?{
????????app:?page[index]
????????[...]
????????//?selected?改變時(shí)，背景色會(huì)變化
????????selected:?swipeView.selectedIndex?===?index
????????onHovered:?{
????????????swipeView.select(index)
????????}
????????[...]
????}
}


運(yùn)行效果：

這是已經(jīng)能顯示選中狀態(tài)了，但是仍無(wú)法啟動(dòng)應(yīng)用。

6. 支持啟動(dòng)應(yīng)用

在 Qt 里，可以使用 QProcess 來(lái)創(chuàng)建進(jìn)程。

這里我們創(chuàng)建一個(gè) QProcess 的子類用于運(yùn)行 APP。

QProcess 的子類：

//?文件：process.cpp
void?Process::start(const?QString?