3个步骤掌握microUI：嵌入式系统的轻量级C语言界面开发方案

2026-04-07 11:20:52作者：秋泉律Samson

评估适用场景：为什么选择microUI作为轻量级UI库

在资源受限的嵌入式环境中，传统UI框架往往因体积庞大、内存占用高而难以适用。microUI作为一款仅1100行ANSI C代码的即时模式(Immediate Mode)UI库，通过零动态内存分配的设计，完美解决了嵌入式系统的资源约束问题。本章节将帮助你判断microUI是否适合你的项目需求，并提供快速启动的环境配置指南。

💡 核心价值：在512KB以下内存环境中实现专业级用户界面，代码量仅相当于传统UI库的5%。

技术选型对比：microUI与同类解决方案

特性	microUI	LVGL	Dear ImGui
代码量	1100行	10万+行	5万+行
内存占用	<10KB	~60KB	~20KB
动态分配	无	有	有
移植难度	低	中	中
控件数量	基础(8种)	丰富(20+种)	丰富(20+种)

📌 实践建议：当项目内存小于128KB或需要极致移植性时，优先选择microUI；需要复杂控件和主题系统时可考虑LVGL；桌面应用原型开发则适合Dear ImGui。

环境配置与快速启动

# 克隆官方仓库
git clone https://gitcode.com/GitHub_Trending/mi/microui
cd microui

# 编译示例程序（以Linux为例）
gcc demo/main.c demo/renderer.c src/microui.c -o microui_demo -lSDL2
./microui_demo

掌握核心特性：构建高效UI的关键技术点

microUI的设计哲学是"做减法"——通过精简但强大的核心功能，实现资源受限环境下的高效UI渲染。本节将深入解析其布局系统、控件体系和渲染机制，帮助你理解如何用最少的代码构建功能完善的用户界面。

实现零内存分配架构：内存优化技巧

microUI通过预分配内存池和栈上操作实现零动态内存分配，这是其能在嵌入式系统中高效运行的核心特性。

#include "microui.h"

// 方法1：栈上分配上下文（推荐嵌入式环境）
mu_Context ctx;
mu_init(&ctx);  // 无需malloc，直接在栈上初始化

// 方法2：静态内存分配（适合无栈环境）
static mu_Context s_ctx;
void system_init() {
  mu_init(&s_ctx);
}

// 配置内存池大小（默认4KB，可根据需求调整）
#define MU_POOL_SIZE 8192  // 增加到8KB以支持更复杂界面
static char s_memory_pool[MU_POOL_SIZE];

// 自定义内存初始化（高级用法）
mu_init_ex(&ctx, s_memory_pool, MU_POOL_SIZE);

💡 最佳实践：始终根据实际UI复杂度调整内存池大小，使用mu_get_used_memory()函数监控内存使用情况，避免池溢出。

构建响应式布局：基于行的界面设计

microUI的布局系统采用创新的"行布局"模型，通过简单的API实现复杂的界面排列。

// 基础两行布局示例
void render_settings_panel(mu_Context *ctx) {
  if (mu_begin_window(ctx, "系统设置", mu_rect(20, 20, 320, 400))) {
    // 第一行：两个等宽按钮
    mu_layout_row(ctx, 2, (int[]){-1, -1}, 0);  // -1表示平均分配空间
    if (mu_button(ctx, "保存设置")) {
      save_system_config();
    }
    if (mu_button(ctx, "恢复默认")) {
      reset_to_defaults();
    }
    
    // 第二行：标签+滑块组合（常用表单模式）
    mu_layout_row(ctx, 2, (int[]){80, -1}, 0);  // 80px固定宽度 + 剩余空间
    mu_label(ctx, "亮度:");
    mu_slider(ctx, &brightness, 0, 100);
    
    // 第三行：复选框组（不等宽布局）
    mu_layout_row(ctx, 3, (int[]){-2, -3, -1}, 0);  // 比例分配（2:3:1）
    mu_checkbox(ctx, "自动启动", &auto_start);
    mu_checkbox(ctx, "夜间模式", &night_mode);
    mu_checkbox(ctx, "声音提醒", &sound_enabled);
    
    mu_end_window(ctx);
  }
}

