首页 > 系统相关 >用 Qt 给嵌入式Linux加个桌面

用 Qt 给嵌入式Linux加个桌面

时间:2023-07-15 22:44:59浏览次数:38  
标签:... Qt app 嵌入式 Linux main APP 图标

原文:https://www.linuxprobe.com/qt-add-desktop.html

1. 创建 QML 应用

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

用 Qt 给嵌入式Linux加个桌面用 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加个桌面

怎么样,你们学会了吗?

标签:...,Qt,app,嵌入式,Linux,main,APP,图标
From: https://www.cnblogs.com/bruce1992/p/17557122.html

相关文章

  • 【权限维持】Linux下的几种隐藏技术
    0x00前言攻击者在获取服务器权限后,会通过一些技巧来隐藏自己的踪迹和后门文件,本文介绍Linux下的几种隐藏技术。0x01隐藏文件Linux下创建一个隐藏文件:touch.test.txttouch命令可以创建一个文件,文件名前面加一个点就代表是隐藏文件,如下图:一般的Linux下的隐藏目录使用......
  • linux 中 asprta 软件的安装
     001、下载软件:官网:https://www.ibm.com/aspera/connect/ 002、上传至linux系统中并安装tar-xzvfibm-aspera-connect_4.2.6.393_linux_x86_64.tar.gzbashibm-aspera-connect_4.2.6.393_linux_x86_64.sh 003、 ......
  • linux 中gz文件解压的同时保留源文件
     001、[root@PC1test01]#ls##测试文件a.txt.gz[root@PC1test01]#gzip-dca.txt.gz>a.txt##解压,同时保留源文件[root@PC1test01]#lsa.txta.txt.gz[root@PC1test01]#cata.txt12345678910。  ......
  • linux 中 md5sum -c选项
     001、[root@PC1test01]#ls[root@PC1test01]#seq5>a.txt;seq3>b.txt##生成测试数据[root@PC1test01]#lsa.txtb.txt[root@PC1test01]#md5sumb.txt>md5.txt##生成b.txt的MD5值[root@PC1test01]#lsa.txtb.txtmd5.txt[root......
  • QT——QTreeView相关操作
    1、判断是否为根节点QModelIndexcurrentIndex=treeView->currentIndex();QStandardItem*currentItem=model->itemFromIndex(currentIndex);//如果是根目录,是否存在父节点来判断是否为根目录boolisRootItem=(currentItem->parent()==nullptr);2、存储并获取数据......
  • linux 批量生成文件 随机数据
    seq20|xargs-iddif=/dev/urandomof=$(date+"%Y%m%d_%H%M%S"){}.databs=102400count=1#随机生成20个100K数据文件,文件名字为“日期时间_序号.data”nohupseq100000|xargs-iddif=/dev/zeroof={}.databs=102400count=1>>/dev/null2>&1&#加上后台运......
  • [转]Linux终端更改字体(一般用来针对高分辨率屏幕使用大字体)
    原文地址:Linux终端更改字体-知乎1概述这里的终端是指通过F1-F6/F2-F7进入的纯命令终端。修改字体可以通过setfont命令。2查看字体可以通过查找目录consolefonts来确定本地机器上的字体位于哪里:find/-nameconsolefonts-typedupdatedblocateconsolefonts比如......
  • pyqt6计时小工具
    这个项目最初的目的是可以倒计时,然后有个文本框,这样方便记录手机充电10分钟充了百之几,结束后可播放一段音频然后提醒一下这样子的,当然有时有些后台任务预计多久结束然后提醒一下也不错的。下面上代码及效果图 fromPyQt6importQtCore,QtGui,QtWidgetsfromPyQt6.QtMultim......
  • Linux下相对路径和绝对路径
    绝对路径cd/home/gyd/Desktop相对路径cdDesktop  特殊路径符1).表示当前目录2)..表示上一级目录3)~表示HOME目录......
  • Linux shell 获取脚本文件后面的参数的方法
    原文:https://blog.csdn.net/tcjy1000/article/details/124558257环境Linux主机:Ubuntu20.04.4LTS获取shell脚本参数Linuxshell可以通过$0$1$2等获取shell脚本本身及后面的参数获取路径错误示例:#!/bin/bashecho"--createLinuxrootfsbegin--"echo'$1'rootfs_path......