做嵌入式界面开发不知道选哪个GUI框架？这份最全对比分析帮你选出最适合的方案！

做嵌入式界面开发，到底该选哪个GUI框架？

的确 ，目前市面上的GUI框架太多了，每个都说自己最好用。今天就来一次大盘点，把主流的几个GUI框架全部扒个底朝天！

GUI框架生态全景图

LVGL：开源界面框架的王者

相关链接

• 官方网站：https://lvgl.io/
• GitHub仓库：https://github.com/lvgl/lvgl
• 官方文档：https://docs.lvgl.io/
• 在线演示：https://lvgl.io/demos
• 论坛社区：https://forum.lvgl.io/

为什么这么火？

LVGL（Light and Versatile Graphics Library） 绝对是当前最火的嵌入式GUI框架！

核心优势：

• 完全免费：MIT开源协议，商用无忧
• 功能强劲：控件丰富，动画流畅
• 资源友善：最低80KB Flash + 12KB RAM
• 生态完善：社区活跃，资料丰富

示例代码：

基础控件创建

// LVGL代码示例：创建一个按钮
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, 120, 50);
lv_obj_center(btn);

lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, "点击我");
lv_obj_center(label);

复杂布局示例

// 创建一个表格布局
lv_obj_t * table = lv_table_create(lv_scr_act());
lv_table_set_col_cnt(table, 2);
lv_table_set_row_cnt(table, 4);
lv_obj_set_width(table, 300);
lv_obj_center(table);

// 填充表格数据
lv_table_set_cell_value(table, 0, 0, "项目");
lv_table_set_cell_value(table, 0, 1, "数值");
lv_table_set_cell_value(table, 1, 0, "温度");
lv_table_set_cell_value(table, 1, 1, "25°C");
lv_table_set_cell_value(table, 2, 0, "湿度");
lv_table_set_cell_value(table, 2, 1, "60%");
lv_table_set_cell_value(table, 3, 0, "压力");
lv_table_set_cell_value(table, 3, 1, "1013hPa");

特色功能：

• 丰富控件：按钮、图表、列表、滑块等
• 高级效果：动画、反锯齿、半透明
• 多输入支持：触摸、鼠标、键盘、编码器
• 多显示器：同时支持多个显示设备
• 国际化：UTF-8编码，多语言支持

适用场景

• ✅ 资源受限的MCU项目
• ✅ 快速原型开发
• ✅ 开源项目
• ✅ 学习和教育

TouchGFX：ST官方的华丽之选

相关链接

• 官方网站：https://www.st.com/en/development-tools/touchgfxdesigner.html
• GitHub仓库：https://github.com/STMicroelectronics/TouchGFX
• 开发者文档：https://touchgfx.zendesk.com/
• 示例项目：https://github.com/STMicroelectronics/STM32CubeH7
• 设计工具下载：TouchGFX Designer

ST的野心之作

2018年被ST收购后，TouchGFX 成为STM32平台的官方GUI解决方案。

视觉震撼：

• 界面效果极其华丽
• 动画效果堪比手机APP
• 支持复杂的视觉特效
• 接近商业级的用户体验

TouchGFX Designer

可视化设计工具的典范：

• 拖拽式界面设计
• 实时预览效果
• 丰富的控件库
• 移动端风格的界面模板

TouchGFX代码示例

基础控件创建：

#include <touchgfx/widgets/Button.hpp>
#include <touchgfx/widgets/TextAreaWithOneWildcard.hpp>

class MainView : public MainViewBase
{
public:
    MainView();
    virtual ~MainView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    
    // 按钮点击回调
    virtual void buttonClicked();

protected:
    Button myButton;
    TextAreaWithOneWildcard statusText;
};

void MainView::setupScreen()
{
    // 设置按钮位置和大小
    myButton.setXY(100, 200);
    myButton.setWidthHeight(200, 80);
    
    // 设置按钮动作
    myButton.setAction(buttonClicked);
    
    // 添加到容器
    add(myButton);
}