📌 布局技巧：使用mu_layout_row()前先规划界面分区，固定宽度适合标签，比例分配适合响应式内容，组合使用可创建专业级表单界面。

定制控件外观：主题与样式系统

通过修改mu_Style结构体，可完全定制UI的视觉风格，实现品牌一致性。

// 创建深色主题
void apply_dark_theme(mu_Context *ctx) {
  mu_Style *s = ctx->style;
  
  // 基础颜色配置
  s->colors[MU_COLOR_TEXT] = mu_color(240, 240, 240, 255);        // 浅灰色文本
  s->colors[MU_COLOR_BACKGROUND] = mu_color(30, 30, 30, 255);     // 深灰背景
  s->colors[MU_COLOR_WINDOW] = mu_color(45, 45, 45, 255);         // 窗口背景
  s->colors[MU_COLOR_BUTTON] = mu_color(60, 60, 60, 255);         // 按钮默认色
  s->colors[MU_COLOR_BUTTON_HOVER] = mu_color(80, 80, 80, 255);   // 按钮悬停色
  s->colors[MU_COLOR_BUTTON_PRESSED] = mu_color(100, 100, 100, 255); // 按钮按下色
  
  // 调整控件尺寸
  s->font_size = 14;        // 适合嵌入式屏幕的字体大小
  s->spacing = 6;           // 控件间距
  s->window_border = 1;     // 窗口边框宽度
  s->button_rounding = 3;   // 按钮圆角半径
}

探索场景化应用：从理论到实践的跨越

理解技术特性只是第一步，真正的价值在于将microUI应用到实际项目中。本节通过三个不同行业的应用案例，展示如何针对特定场景优化microUI的使用方式，解决实际开发中的常见挑战。

工业控制界面：STM32环境下的实现

在工业控制领域，稳定可靠的用户界面是人机交互的关键。以下是基于STM32F103C8T6(64KB RAM)的设备控制面板实现：

// 工业控制面板实现
#include "microui.h"
#include "stm32f1xx_hal.h"
#include "lcd.h"  // 假设已实现LCD驱动

mu_Context ui_ctx;
static char temp_buf[16];
static float temperature = 25.5f;
static int fan_speed = 50;
static bool pump_enabled = true;

// 自定义文本渲染函数（适配LCD）
int lcd_text_width(mu_Font font, const char *text, int len) {
  return LCD_GetStringWidth(text) * 0.9;  // 根据实际LCD字体调整
}

int lcd_text_height(mu_Font font) {
  return 16;  // 16px高的字体
}

// 渲染命令处理
void process_render_commands(mu_Context *ctx) {
  mu_Command *cmd;
  while (mu_next_command(ctx, &cmd)) {
    switch (cmd->type) {
      case MU_COMMAND_RECT:
        LCD_DrawRect(cmd->rect.x, cmd->rect.y, 
                    cmd->rect.w, cmd->rect.h,
                    cmd->color);
        break;
      case MU_COMMAND_TEXT:
        LCD_DrawString(cmd->rect.x, cmd->rect.y, 
                      cmd->text, cmd->color);
        break;
      // 处理其他命令类型...
    }
  }
}

