明天给大家分享一下：如何用 Qt 实现一个 launcher (程序启动器)。

运行成果：

github 链接：

https://github.com/alamminsal...

代码很少，C++ 局部大概 100行代码。

上面是实现过程。

1. 创立 QML 利用

在 Qt Creator 顺次点击：

-> File -> New File or Project

-> Applications -> Qt Quick Application

而后一路点击 next 直到 finish 。

2. 解析配置文件

Linux 零碎里装置过的利用，

都会在 /usr/share/applications 目录下有相应的配置文件，

用于阐明如何启动该利用，如下：

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

以 bcompare.desktop 为例：

[Desktop Entry]Name=Beyond CompareExec=bcompareIcon=bcompare...

字段含意：

Name 字段是利用的名称，
Exec 字段是利用的启动命令，
Icon 字段是利用的图标名称，

解析配置文件：

// 文件：main.cppQVariantList 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());    [...]}

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

运行成果：

// 打印出所有的 app 启动信息exec:  "xpad" icon:  "xpad" name:  "Xpad"[...]

3. 实现整体布局

咱们通过 SwipeView 来实现滑动翻页的性能，参考我之前的文章：

《Qt 官网示例 | 这几个 QML 版的 HelloWorld 你学会了吗？》

至于独自一页的布局，咱们能够应用 Repeater 这个控件。

Repeater 能够帮咱们生成反复的内容，这里咱们规定一页最多显示 24 个 app。

通过 SwipeView + Repeater 实现布局：

// 文件: main.qmlSwipeView {        [...]        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"                        }                    }                }            }        }    }

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

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

运行成果：

这时候曾经反对左右滑动了，然而还没填入 APP 信息。

4. 反对显示利用图标

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

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

咱们须要在前端界面中应用 APP 的图标替换掉 Qt logo。

显示 APP 图标：

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

改变非常少。

运行成果：

这时仅反对显示图标，然而仍不反对鼠标选中。

5. 反对选中利用

选中利用须要增加对鼠标 hover 事件的解决。

当鼠标挪动到某个图标上时，Qt 会捕捉到鼠标 hover 事件，并传递给以后焦点所在的控件上。

咱们将 APP 的界面代码抽取进去，独自放在 AppEntry.qml，使其成为一个独立的控件，

而后再在其中增加对鼠标 hover 事件的解决。

图标控件：AppEntry.qml

/// 文件：AppEntry.qml Pane {    id: root    property var app    [...]    // 当鼠标挪动到该图标时，发送信号 hovered()    signal hovered()    MouseArea {        [...]        onHoveredChanged: {            if (hovered) {                root.hovered()            }        }    }    Column {        anchors.fill: parent        Image {            source: "image://icons/" + app[1]            [...]        }        Label {            [...]        }    }}

在 main.qml 中承受到 AppEntry 控件的 hovered 信号时，

需扭转其背景色以提醒用户已选中图标。

// 文件：main.qmlRepeater {    model: page.length    AppEntry {        app: page[index]        [...]        // selected 扭转时，背景色会变动        selected: swipeView.selectedIndex === index        onHovered: {            swipeView.select(index)        }        [...]    }}

运行成果：

这是曾经能显示选中状态了，然而仍无奈启动利用。

6. 反对启动利用

在 Qt 里，能够应用 QProcess 来创立过程。

这里咱们创立一个 QProcess 的子类用于运行 APP。

QProcess 的子类：

// 文件：process.cppvoid Process::start(const QString &program, const QVariantList &arguments){    [...]    QProcess::startDetached(program);}// 文件：process.hclass Process : public QProcess{    Q_OBJECTpublic:    Process(QObject *parent = nullptr);    Q_INVOKABLE void start(const QString &program, const QVariantList &arguments = {});};// 文件：main.cppint main(int argc, char *argv[]){    // 将 Process 的实例传递给前端    engine.rootContext()->setContextProperty("proc", new Process(&engine));}

前端解决点击事件：

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

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

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

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

运行成果：

怎么样，你们学会了吗？

—— The End ——

举荐浏览：

专辑 | Linux 驱动开发

专辑 | Linux 零碎编程

专辑 | 每天一点 C

专辑 | Qt 入门

想进交换群？

后盾回复【加群】，我拉你进群。