良许Linux教程网 干货合集 通过Qt 给嵌入式Linux加个桌面

通过Qt 给嵌入式Linux加个桌面

本篇文章重点为大家分享一下如何用 Qt 实现一个 launcher (程序启动器)。代码很少,C++ 部分大约 100行代码。

下面是实现过程。

1. 创建 QML 应用

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

通过Qt 给嵌入式Linux加个桌面

然后一路点击 next 直到 finish 。

2. 解析配置文件

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

# 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 字段是应用的名称,

Exec 字段是应用的启动命令

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

解析配置文件:

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

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

运行效果:

// 打印出所有的 app 启动信息

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

3. 实现整体布局

我们通过 SwipeView 来实现滑动翻页的功能,参考我之前的文章:《Qt 官方示例 | 这几个 QML 版的 HelloWorld 你学会了吗?》至于单独一页的布局,我们可以使用 Repeater 这个控件。Repeater 可以帮我们生成重复的内容,这里我们规定一页最多显示 24 个 app。

通过 SwipeView + Repeater 实现布局:

// 文件: 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"
                       }
                   }
               }
           }
       }
   }

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

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

运行效果:

用 Qt 给嵌入式Linux加个桌面用 Qt 给嵌入式Linux加个桌面

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

4. 支持显示应用图标

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

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

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

显示 APP 图标:

// 文件:main.qml

Grid {
   [...]
   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]
               [...]
           }
       }
   }
}

改动非常少。

运行效果:

用 Qt 给嵌入式Linux加个桌面用 Qt 给嵌入式Linux加个桌面

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

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.qml

Repeater {
   model: page.length

   AppEntry {
       app: page[index]
       [...]
       // selected 改变时,背景色会变化
       selected: swipeView.selectedIndex === index
       onHovered: {
           swipeView.select(index)
       }
       [...]
   }
}

运行效果:

用 Qt 给嵌入式Linux加个桌面用 Qt 给嵌入式Linux加个桌面

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

6. 支持启动应用

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

QProcess 的子类:

// 文件:process.cpp
void Process::start(const QString &program, const QVariantList &arguments)
{
   [...]
   QProcess::startDetached(program);
}

// 文件:process.h
class Process : public QProcess
{
   Q_OBJECT

public:
   Process(QObject *parent = nullptr);

   Q_INVOKABLE void start(const QString &program, const QVariantList &arguments = {});
};

// 文件:main.cpp
int main(int argc, char *argv[])
{
   // 将 Process 的实例传递给前端
   engine.rootContext()->setContextProperty("proc", new Process(&engine));
}

前端处理点击事件:

// 文件:AppEntry.qml

signal clicked()
MouseArea {
   [...]
   onClicked: {
       root.clicked()
   }
}

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

// 文件:main.qml

AppEntry {
   app: page[index]
   [...]
   // 主窗口启动 APP
   onClicked: {
       exec(app[2])
   }
   [...]
}

function exec(program) {
   console.debug("Exec: " + program)
   proc.start(program)
   Qt.quit();
}

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

运行效果:

用 Qt 给嵌入式Linux加个桌面用 Qt 给嵌入式Linux加个桌面

怎么样,你们学会了吗?

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部