// 主界面渲染
void render_control_panel() {
  mu_begin(&ui_ctx);
  
  // 温度监控窗口
  if (mu_begin_window(&ui_ctx, "温度监控", mu_rect(10, 10, 220, 160))) {
    mu_layout_row(&ui_ctx, 1, (int[]){-1}, 0);
    sprintf(temp_buf, "当前温度: %.1f°C", temperature);
    mu_label(&ui_ctx, temp_buf);
    
    mu_layout_row(&ui_ctx, 2, (int[]){80, -1}, 0);
    mu_label(&ui_ctx, "风扇速度:");
    mu_slider(&ui_ctx, &fan_speed, 0, 100);
    
    mu_layout_row(&ui_ctx, 1, (int[]){-1}, 0);
    mu_checkbox(&ui_ctx, "启用水泵", &pump_enabled);
    
    mu_end_window(&ui_ctx);
  }
  
  mu_end(&ui_ctx);
  process_render_commands(&ui_ctx);
}

// 初始化函数
void ui_init() {
  mu_init(&ui_ctx);
  ui_ctx.text_width = lcd_text_width;
  ui_ctx.text_height = lcd_text_height;
  
  // 应用工业风格主题
  apply_industrial_theme(&ui_ctx);
}

🔍 关键适配点：在STM32等资源受限环境中，务必实现高效的文本渲染函数，避免使用浮点运算，将UI更新频率控制在30FPS以内以节省功耗。

物联网设备界面：ESP32的低功耗优化

ESP32等物联网设备通常需要在性能和功耗间取得平衡，以下是针对电池供电设备的UI实现：

// ESP32低功耗UI实现
#include "microui.h"
#include "driver/touch_pad.h"
#include "esp_pm.h"

mu_Context ui_ctx;
static bool low_power_mode = true;
static int update_interval = 5;  // 秒
static int battery_level = 75;

// 触摸输入处理（低功耗模式）
void process_touch_input() {
  if (low_power_mode) {
    // 低功耗模式：仅检测触摸唤醒
    uint16_t touch_value;
    touch_pad_read(TOUCH_PAD_NUM6, &touch_value);
    if (touch_value < 200) {  // 触摸阈值
      mu_input_mousedown(&ui_ctx, MU_MOUSE_LEFT, 120, 160);  // 假设触摸中心
      vTaskDelay(pdMS_TO_TICKS(100));
      mu_input_mouseup(&ui_ctx, MU_MOUSE_LEFT, 120, 160);
      
      // 短暂提高CPU频率处理UI
      esp_pm_config_esp32_t pm_config = {
        .max_freq_mhz = 160,
        .min_freq_mhz = 80
      };
      esp_pm_configure(&pm_config);
      vTaskDelay(pdMS_TO_TICKS(5000));  // 保持唤醒5秒
      
      // 恢复低功耗配置
      pm_config.max_freq_mhz = 80;
      pm_config.min_freq_mhz = 40;
      esp_pm_configure(&pm_config);
    }
  } else {
    // 正常模式：持续检测触摸
    // ...
  }
}

// 电池电量显示控件（自定义控件示例）
void battery_indicator(mu_Context *ctx, int level) {
  mu_Rect rect = mu_layout_next(ctx);
  
  // 绘制电池外框
  mu_draw_rect(ctx, rect, mu_color(200, 200, 200, 255), 1);
  
  // 绘制电池正极
  mu_Rect cap = {rect.x + rect.w, rect.y + rect.h/3, 4, rect.h/3};
  mu_draw_rect(ctx, cap, mu_color(200, 200, 200, 255), 0);
  
  // 根据电量绘制填充部分
  int fill_width = (rect.w - 4) * level / 100;
  mu_Rect fill = {rect.x + 2, rect.y + 2, fill_width, rect.h - 4};
  
  // 根据电量设置不同颜色
  mu_Color color;
  if (level > 60) color = mu_color(0, 255, 0, 255);      // 绿色
  else if (level > 30) color = mu_color(255, 255, 0, 255); // 黄色
  else color = mu_color(255, 0, 0, 255);                  // 红色
  
  mu_draw_rect(ctx, fill, color, 0);
}