void MainView::buttonClicked()
{
    // 按钮点击处理逻辑
    statusText.setWildcard(Unicode::strncpy(textBuffer, "按钮被点击!", 20));
    statusText.invalidate();
}

硬件要求

• 最低配置：STM32F429（180MHz + 8MB外部RAM）
• 推荐配置：STM32F7/H7系列
• 内存需求：相对较高

适用场景

• ✅ STM32平台项目
• ✅ 对界面效果要求高的产品
• ✅ 有充足硬件资源的项目
• ❌ 资源受限的低端MCU

emWin：工业级的老牌劲旅

相关链接

• 官方网站：https://www.segger.com/products/user-interface/emwin/
• 用户手册：emWin User Guide & Reference Manual
• 示例代码：emWin Examples
• 商业授权：License Information
• 开发工具：AppWizard

20年的技术沉淀

emWin（前身uCGUI） 是SEGGER公司的商业GUI框架，有着20年的发展历史。

核心特点：

• 工业级稳定性：经过大量项目验证
• 文档完善：技术资料超级详细
• 功能成熟：API设计合理，使用简单
• 商业支持：提供专业技术支持

示例代码：

基础控件示例

// 创建按钮
WM_HWIN hButton;
hButton = BUTTON_CreateEx(10, 10, 80, 30, 
                         WM_HBKWIN, WM_CF_SHOW, 
                         0, GUI_ID_BUTTON0);
BUTTON_SetText(hButton, "确定");

窗口管理系统

// 创建主窗口
WM_HWIN CreateMainWindow(void) {
    WM_HWIN hWin;
    
    // 创建窗口
    hWin = WM_CreateWindowAsChild(
        0, 0, 320, 240,          // 位置和大小
        WM_HBKWIN,               // 父窗口
        WM_CF_SHOW,              // 创建标志
        _cbMainWindow,           // 回调函数
        0                        // 额外字节
    );
    
    return hWin;
}

// 窗口回调函数
static void _cbMainWindow(WM_MESSAGE * pMsg) {
    switch (pMsg->MsgId) {
    case WM_PAINT:
        GUI_SetBkColor(GUI_WHITE);
        GUI_Clear();
        GUI_SetColor(GUI_BLACK);
        GUI_DispStringAt("emWin 主窗口", 10, 10);
        break;
        
    case WM_NOTIFY_PARENT:
        if (pMsg->Data.v == WM_NOTIFICATION_CLICKED) {
            int Id = WM_GetId(pMsg->hWinSrc);
            switch (Id) {
            case GUI_ID_BUTTON0:
                GUI_MessageBox("按钮被点击!", "提示", GUI_MESSAGEBOX_CF_MOVEABLE);
                break;
            }
        }
        break;
        
    default:
        WM_DefaultProc(pMsg);
    }
}

适用场景

• ✅ 商业项目（有预算）
• ✅ 工业控制设备
• ✅ 医疗设备
• ✅ 对稳定性要求极高的应用

Qt for MCU：桌面级的奢华体验

相关链接

• 官方网站：https://www.qt.io/product/qt-for-mcus
• 官方文档：Qt for MCUs Documentation
• 示例项目：Qt for MCUs Examples
• 商业授权：Qt Licensing
• 开发工具：Qt Creator

Qt的MCU野心

Qt for MCU 是Qt公司推出的嵌入式版本，将桌面级的开发体验带到MCU平台。

发展历程：

• 2018年：Embedded World首次展示
• 2019年：性能大幅改善
• 2019年底：正式发布V1.0版本

技术特色

• 桌面级体验：继承Qt的设计理念
• QML声明式UI：界面开发更简单
• Qt Creator支持：熟悉的开发环境
• 现代化界面：符合当前UI设计趋势

示例代码：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

class SensorData : public QObject
{
    Q_OBJECT
    Q_PROPERTY(float temperature READ temperature NOTIFY temperatureChanged)
    Q_PROPERTY(float humidity READ humidity NOTIFY humidityChanged)
    
public:
    explicit SensorData(QObject *parent = nullptr) : QObject(parent) {}
    
