#  图形界面开发

***Copyright © Quectel Wireless Solutions Co., Ltd. 2026. All rights reserved.***

---

# Qt 图形界面开发

## 环境准备

```bash
sudo apt update
sudo apt install -y build-essential cmake ninja-build qt6-base-dev qt6-base-dev-tools qt6-declarative-dev qt6-declarative-dev-tools qt6-wayland
```

## 创建工程

本示例路径：

```plaintext
su - pi
mkdir -p /home/pi/appQtQuectelDemo
cd /home/pi/appQtQuectelDemo
```

本示例工程包含以下三个源码文件：

- main.cpp（程序入口文件）

- Main.qml（Qt Quick 图形界面）

- CMakeLists.txt（CMake 工程配置文件）

### 创建 main.cpp

文件内容：

```plaintext
#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.loadFromModule("QtQuectelDemo", "Main");

    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}
```

### 创建 Main.qml

文件内容：

```yaml
import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: "Qt Quectel Demo"

    Column {
        anchors.centerIn: parent
        spacing: 20

        Text {
            id: label
            text: "Hello Quectel Pi M2!"
            font.pixelSize: 28
        }

        Button {
            text: "Click Me"

            onClicked: {
                label.text = "Qt Demo Running!"
            }
        }
    }
}
```

### 创建 CMakeLists.txt

文件内容：

```cmake
cmake_minimum_required(VERSION 3.16)

project(QtQuectelDemo LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2)

qt_standard_project_setup(REQUIRES 6.8)

qt_add_executable(appQtQuectelDemo
    main.cpp
)

qt_add_qml_module(appQtQuectelDemo
    URI QtQuectelDemo
    VERSION 1.0
    QML_FILES
        Main.qml
)

target_link_libraries(appQtQuectelDemo
    PRIVATE
        Qt6::Quick
        Qt6::QuickControls2
)

install(TARGETS appQtQuectelDemo
    BUNDLE DESTINATION .
    RUNTIME DESTINATION bin
)
```

## 编译工程

在源码目录执行：

```bash
mkdir -p build
cd build
cmake -G Ninja ..
ninja
```

生成可以执行文件appQtQuectelDemo。

## 运行程序

```plaintext
export XDG_RUNTIME_DIR=/run/user/1007
export WAYLAND_DISPLAY=wayland-0
export QT_QPA_PLATFORM=wayland
./appQtQuectelDemo
```

## 运行效果

程序启动后将显示 Qt 图形界面窗口。

```{image} images/image_VbqZbFyDQoSIA1xftOccYp65nTx.webp
:width: 1280px
:height: 800px
:align: center
```

```{image} images/image_DAXNbNkoRou7d1xMCjQcg6Ofndb.webp
:width: 1280px
:height: 800px
:align: center
```

# wxWidgets 图形界面开发

## 环境准备

```bash
sudo apt update
sudo apt install -y build-essential cmake ninja-build libwxgtk3.2-dev libgtk-3-0
```

## 创建工程

本示例路径：

```plaintext
su - pi
mkdir -p /home/pi/appWxQuectelDemo
cd /home/pi/appWxQuectelDemo
```

### 创建 main.cpp

文件内容

```cpp
#include <wx/wx.h>

class QuectelFrame : public wxFrame
{
public:
    QuectelFrame()
        : wxFrame(nullptr,
                  wxID_ANY,
                  "wxWidgets Quectel Demo",
                  wxDefaultPosition,
                  wxSize(640, 480))
    {
        wxPanel *panel = new wxPanel(this);
        wxBoxSizer *mainSizer = new wxBoxSizer(wxVERTICAL);

        statusText = new wxStaticText(
            panel,
            wxID_ANY,
            "Hello Quectel Pi M2!"
        );

        wxFont font = statusText->GetFont();
        font.SetPointSize(20);
        statusText->SetFont(font);

        wxButton *button = new wxButton(
            panel,
            wxID_ANY,
            "Click Me"
        );

        mainSizer->AddStretchSpacer();
        mainSizer->Add(statusText, 0, wxALIGN_CENTER | wxALL, 10);
        mainSizer->Add(button, 0, wxALIGN_CENTER | wxALL, 10);
        mainSizer->AddStretchSpacer();

        panel->SetSizer(mainSizer);

        button->Bind(
            wxEVT_BUTTON,
            &QuectelFrame::OnButtonClick,
            this
        );

        Centre();
    }

private:
    wxStaticText *statusText;

    void OnButtonClick(wxCommandEvent &event)
    {
        statusText->SetLabel("wxWidgets Demo Running!");
    }
};

class QuectelApp : public wxApp
{
public:
    bool OnInit() override
    {
        QuectelFrame *frame = new QuectelFrame();
        frame->Show(true);
        return true;
    }
};

wxIMPLEMENT_APP(QuectelApp);
```

### 创建 CMakeLists.txt

文件内容

```cmake
cmake_minimum_required(VERSION 3.16)

project(WxQuectelDemo LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(wxWidgets REQUIRED COMPONENTS core base)

include(${wxWidgets_USE_FILE})

add_executable(appWxQuectelDemo
    main.cpp
)

target_link_libraries(appWxQuectelDemo
    PRIVATE
        ${wxWidgets_LIBRARIES}
)
```

## 编译工程

在源码目录执行：

```bash
mkdir -p build
cd build
cmake -G Ninja ..
ninja
```

## 运行程序

```plaintext
export XDG_RUNTIME_DIR=/run/user/1000
export WAYLAND_DISPLAY=wayland-0
./appWxQuectelDemo
```

## 运行效果

程序启动后将显示 wx 图形界面窗口。

```{image} images/image_QDQrbfLyyo2WW8xq4eLcvSBdnqe.webp
:width: 1280px
:height: 800px
:align: center
```

```{image} images/image_IGJ3b8XLEoXlMhxPBhQc7AVynrh.webp
:width: 1280px
:height: 800px
:align: center
```