// 主界面
void render_iot_dashboard() {
  mu_begin(&ui_ctx);
  
  // 电池状态窗口（顶部状态栏）
  if (mu_begin_window(&ui_ctx, NULL, mu_rect(0, 0, 240, 30))) {
    mu_layout_row(&ui_ctx, 3, (int[]){-2, -1, 30}, 0);
    mu_label(&ui_ctx, "环境监测站");
    
    char buf[10];
    sprintf(buf, "%d%%", battery_level);
    mu_label(&ui_ctx, buf);
    
    battery_indicator(&ui_ctx, battery_level);
    mu_end_window(&ui_ctx);
  }
  
  // 主控制窗口
  if (mu_begin_window(&ui_ctx, "设备控制", mu_rect(10, 40, 220, 180))) {
    mu_layout_row(&ui_ctx, 1, (int[]){-1}, 0);
    mu_checkbox(&ui_ctx, "低功耗模式", &low_power_mode);
    
    mu_layout_row(&ui_ctx, 2, (int[]){100, -1}, 0);
    mu_label(&ui_ctx, "更新间隔:");
    if (mu_input_int(&ui_ctx, &update_interval)) {
      // 更新传感器采样间隔
      set_sensor_interval(update_interval);
    }
    
    mu_end_window(&ui_ctx);
  }
  
  mu_end(&ui_ctx);
  // ... 渲染命令处理
}

📌 低功耗建议：在电池供电设备中，使用mu_set_idle()减少空转渲染，结合触摸唤醒机制，可将功耗降低70%以上。

优化进阶技巧：提升UI体验与性能

掌握基础使用后，通过进阶技巧可以进一步提升microUI的用户体验和性能表现。本节涵盖自定义控件开发、渲染性能优化和跨平台适配等高级主题，帮助你充分发挥microUI的潜力。

开发自定义控件：打造专属交互元素

microUI的设计非常适合扩展，以下是一个工业仪表控件的实现示例：

// 自定义工业仪表控件
// 参数: ctx - UI上下文, id - 控件ID, value - 当前值(0-100), label - 显示标签
void gauge_control(mu_Context *ctx, mu_Id id, float value, const char *label) {
  // 获取布局位置
  mu_Rect rect = mu_layout_next(ctx);
  
  // 更新控件状态
  mu_update_control(ctx, id, rect, MU_INPUT_NONE);
  
  // 绘制背景圆环
  mu_draw_circle(ctx, 
                rect.x + rect.w/2, rect.y + rect.h/2,  // 中心坐标
                rect.w/2 - 4,                          // 半径
                mu_color(60, 60, 60, 255),             // 颜色
                2);                                    // 线宽
  
  // 计算角度 (0-100% 对应 -135° 到 +135°)
  float angle = -135.0f + (value / 100.0f) * 270.0f;
  
  // 绘制指示弧
  mu_draw_arc(ctx,
             rect.x + rect.w/2, rect.y + rect.h/2,  // 中心坐标
             rect.w/2 - 4,                          // 半径
             -135.0f,                               // 起始角度
             angle,                                 // 结束角度
             mu_color(0, 255, 128, 255),            // 颜色
             3);                                    // 线宽
  
  // 绘制指针
  float radians = angle * M_PI / 180.0f;
  int pointer_x = rect.x + rect.w/2 + (int)((rect.w/2 - 8) * cosf(radians));
  int pointer_y = rect.y + rect.h/2 + (int)((rect.h/2 - 8) * sinf(radians));
  mu_draw_line(ctx, 
              rect.x + rect.w/2, rect.y + rect.h/2,  // 起点(中心)
              pointer_x, pointer_y,                 // 终点
              mu_color(255, 255, 255, 255),         // 颜色
              2);                                   // 线宽
  
  // 绘制中心圆点
  mu_draw_circle(ctx, 
                rect.x + rect.w/2, rect.y + rect.h/2,  // 中心坐标
                4,                                    // 半径
                mu_color(255, 255, 255, 255),         // 颜色
                0);                                   // 填充
  
  // 绘制数值标签
  char buf[16];
  sprintf(buf, "%.1f", value);
  mu_Rect text_rect = mu_rect(rect.x, rect.y + rect.h + 5, rect.w, 20);
  mu_draw_text(ctx, buf, text_rect, mu_color(255, 255, 255, 255), MU_OPT_ALIGNCENTER);
  
  // 绘制描述标签
  if (label) {
    text_rect.y += 20;
    mu_draw_text(ctx, label, text_rect, mu_color(200, 200, 200, 255), MU_OPT_ALIGNCENTER);
  }
}