    float temperature() const { return m_temperature; }
    float humidity() const { return m_humidity; }
    
public slots:
    void updateSensorData() {
        // 模拟传感器数据读取
        m_temperature = readTemperatureSensor();
        m_humidity = readHumiditySensor();
        
        emit temperatureChanged();
        emit humidityChanged();
    }
    
signals:
    void temperatureChanged();
    void humidityChanged();
    
private:
    float m_temperature = 25.0f;
    float m_humidity = 50.0f;
    
    float readTemperatureSensor() {
        // 实际的传感器读取代码
        return 20.0f + (rand() % 200) / 10.0f;
    }
    
    float readHumiditySensor() {
        // 实际的传感器读取代码
        return 40.0f + (rand() % 400) / 10.0f;
    }
};

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    
    QQmlApplicationEngine engine;
    
    // 注册C++类型到QML
    SensorData sensorData;
    engine.rootContext()->setContextProperty("sensorData", &sensorData);
    
    // 启动定时器更新数据
    QTimer timer;
    QObject::connect(&timer, &QTimer::timeout, &sensorData, &SensorData::updateSensorData);
    timer.start(1000);
    
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    
    return app.exec();
}

#include "main.moc"

硬件要求

支持平台：

• STM32F7/H7系列
• NXP i.MX RT1050
• 瑞萨RH850

资源需求：较高（需要外部RAM）

适用场景

• ✅ 高端嵌入式产品
• ✅ 有Qt开发经验的团队
• ✅ 对界面体验要求极高的项目
• ❌ 资源受限的应用

Storyboard：专业级的GUI设计平台

相关链接

• 官方网站：https://www.cranksoftware.com/storyboard
• 开发者文档：Storyboard Documentation
• 示例项目：Storyboard Demos
• 商业授权：Contact Sales

Crank Software的杰作

Storyboard 是一款专业的GUI设计和开发平台，在工业和汽车领域有很强的影响力。

核心优势：

• 设计师友善：专为UI/UX设计师打造
• 动画专业：支持复杂的动画效果
• 行业认证：通过多项工业标准认证
• 工具链完整：从设计到部署一站式

支持平台

硬件覆盖：

• ARM Cortex-A/M系列
• NXP、ST、TI等主流厂商
• Linux、FreeRTOS等操作系统

Altia GUI：汽车级的专业选择

相关链接

• 官方网站：https://www.altia.com/
• 产品文档：Altia Documentation
• 汽车案例：Automotive Solutions
• 商业授权：Contact Altia
• 认证信息：AutomotiveSPICE & ISO 26262

30年的行业积淀

Altia 有着近30年的GUI开发经验，在汽车电子领域有着绝对的权威地位。

认证实力：

• AutomotiveSPICE认证：汽车级HMI一级认证
• 功能安全：符合ISO 26262标准
• 专业工具链：三款专业软件组成

三大核心工具

1. Altia Design：人机交互界面集成开发环境
2. Altia DeepScreen：自动代码生成工具
3. Altia PhotoProto：在Photoshop中构建交互界面

适用场景

• ✅ 汽车电子项目
• ✅ 安全关键型系统
• ✅ 大型工业设备
• ❌ 小型消费电子

μGFX：简单实用的轻量选择

相关链接

• 官方网站：https://ugfx.io/
• GitHub仓库：https://github.com/ugfx/uGFX
• 官方文档：uGFX Documentation
• 示例代码：uGFX Examples
• 商业支持：uGFX Commercial

务实派的代表

μGFX 虽然界面效果不如TouchGFX华丽，但胜在简单实用。

特点：

• 功能实用：满足基本GUI需求
• 配置简单：学习成本低
• 价格合理：相对便宜的商业方案
• 平台支持：支持多种硬件平台

μGFX代码示例

基础窗口创建：

#include "gfx.h"

// 窗口句柄
GHandle ghWindow, ghButton, ghLabel;

// 按钮事件处理
static void button_callback(GEvent* pe) {
    if (pe->type == GEVENT_GWIN_BUTTON) {
        gwinSetText(ghLabel, "按钮被点击!", FALSE);
    }
}

