建站
咨詢
售后
建站咨詢
新聞中心
如何用Qt給嵌入式Linux加桌面？Qt是一個(gè)跨平臺(tái)的C++圖形界面應(yīng)用程序框架。它提供給開發(fā)者建立圖形用戶界面所需的功能，廣泛用于開發(fā)GUI程序，也可用于開發(fā)非GUI程序，下面為打擊分享一下使用QT給嵌入式Linux加桌面具體方法。
10年的安福網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整安福建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“安福網(wǎng)站設(shè)計(jì)”,“安福網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
1. 創(chuàng)建 QML 應(yīng)用
在 Qt Creator 依次點(diǎn)擊：-> File -> New File or Project-> Applications -> Qt Quick Application
用 Qt 給嵌入式Linux加個(gè)桌面用 Qt 給嵌入式Linux加個(gè)桌面
然后一路點(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)行效果：
用 Qt 給嵌入式Linux加個(gè)桌面用 Qt 給嵌入式Linux加個(gè)桌面
這時(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)行效果：
用 Qt 給嵌入式Linux加個(gè)桌面用 Qt 給嵌入式Linux加個(gè)桌面
這時(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.qmlRepeater { model: page.length AppEntry { app: page[index] [...] // selected 改變時(shí)，背景色會(huì)變化 selected: swipeView.selectedIndex === index onHovered: { swipeView.select(index) } [...] }}
運(yùn)行效果：
用 Qt 給嵌入式Linux加個(gè)桌面用 Qt 給嵌入式Linux加個(gè)桌面
這是已經(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 &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 的實(shí)例傳遞給前端
engine.rootContext()->setContextProperty("proc", new Process(&engine));
}
前端處理點(diǎn)擊事件：
// 文件：AppEntry.qml
signal clicked()
MouseArea {
[...]
onClicked: {
root.clicked()
}
}
當(dāng)用戶點(diǎn)擊圖標(biāo)時(shí)，AppEntry 控件會(huì)發(fā)出 clicked() 信號(hào)。
// 文件：main.qml
AppEntry {
app: page[index]
[...]
// 主窗口啟動(dòng) APP
onClicked: {
exec(app[2])
}
[...]
}
function exec(program) {
console.debug("Exec: " + program)
proc.start(program)
Qt.quit();
}
最后調(diào)用到 Process::start()，啟動(dòng) APP。
運(yùn)行效果：
用 Qt 給嵌入式Linux加個(gè)桌面用 Qt 給嵌入式Linux加個(gè)桌面
怎么樣，你們學(xué)會(huì)了嗎？
—— The End ——
當(dāng)前文章：使用QT給嵌入式Linux加桌面具體方法
標(biāo)題來(lái)源：http://m.fisionsoft.com.cn/article/dpdojoe.html