// 使用自定义仪表控件
void render_industrial_panel(mu_Context *ctx) {
  if (mu_begin_window(ctx, "工业监控", mu_rect(10, 10, 300, 200))) {
    // 创建3列布局的仪表组
    mu_layout_row(ctx, 3, (int[]){-1, -1, -1}, 80);  // 每个仪表高度80px
    
    // 温度仪表
    static float temp = 23.5f;
    gauge_control(ctx, mu_str("temp_gauge"), temp, "温度 (°C)");
    
    // 压力仪表
    static float pressure = 65.2f;
    gauge_control(ctx, mu_str("pressure_gauge"), pressure, "压力 (kPa)");
    
    // 流量仪表
    static float flow = 32.8f;
    gauge_control(ctx, mu_str("flow_gauge"), flow, "流量 (L/min)");
    
    mu_end_window(ctx);
  }
}

💡 自定义控件最佳实践：为自定义控件分配唯一ID（使用mu_str()或mu_get_id()），确保状态正确保存；优先使用mu_layout_next()获取布局位置，保持与整体界面风格一致。

优化渲染性能：嵌入式系统的帧率提升

在资源有限的嵌入式系统中，UI渲染性能至关重要。以下是提升帧率的关键优化技巧：

// 渲染性能优化示例
#include "microui.h"
#include "lcd.h"

// 1. 实现脏矩形更新（只重绘变化区域）
mu_Rect dirty_rect = {0, 0, 0, 0};

void mark_dirty_rect(mu_Rect rect) {
  // 合并脏区域
  if (dirty_rect.w == 0 && dirty_rect.h == 0) {
    dirty_rect = rect;
  } else {
    dirty_rect.x = MIN(dirty_rect.x, rect.x);
    dirty_rect.y = MIN(dirty_rect.y, rect.y);
    dirty_rect.w = MAX(dirty_rect.x + dirty_rect.w, rect.x + rect.w) - dirty_rect.x;
    dirty_rect.h = MAX(dirty_rect.y + dirty_rect.h, rect.y + rect.h) - dirty_rect.y;
  }
}

// 2. 优化渲染命令处理
void process_commands_optimized(mu_Context *ctx) {
  mu_Command *cmd;
  dirty_rect = (mu_Rect){0, 0, 0, 0};
  
  // 第一遍：收集脏区域
  while (mu_next_command(ctx, &cmd)) {
    if (cmd->type == MU_COMMAND_RECT || cmd->type == MU_COMMAND_TEXT) {
      mark_dirty_rect(cmd->rect);
    }
  }
  
  // 如果没有脏区域，直接返回
  if (dirty_rect.w == 0 || dirty_rect.h == 0) return;
  
  // 准备LCD更新
  LCD_PrepareUpdate(dirty_rect.x, dirty_rect.y, dirty_rect.w, dirty_rect.h);
  
  // 第二遍：只渲染脏区域内的命令
  mu_reset_commands(ctx);
  while (mu_next_command(ctx, &cmd)) {
    // 检查命令是否与脏区域重叠
    if (mu_rect_overlap(cmd->rect, dirty_rect)) {
      // 执行渲染
      switch (cmd->type) {
        case MU_COMMAND_RECT:
          LCD_DrawRect(cmd->rect.x, cmd->rect.y, cmd->rect.w, cmd->rect.h, cmd->color);
          break;
        case MU_COMMAND_TEXT:
          LCD_DrawString(cmd->rect.x, cmd->rect.y, cmd->text, cmd->color);
          break;
        // 处理其他命令类型...
      }
    }
  }
  
  // 提交LCD更新
  LCD_CommitUpdate();
}

