wandering1/STM32F4-Base
1
0
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects 2 Releases Wiki Activity

UI 菜单初步完成

Browse Source
This commit is contained in:
Wanderingss
2026-09-07 10:48:18 +08:00
parent 89462d8aa1
commit 2b41bdccb5
30 changed files with 2226 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Drivers/BSP/UI/ui_menu_view.c
+490
View File
@@ -0,0 +1,490 @@
/*
* 模块名称：UI Menu View (菜单显示模型渲染层)
* 模块功能：以 LVGL 基元控件实现《菜单页面设计.md》§四⑧"横向级联子框"显示模型：
* 右贴靠（子框左缘=父框右缘、共享边框列）+ 框宽内容自适应 +
* 顶对齐/底对齐上移；持有全部 LVGL 对象（样式/4 层容器/框/行/根框装饰），
* 不持有任何导航状态——状态由逻辑层 ui_menu.c 经本接口驱动
* 适用平台：STM32F407ZGTx / PC 模拟器（两端共用）
* 作者：王建锋
* 创建日期：2026-09-04
* 修改记录：
* 2026-09-04 王建锋 创建：自旧 ui_menu.c 单页模型拆分出显示层（高内聚低耦合）
*/
#include "ui_menu_view.h"
#include "ui_menu_tab.h"
#include "lvgl.h"
#include <string.h>
#define DBG_TAG "[UI_MENU_VIEW]"
#include "dbg_log.h"
/*
* 布局常量（设备像素；参考图 02~07 实测 + 字体度量速查推导）：
* 汉字步进 12px/字、▶ 步进 10px、行高 15（7 行×15+2 边框=107，与参考图根框一致）；
* 行内留白取最小值 2px——最深 4 框级联（根 66 + 42 + 42 + 空框 6 - 3 共享边框）
* = 153px，须 < 屏宽 160
*/
#define MENU_ROW_H 15 /* 行高 */
#define MENU_ROW_TXT_TOP 1 /* 行内文字垂直居中偏移（(15-13)/2，字体行高 13） */
#define MENU_ROW_PAD_L 2 /* 行内文字左留白（紧留白，保证级联总宽 < 160） */
#define MENU_ROW_PAD_R 2 /* 行内右侧留白 */
#define MENU_ARROW_GAP 2 /* 行内 文本→箭头 间距 */
#define MENU_FRAME_BORDER 1 /* 框边框宽（子框与父框共享该边框列） */
#define MENU_ROOT_BOX_X 0 /* 根框左（左对齐，贴左缘） */
#define MENU_ROOT_BOX_Y 44 /* 根框顶 */
#define MENU_ROOT_STATUS_X 17 /* 状态行左 */
#define MENU_ROOT_STATUS_Y 20 /* 状态行顶 */
#define MENU_DECO_LEG_W 3 /* 顶部"浅 V"两腿线宽（1bpp 下斜线边缘易被阈值吃掉，需加粗） */
#define MENU_DECO_HORIZ_W 2 /* 顶部"浅 V"水平线宽 */
/*
* 框几何缓存：位置/尺寸是"现算"的（不落导航状态），但子框对齐要用父框刚算出的值，
* 故按层缓存一份；sel 为最近一次应用的高亮（子框垂直对齐依据），由逻辑层经
* build/refresh 保持同步
*/
typedef struct {
bool built; /* 框已建（框体 + 行对象存在） */
uint8_t sel; /* 最近应用的选中行 */
uint8_t item_cnt; /* 行数 */
int32_t x, y; /* 框左上角（含边框） */
int32_t w, h; /* 框外廓尺寸 */
} menu_frame_t;
static lv_obj_t *s_cont[MENU_PAGE_MAX]; /* 4 层持久容器（每深度一个；焦点/键入口，永不删） */
static lv_obj_t *s_frame_box[MENU_PAGE_MAX]; /* 框体：d=0 持久（根框）；d>=1 进入时建、返回时毁 */
static lv_obj_t *s_row[MENU_PAGE_MAX][MENU_ITEM_MAX]; /* 行容器（整行反色高亮的载体） */
static lv_obj_t *s_row_text[MENU_PAGE_MAX][MENU_ITEM_MAX]; /* 行文本 label */
static lv_obj_t *s_row_arrow[MENU_PAGE_MAX][MENU_ITEM_MAX]; /* 行箭头 label（叶子=NULL） */
static menu_frame_t s_frame[MENU_PAGE_MAX];
static lv_obj_t *s_root_deco = NULL; /* 根框装饰：顶部"浅 V"水平段（两腿为临时对象，样式同源） */
static lv_obj_t *s_root_status = NULL; /* 根框状态行 */
/* 样式（静态，一次性初始化，常驻） */
static lv_style_t s_style_flat; /* 通用：透明、无边框/圆角/内边距（剥离主题 card） */
static lv_style_t s_style_selected; /* 选中态：整行反色（白底） */
static lv_style_t s_style_frame; /* 框体：透明底 + 1px 白边框 */
static lv_style_t s_style_scrollbar; /* 滚动条：白色、4px 宽 */
/*
* 函数功能：初始化显示层样式（静态样式，仅执行一次）
* 入口参数：无
* 返回值：无
* 限定条件：无
* 函数说明： 1. flat 剥离主题给对象附加的卡片样式（边框/圆角/内边距）
* 2. frame 为所有级联框（含根框）的 1px 白边框
* 3. selected 为选中行整行反色（1bpp 白底）；文字色在刷新时显式置黑
*/
static void view_styles_init(void)
{
static bool inited = false;
if (inited) {
return;
}
inited = true;
lv_style_init(&s_style_flat);
lv_style_set_bg_opa(&s_style_flat, LV_OPA_TRANSP);
lv_style_set_border_width(&s_style_flat, 0);
lv_style_set_radius(&s_style_flat, 0);
lv_style_set_pad_all(&s_style_flat, 0);
lv_style_set_pad_gap(&s_style_flat, 0);
lv_style_init(&s_style_selected);
lv_style_set_bg_opa(&s_style_selected, LV_OPA_COVER);
lv_style_set_bg_color(&s_style_selected, lv_color_white());
lv_style_set_text_color(&s_style_selected, lv_color_black());
lv_style_init(&s_style_frame);
lv_style_set_bg_opa(&s_style_frame, LV_OPA_TRANSP);
lv_style_set_border_width(&s_style_frame, MENU_FRAME_BORDER);
lv_style_set_border_color(&s_style_frame, lv_color_white());
lv_style_set_radius(&s_style_frame, 0);
lv_style_set_pad_all(&s_style_frame, 0);
lv_style_set_pad_gap(&s_style_frame, 0);
lv_style_init(&s_style_scrollbar);
lv_style_set_bg_opa(&s_style_scrollbar, LV_OPA_COVER);
lv_style_set_bg_color(&s_style_scrollbar, lv_color_white());
lv_style_set_width(&s_style_scrollbar, 4);
}
/*
* 函数功能：计算框外廓宽（内容自适应）
* 入口参数：kids - 子节点下标数组（各行内容） const uint8_t *
* cnt - 条目数 uint8_t
* 返回值：框外廓宽 px int32_t = 最宽行内容 + 左右边框
* 限定条件：LVGL 已初始化（字体度量可用）
* 函数说明：行内容宽 = 左留白 + 文本 + (菜单 ? 间距 + ▶ : 0) + 右留白；
* 文本/▶ 宽取字体实际步进（汉字 12px、▶ 10px）；
* 注意本 LVGL 版 lv_text_get_width 的 length=0 表示"不测量"，必须传 strlen
*/
static int32_t view_frame_width(const uint8_t *kids, uint8_t cnt)
{
const lv_font_t *font = LV_FONT_DEFAULT;
int32_t w = 0;
for (uint8_t i = 0; i < cnt; i++) {
const char *name = ui_menu_tab_name(kids[i]);
int32_t tw = lv_text_get_width(name, (uint32_t)strlen(name), font, 0);
int32_t cw = MENU_ROW_PAD_L + tw + MENU_ROW_PAD_R;
if (ui_menu_tab_has_children(kids[i])) {
cw += MENU_ARROW_GAP + lv_text_get_width("▶", (uint32_t)strlen("▶"), font, 0);
}
if (cw > w) {
w = cw;
}
}
return w + 2 * MENU_FRAME_BORDER;
}
/*
* 函数功能：在框体上创建一条条目行（行容器 + 文本 + 可选箭头）
* 入口参数：box - 所属框体 lv_obj_t *
* d - 框所在深度 uint8_t
* i - 行下标 uint8_t
* node - 条目节点下标 uint8_t
* has_arrow - 是否创建箭头（=条目有子项） bool
* 返回值：true - 成功；false - 对象创建失败（LVGL 池耗尽，调用方停止建行）
* 限定条件：d < MENU_PAGE_MAX，i < MENU_ITEM_MAX
* 函数说明： 1. 行容器整行宽、高 MENU_ROW_H，承载选中整行反色高亮
* 2. 文本左留白 MENU_ROW_PAD_L；箭头紧跟文本（间距 MENU_ARROW_GAP，自适应）
* 3. 文本/箭头子 label 加 IGNORE_LAYOUT 做行内绝对定位
*/
static bool view_add_row(lv_obj_t *box, uint8_t d, uint8_t i, uint8_t node, bool has_arrow)
{
lv_obj_t *row = lv_obj_create(box);
if (row == NULL) {
return false;
}
lv_obj_add_style(row, &s_style_flat, 0);
lv_obj_add_style(row, &s_style_selected, LV_STATE_CHECKED);
lv_obj_set_width(row, lv_pct(100));
lv_obj_set_height(row, MENU_ROW_H);
lv_obj_t *lbl = lv_label_create(row);
if (lbl == NULL) {
lv_obj_delete(row);
return false;
}
lv_obj_add_style(lbl, &s_style_flat, 0);
lv_obj_add_flag(lbl, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(lbl, MENU_ROW_PAD_L, MENU_ROW_TXT_TOP);
lv_label_set_text_static(lbl, ui_menu_tab_name(node));
lv_obj_t *ar = NULL;
if (has_arrow) {
const char *name = ui_menu_tab_name(node);
int32_t tw = lv_text_get_width(name, (uint32_t)strlen(name), LV_FONT_DEFAULT, 0);
ar = lv_label_create(row);
if (ar != NULL) {
lv_obj_add_style(ar, &s_style_flat, 0);
lv_obj_add_flag(ar, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(ar, MENU_ROW_PAD_L + tw + MENU_ARROW_GAP, MENU_ROW_TXT_TOP);
lv_label_set_text_static(ar, "▶");
}
}
s_row[d][i] = row;
s_row_text[d][i] = lbl;
s_row_arrow[d][i] = ar;
return true;
}
/*
* 函数功能：应用指定深度框的选中高亮（整行反色 + 文字/箭头颜色）
* 入口参数：depth - 深度 uint8_t
* sel - 选中行 uint8_t
* 返回值：无
* 限定条件：该层行对象已建
* 函数说明：1. 选中行整行反色（白底黑字），箭头随反色变黑（参考图实测：选中行保留 ▶）
* 2. 非选中行透明底白字、白色箭头
*/
static void view_apply_sel(uint8_t depth, uint8_t sel)
{
menu_frame_t *f = &s_frame[depth];
for (uint8_t i = 0; i < f->item_cnt; i++) {
bool is_sel = (i == sel);
if (is_sel) {
lv_obj_add_state(s_row[depth][i], LV_STATE_CHECKED);
}
else {
lv_obj_clear_state(s_row[depth][i], LV_STATE_CHECKED);
}
lv_obj_set_style_text_color(s_row_text[depth][i],
is_sel ? lv_color_black() : lv_color_white(), 0);
if (s_row_arrow[depth][i] != NULL) {
lv_obj_set_style_text_color(s_row_arrow[depth][i],
is_sel ? lv_color_black() : lv_color_white(), 0);
}
}
}
/*
* 函数功能：配置框体布局（纵向 flex 堆行 + 自动滚动条）
* 入口参数：box - 框体 lv_obj_t *
* 返回值：无
* 限定条件：box 已创建
* 函数说明：行内容超框高时框内滚动（本菜单最深 9 行不触发，机制为更长列表保留）
*/
static void view_box_layout(lv_obj_t *box)
{
lv_obj_set_flex_flow(box, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(box, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
lv_obj_set_scrollbar_mode(box, LV_SCROLLBAR_MODE_AUTO);
lv_obj_add_style(box, &s_style_scrollbar, LV_PART_SCROLLBAR);
}
void ui_menu_view_frame_build(uint8_t depth, uint8_t node, uint8_t sel, uint16_t scroll)
{
menu_frame_t *f = &s_frame[depth];
lv_obj_t *box;
uint8_t kids[MENU_ITEM_MAX];
uint8_t cnt = ui_menu_tab_children(node, kids, MENU_ITEM_MAX);
if (depth == 0u) {
box = s_frame_box[0]; /* 根框框体持久（view_init 已建） */
}
else {
if (f->built) {
ui_menu_view_frame_destroy(depth); /* 防御：重入 = 先毁后建 */
}
const menu_frame_t *p = &s_frame[depth - 1u];
/* X：右贴靠——子框左缘 = 父框右缘（共享边框列、零间隙） */
f->x = p->x + p->w - MENU_FRAME_BORDER;
/* Y：顶对齐父框"选中行"行顶；(顶边+框高) 超屏底 → 上移使本框底边
* 对齐父框"选中行"行底（顶部不钳制，可叠到状态行区）；
* 仍超顶（比整屏高）→ 钳制顶部，框高截到可见区、行改框内滚动 */
int32_t row_top = p->y + MENU_FRAME_BORDER + (int32_t)p->sel * MENU_ROW_H;
int32_t h = (int32_t)cnt * MENU_ROW_H + 2 * MENU_FRAME_BORDER;
f->y = row_top;
if (f->y + h > MENU_SCREEN_H) {
f->y = row_top + MENU_ROW_H - h;
}
if (f->y < 0) {
f->y = 0;
}
if (f->y + h > MENU_SCREEN_H) {
h = MENU_SCREEN_H - f->y;
}
f->h = h;
f->w = (cnt > 0u) ? view_frame_width(kids, cnt)
: (2 * MENU_FRAME_BORDER + MENU_ROW_PAD_L + MENU_ROW_PAD_R);
box = lv_obj_create(s_cont[depth]);
if (box == NULL) {
return; /* LVGL 池耗尽：框未建，状态回滚 */
}
lv_obj_add_style(box, &s_style_flat, 0);
lv_obj_add_style(box, &s_style_frame, 0);
lv_obj_add_flag(box, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(box, f->x, f->y);
lv_obj_set_size(box, f->w, f->h);
view_box_layout(box);
s_frame_box[depth] = box;
}
f->built = true;
f->item_cnt = cnt;
f->sel = sel;
/* 行对象：条目现算（= parent==node 过滤），进时建、退时毁 */
lv_obj_clean(box);
for (uint8_t i = 0; i < MENU_ITEM_MAX; i++) {
s_row[depth][i] = NULL;
s_row_text[depth][i] = NULL;
s_row_arrow[depth][i] = NULL;
}
for (uint8_t i = 0; i < cnt; i++) {
if (!view_add_row(box, depth, i, kids[i], ui_menu_tab_has_children(kids[i]))) {
break; /* LVGL 池耗尽：停止建行（池有界，见设计 §7.5） */
}
}
/* 选中高亮 + 滚动位 */
view_apply_sel(depth, sel);
if (scroll > 0u) {
lv_obj_scroll_to_y(box, (int32_t)scroll, LV_ANIM_OFF);
}
else if (cnt > 0u) {
lv_obj_scroll_to_view(s_row[depth][sel], LV_ANIM_OFF);
}
}
void ui_menu_view_frame_destroy(uint8_t depth)
{
menu_frame_t *f = &s_frame[depth];
if (depth == 0u || !f->built) {
return; /* 根框持久不可销毁 */
}
lv_obj_delete(s_frame_box[depth]); /* 框体连行对象整体删除（容器保留） */
s_frame_box[depth] = NULL;
for (uint8_t i = 0; i < MENU_ITEM_MAX; i++) {
s_row[depth][i] = NULL;
s_row_text[depth][i] = NULL;
s_row_arrow[depth][i] = NULL;
}
f->built = false;
f->item_cnt = 0u;
f->sel = 0u;
f->x = 0;
f->y = 0;
f->w = 0;
f->h = 0;
}
void ui_menu_view_frame_refresh(uint8_t depth, uint8_t sel)
{
menu_frame_t *f = &s_frame[depth];
if (!f->built || depth >= MENU_PAGE_MAX || sel >= f->item_cnt) {
return;
}
f->sel = sel;
view_apply_sel(depth, sel);
/* 选中变化只改行状态 + 跟随滚动，不重建对象 */
lv_obj_scroll_to_view(s_row[depth][sel], LV_ANIM_OFF);
}
void ui_menu_view_set_scroll(uint8_t depth, uint16_t scroll)
{
if (depth >= MENU_PAGE_MAX || !s_frame[depth].built || s_frame_box[depth] == NULL) {
return;
}
lv_obj_scroll_to_y(s_frame_box[depth], (int32_t)scroll, LV_ANIM_OFF);
}
uint16_t ui_menu_view_get_scroll(uint8_t depth)
{
if (depth >= MENU_PAGE_MAX || !s_frame[depth].built || s_frame_box[depth] == NULL) {
return 0u;
}
return (uint16_t)lv_obj_get_scroll_y(s_frame_box[depth]);
}
void ui_menu_view_focus(uint8_t depth)
{
if (depth < MENU_PAGE_MAX && s_cont[depth] != NULL) {
lv_group_focus_obj(s_cont[depth]);
}
}
lv_obj_t *ui_menu_view_container(uint8_t depth)
{
return (depth < MENU_PAGE_MAX) ? s_cont[depth] : NULL;
}
/*
* 函数功能：应用主界面顶部"浅 V"装饰线段的公共样式
* 入口参数：line - lv_line 对象；width - 线宽（px）
* 返回值：无
* 限定条件：line 已创建且已设点集
* 函数说明：绝对定位于 (0,0)、忽略布局、白色实线、指定线宽
*/
static void view_deco_line_apply(lv_obj_t *line, int32_t width)
{
lv_obj_add_flag(line, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(line, 0, 0);
lv_obj_set_size(line, MENU_SCREEN_W, 20);
lv_obj_set_style_line_width(line, width, 0);
lv_obj_set_style_line_color(line, lv_color_white(), 0);
lv_obj_set_style_line_opa(line, LV_OPA_COVER, 0);
}
int ui_menu_view_init(void)
{
lv_obj_t *scr = lv_screen_active();
if (scr == NULL) {
return -1;
}
view_styles_init();
lv_display_t *disp = lv_display_get_default();
int32_t sw = lv_display_get_horizontal_resolution(disp);
int32_t sh = lv_display_get_vertical_resolution(disp);
/* 屏幕根容器：铺满屏幕；子对象全部绝对定位（级联框须同屏叠加，不用 flex 堆叠） */
lv_obj_t *menu = lv_obj_create(scr);
if (menu == NULL) {
return -1;
}
lv_obj_add_style(menu, &s_style_flat, 0);
lv_obj_set_size(menu, sw, sh);
/* 4 层持久容器：每深度一个、全屏覆盖、永不删（焦点/键入口，防悬空） */
for (uint8_t d = 0; d < MENU_PAGE_MAX; d++) {
s_cont[d] = lv_obj_create(menu);
if (s_cont[d] == NULL) {
return -1;
}
lv_obj_add_style(s_cont[d], &s_style_flat, 0);
lv_obj_add_flag(s_cont[d], LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(s_cont[d], 0, 0);
lv_obj_set_size(s_cont[d], sw, sh);
lv_obj_add_flag(s_cont[d], LV_OBJ_FLAG_CLICK_FOCUSABLE);
}
/* 根框装饰：顶部"开口浅 V"（两腿加粗、水平线细）+ 状态行（绝对定位于 d=0 容器）
* 1bpp 下斜线边缘易被阈值吃掉，腿须比水平线粗才接近参考图 */
{
static const lv_point_precise_t deco_leg_l[] = { {7, 7}, {16, 17} };
static const lv_point_precise_t deco_hoz[] = { {16, 17}, {145, 17} };
static const lv_point_precise_t deco_leg_r[] = { {158, 7}, {145, 17} };
lv_obj_t *leg_l = lv_line_create(s_cont[0]);
lv_obj_t *leg_r = lv_line_create(s_cont[0]);
s_root_deco = lv_line_create(s_cont[0]);
if (leg_l == NULL || leg_r == NULL || s_root_deco == NULL) {
return -1;
}
lv_line_set_points(leg_l, deco_leg_l, 2);
lv_line_set_points(leg_r, deco_leg_r, 2);
lv_line_set_points(s_root_deco, deco_hoz, 2);
view_deco_line_apply(leg_l, MENU_DECO_LEG_W);
view_deco_line_apply(leg_r, MENU_DECO_LEG_W);
view_deco_line_apply(s_root_deco, MENU_DECO_HORIZ_W);
}
s_root_status = lv_label_create(s_cont[0]);
if (s_root_status == NULL) {
return -1;
}
lv_obj_add_style(s_root_status, &s_style_flat, 0);
lv_obj_add_flag(s_root_status, LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(s_root_status, MENU_ROOT_STATUS_X, MENU_ROOT_STATUS_Y);
lv_label_set_text_static(s_root_status, "当前模式 ： 无模式");
/* 根框框体：持久；宽 = 内容自适应（主界面 node 0 的子项） */
uint8_t kids[MENU_ITEM_MAX];
uint8_t cnt = ui_menu_tab_children(0u, kids, MENU_ITEM_MAX);
int32_t w = view_frame_width(kids, cnt);
int32_t h = (int32_t)cnt * MENU_ROW_H + 2 * MENU_FRAME_BORDER;
s_frame_box[0] = lv_obj_create(s_cont[0]);
if (s_frame_box[0] == NULL) {
return -1;
}
lv_obj_add_style(s_frame_box[0], &s_style_flat, 0);
lv_obj_add_style(s_frame_box[0], &s_style_frame, 0);
lv_obj_add_flag(s_frame_box[0], LV_OBJ_FLAG_IGNORE_LAYOUT);
lv_obj_set_pos(s_frame_box[0], MENU_ROOT_BOX_X, MENU_ROOT_BOX_Y);
lv_obj_set_size(s_frame_box[0], w, h);
view_box_layout(s_frame_box[0]);
s_frame[0].built = true; /* 框体就绪；行对象由逻辑层 frame_build(0) 创建 */
s_frame[0].x = MENU_ROOT_BOX_X;
s_frame[0].y = MENU_ROOT_BOX_Y;
s_frame[0].w = w;
s_frame[0].h = h;
DBG_INFO("view init: root frame w=%d h=%d", (int)w, (int)h);
return 0;
}