int main(void) {
    // 初始化μGFX
    gfxInit();
    
    // 设置默认字体
    gwinSetDefaultFont(gdispOpenFont("UI2"));
    gwinSetDefaultStyle(&WhiteWidgetStyle, FALSE);
    
    // 创建主窗口
    GWindowInit wi;
    wi.show = FALSE;
    wi.x = 0; wi.y = 0;
    wi.width = 320; wi.height = 240;
    wi.parent = 0;
    wi.text = "μGFX Demo";
    wi.customDraw = 0;
    wi.customSize = 0;
    ghWindow = gwinWindowCreate(0, &wi);
    
    // 创建按钮
    wi.show = TRUE;
    wi.x = 50; wi.y = 50;
    wi.width = 100; wi.height = 30;
    wi.parent = ghWindow;
    wi.text = "点击我";
    ghButton = gwinButtonCreate(0, &wi);
    
    // 创建标签
    wi.x = 50; wi.y = 100;
    wi.width = 200; wi.height = 20;
    wi.text = "等待点击...";
    ghLabel = gwinLabelCreate(0, &wi);
    
    // 显示窗口
    gwinShow(ghWindow);
    
    // 设置按钮回调
    geventListenerInit(&gl);
    gwinAttachListener(&gl);
    
    // 主循环
    while (1) {
        GEvent* pe = geventEventWait(&gl, TIME_INFINITE);
        button_callback(pe);
    }
}

适用场景

• ✅ 中小型项目
• ✅ 对界面要求不高的应用
• ✅ 快速开发需求
• ✅ 预算有限的项目

ThreadX GUIX：微软的工业级方案

相关链接

• 官方网站：https://azure.microsoft.com/en-us/products/rtos/
• GitHub仓库：https://github.com/azure-rtos/guix
• 官方文档：Azure RTOS GUIX Documentation
• 示例项目：GUIX Examples
• 安全认证：Safety Certifications

微软的嵌入式野心

GUIX 是微软Azure RTOS套件的一部分，专为深度嵌入式和IoT应用设计。

GUIX代码示例

基础窗口应用：

#include "gx_api.h"

// 主窗口定义
GX_WINDOW main_window;
GX_BUTTON my_button;
GX_PROMPT status_prompt;

// 按钮事件处理
UINT button_event_handler(GX_WIDGET *widget, GX_EVENT *event_ptr)
{
    switch(event_ptr->gx_event_type)
    {
        case GX_SIGNAL(ID_MY_BUTTON, GX_EVENT_CLICKED):
            gx_prompt_text_set(&status_prompt, "按钮被点击!");
            break;
            
        default:
            return gx_window_event_process((GX_WINDOW*)widget, event_ptr);
    }
    return GX_SUCCESS;
}

// 应用初始化
VOID application_define(void *first_unused_memory)
{
    // 创建主窗口
    gx_window_create(&main_window, "主窗口", GX_NULL,
                     GX_STYLE_BORDER_RAISED, ID_MAIN_WINDOW,
                     &main_window_size);
                     
    // 设置事件处理函数
    gx_widget_event_process_set(&main_window, button_event_handler);
    
    // 创建按钮
    gx_button_create(&my_button, "我的按钮", &main_window,
                     GX_STYLE_BUTTON_PUSHED | GX_STYLE_ENABLED,
                     ID_MY_BUTTON, &button_size);
                     
    // 创建状态提示
    gx_prompt_create(&status_prompt, "状态", &main_window,
                     0, GX_STYLE_TEXT_CENTER | GX_STYLE_ENABLED,
                     ID_STATUS_PROMPT, &prompt_size);
    gx_prompt_text_set(&status_prompt, "等待操作...");
    
    // 显示主窗口
    gx_widget_show(&main_window);
}

适用场景

• ✅ 安全关键型应用
• ✅ 需要认证的项目
• ✅ 微软生态的项目
• ✅ Azure IoT集成

LLGUI：国产GUI的新希望

相关链接

• 开源仓库：https://gitee.com/gzbkey/LingLongGUI

玲珑GUI的特色