// 3. 限制帧率和更新频率
#define TARGET_FPS 30
#define UI_UPDATE_INTERVAL_MS (1000 / TARGET_FPS)

void ui_task(void *param) {
  uint32_t last_update = HAL_GetTick();
  
  while (1) {
    uint32_t now = HAL_GetTick();
    uint32_t delta = now - last_update;
    
    if (delta >= UI_UPDATE_INTERVAL_MS) {
      last_update = now;
      
      // 处理输入
      process_input();
      
      // 渲染UI
      mu_begin(&ui_ctx);
      render_main_ui(&ui_ctx);
      mu_end(&ui_ctx);
      
      // 优化渲染
      process_commands_optimized(&ui_ctx);
    }
    
    // 休眠剩余时间
    uint32_t sleep_time = UI_UPDATE_INTERVAL_MS - (HAL_GetTick() - last_update);
    if (sleep_time > 0) {
      osDelay(sleep_time);
    }
  }
}

🔍 性能优化要点：实现脏矩形更新可减少70-90%的渲染工作量；将UI更新频率控制在30FPS以内，大多数嵌入式应用无需更高帧率；避免在渲染循环中执行复杂计算或IO操作。

跨平台适配方案：从嵌入式到桌面的一致体验

microUI的跨平台特性使其可以在从8位MCU到桌面环境的各种设备上运行。以下是跨平台适配的关键实现：

// 跨平台UI适配层
#include "microui.h"

// 平台抽象层结构体
typedef struct {
  // 输入设备
  void (*init_input)(void);
  void (*read_input)(mu_Context *ctx);
  
  // 显示设备
  int (*get_display_width)(void);
  int (*get_display_height)(void);
  void (*render_commands)(mu_Context *ctx);
  
  // 系统功能
  uint32_t (*get_ticks)(void);
  void (*delay_ms)(uint32_t ms);
} PlatformAPI;

// 全局平台API指针
static PlatformAPI *platform;

// 跨平台UI初始化
void ui_platform_init(PlatformAPI *api) {
  platform = api;
  platform->init_input();
  
  // 根据屏幕尺寸调整UI比例
  int display_w = platform->get_display_width();
  int display_h = platform->get_display_height();
  
  // 小屏幕设备（<320px宽度）使用紧凑布局
  if (display_w < 320) {
    mu_Context *ctx = get_ui_context();
    ctx->style->font_size = 12;
    ctx->style->spacing = 4;
    ctx->style->window_padding = mu_vec2(4, 4);
  }
}

// 跨平台主循环
void ui_main_loop(void) {
  mu_Context *ctx = get_ui_context();
  uint32_t last_tick = platform->get_ticks();
  
  while (1) {
    // 读取输入
    platform->read_input(ctx);
    
    // 计算delta时间（用于动画等）
    uint32_t now = platform->get_ticks();
    float delta_time = (now - last_tick) / 1000.0f;
    last_tick = now;
    
    // 更新UI
    mu_begin(ctx);
    update_ui(ctx, delta_time);  // 传入delta时间用于动画
    mu_end(ctx);
    
    // 渲染
    platform->render_commands(ctx);
    
    // 控制帧率
    platform->delay_ms(16);  // ~60FPS
  }
}

// 平台特定实现 - 桌面SDL示例
#ifdef PLATFORM_DESKTOP
#include <SDL2/SDL.h>

static SDL_Window *window;
static SDL_Renderer *renderer;

void desktop_init_input(void) {
  // SDL初始化代码...
}

void desktop_read_input(mu_Context *ctx) {
  SDL_Event event;
  while (SDL_PollEvent(&event)) {
    switch (event.type) {
      case SDL_MOUSEMOTION:
        mu_input_mousemove(ctx, event.motion.x, event.motion.y);
        break;
      case SDL_MOUSEBUTTONDOWN:
        if (event.button.button == SDL_BUTTON_LEFT) {
          mu_input_mousedown(ctx, MU_MOUSE_LEFT, event.button.x, event.button.y);
        }
        break;
      // 其他事件处理...
    }
  }
}

// 其他桌面平台实现...

PlatformAPI desktop_api = {
  .init_input = desktop_init_input,
  .read_input = desktop_read_input,
  .get_display_width = desktop_get_width,
  .get_display_height = desktop_get_height,
  .render_commands = desktop_render,
  .get_ticks = SDL_GetTicks,
  .delay_ms = SDL_Delay
};
#endif

// 平台特定实现 - STM32示例
#ifdef PLATFORM_STM32
#include "stm32f1xx_hal.h"
#include "touch.h"
#include "lcd.h"

void stm32_init_input(void) {
  touch_init();
}

void stm32_read_input(mu_Context *ctx) {
  // 读取触摸屏输入
  TouchPoint tp = touch_get_point();
  if (tp.pressed) {
    mu_input_mousedown(ctx, MU_MOUSE_LEFT, tp.x, tp.y);
  } else {
    mu_input_mouseup(ctx, MU_MOUSE_LEFT, tp.x, tp.y);
  }
}

// 其他STM32平台实现...

PlatformAPI stm32_api = {
  .init_input = stm32_init_input,
  .read_input = stm32_read_input,
  .get_display_width = lcd_get_width,
  .get_display_height = lcd_get_height,
  .render_commands = stm32_render,
  .get_ticks = HAL_GetTick,
  .delay_ms = HAL_Delay
};
#endif

📌 跨平台建议：通过平台抽象层隔离硬件相关代码，使核心UI逻辑保持平台无关；根据屏幕尺寸和分辨率动态调整UI比例；针对不同平台优化输入处理方式（触摸/鼠标/键盘）。

常见问题排查：解决开发中的典型挑战

即使是最成熟的库也会遇到使用问题，以下是microUI开发中的常见问题及解决方案：

问题1：控件无响应或交互异常

症状：按钮点击无反应，滑块无法拖动。
排查步骤：

检查输入处理函数是否正确实现并调用

// 确保在主循环中调用输入处理
void main_loop() {
  while (1) {
    process_input_events(ctx);  // 必须先处理输入
    mu_begin(ctx);
    // ... 绘制UI ...
    mu_end(ctx);
  }
}

验证mu_input_*函数参数是否正确（坐标是否在屏幕范围内）
检查是否有其他控件遮挡（使用mu_debug模式查看控件边界）

问题2：内存池溢出

症状：UI渲染异常，控件随机消失或变形。
解决方案：

// 1. 增加内存池大小
#define MU_POOL_SIZE 8192  // 从默认4KB增加到8KB
static char memory_pool[MU_POOL_SIZE];
mu_init_ex(ctx, memory_pool, MU_POOL_SIZE);

// 2. 监控内存使用情况
int used = mu_get_used_memory(ctx);
int total = mu_get_total_memory(ctx);
float usage = (float)used / total * 100;
printf("Memory usage: %d/%d bytes (%.1f%%)\n", used, total, usage);

// 3. 避免在单次mu_begin/mu_end中创建过多控件
// 考虑分页显示或动态加载内容

问题3：渲染性能低下

症状：UI卡顿，帧率低于20FPS。
优化方案：

实现脏矩形更新（见前文性能优化部分）
减少不必要的控件重绘

// 仅在数据变化时更新图表
static float last_temperature = -999;
void render_temperature_chart(mu_Context *ctx, float current_temp) {
  // 数据未变化时不更新图表
  if (fabs(current_temp - last_temperature) < 0.1f) return;
  last_temperature = current_temp;
  
  // 绘制图表...
}