LLGUI（玲珑GUI） 是一套国产的单片机GUI解决方案。

核心理念：

• 成本优势：取代串口屏，降低产品成本
• 自主可控：软硬件完全自主
• 配套完整：开发、下载、升级工具齐全

技术特点：

• 图形化界面编辑器
• 自动生成C代码
• 支持在线升级
• 配套Bootloader

LLGUI代码示例

基础界面创建：

#include "llgui.h"

// 控件ID定义
#define ID_BUTTON_START    1
#define ID_LABEL_STATUS    2
#define ID_PROGRESS_BAR    3

// 全局控件句柄
llgui_obj_t *btn_start;
llgui_obj_t *label_status;
llgui_obj_t *progress_bar;

// 按钮点击回调函数
void btn_start_clicked(llgui_obj_t *obj, llgui_event_t event)
{
    if(event == LLGUI_EVENT_CLICKED)
    {
        // 更新状态标签
        llgui_label_set_text(label_status, "正在处理...");
        
        // 启动进度条动画
        for(int i = 0; i <= 100; i += 10)
        {
            llgui_progress_set_value(progress_bar, i);
            llgui_delay_ms(100);
        }
        
        llgui_label_set_text(label_status, "处理完成!");
    }
}

// 界面初始化
void ui_init(void)
{
    // 初始化LLGUI
    llgui_init();
    
    // 创建开始按钮
    btn_start = llgui_button_create(NULL);
    llgui_obj_set_pos(btn_start, 50, 50);
    llgui_obj_set_size(btn_start, 100, 40);
    llgui_button_set_text(btn_start, "开始");
    llgui_obj_set_event_cb(btn_start, btn_start_clicked);
    
    // 创建状态标签
    label_status = llgui_label_create(NULL);
    llgui_obj_set_pos(label_status, 50, 110);
    llgui_obj_set_size(label_status, 200, 30);
    llgui_label_set_text(label_status, "准备就绪");
    
    // 创建进度条
    progress_bar = llgui_progress_create(NULL);
    llgui_obj_set_pos(progress_bar, 50, 160);
    llgui_obj_set_size(progress_bar, 200, 20);
    llgui_progress_set_value(progress_bar, 0);
}

int main(void)
{
    // 系统初始化
    system_init();
    
    // UI初始化
    ui_init();
    
    // 主循环
    while(1)
    {
        llgui_task_handler();
        delay_ms(10);
    }
}

适用场景

• ✅ 国产化项目
• ✅ 成本敏感的应用
• ✅ 替代串口屏的需求
• ✅ 自主可控要求高的项目

对比分析

资源占用对比

GUI框架选择指南

硬件资源

低端MCU（<100MHz, <128KB Flash）：
├── LLGUI（最轻量）
└── LVGL（基础版本）

中端MCU（100-400MHz, 128KB-1MB Flash）：
├── LVGL（完整功能）
├── emWin
└── μGFX

高端MCU（>400MHz, >1MB Flash + 外部RAM）：
├── TouchGFX
├── Qt for MCU
├── Storyboard
└── Altia

选型决策流程图

技术架构对比

对比分析

性能对比

运行效率：TouchGFX > emWin > LVGL > Qt for MCU
内存占用：LLGUI < LVGL < μGFX < emWin < TouchGFX
界面效果：Qt for MCU > TouchGFX > Storyboard > LVGL
开发效率：Qt for MCU > TouchGFX > LVGL > emWin

生态对比

社区活跃度：LVGL >> TouchGFX > emWin > 其他
文档完善度：emWin > TouchGFX > LVGL > 其他
第三方支持：LVGL > emWin > TouchGFX > 其他
工具链完善：TouchGFX > Qt for MCU > emWin > LVGL

互动讨论

你在项目中使用过哪些GUI框架？

觉得哪个框架最好用？为什么？

在GUI开发中遇到过哪些坑？

对于GUI框架的未来发展有什么见解？

觉得有用的话，记得点赞收藏，让更多嵌入式工程师看到这份详细的对比分析！

关注我，分享更多嵌入式开发技术和经验！