烟台企业做网站网站页面设计公司
项目背景
本次的水墨屏幕项目需要做一个多级菜单的显示，所以写出来一起学习，本篇文章不单单适合于水墨屏，像0.96OLED屏幕也适用，区别就是修改显示函数。
设计思路
多级菜单的实现，一般有两种实现的方法
1.通过双向链表实现
2.通过数组查表实现
两种方法的思路都是把所有的界面连接在同一个连接中，上级菜单跳转下级菜单。
数组查表比较简单，此次的项目就用数组查表的方法。
实现代码
1.确定好菜单的逻辑，也就是菜单的显示关系。
在开机的时候，显示开机界面，然后按下任意按键，就跳转到菜单显示，可以通过上按键，下按键和确认按键选择相对应的显示。
2.代码逻辑实现。
首先定义一个结构体，分别为上按键，下按键和确认按键，当前页面索引号，当前页面索引号执行的函数。
typedef struct
{uchar current;//当前页面索引号uchar up; //向上翻索引号uchar down; //向下翻索引号uchar enter; //确认索引号void (*current_operation)(); //当前页面索引号执行的函数,指针函数
} key_table;
数组方法实现多级菜单的原理就是把每一个显示界面编上一个号码，称为当前页面索引号。比如开机显示界面为0，菜单显示为1。每当选择到一个号码，就去运行前页面索引号函数，也就是显示相对应的界面。例如下面的数组key_table table【】，当选择到0编码，就去运行(*fun_0)这个指针函数，把要显示的开机界面写在(*fun_0)就可以。
key_table table[30]=
{//第0层{0,1,1,1,(*fun_0)},//开机界面//第1层{1,2,2, 2,(*fun_a1)},//主菜单界面{2,6,3, 7,(*fun_b1)},//显示WIFI下划线{3,2,4, 8,(*fun_c1)},//显示万年历下划线{4,3,5, 9,(*fun_d1)},//显示时钟下划线{5,4,6, 10,(*fun_e1)},//显示小说下划线{6,5,2, 0,(*fun_f1)},//显示返回下划线//第2层{7,7,7,1,(*fun_a21)}, //连接WIFI{8,8,8,1,(*fun_b21)}, //显示时间{9,9,9,1,(*fun_c21)}, //倒计时};
//开机界面
void fun_0()
{u2_printf("hello world\r\n");Refresh();//刷新屏幕EPD_ShowString(125,55,"Hello",24,BLACK); EPD_PartDisplay(Image_BW);delay_ms(20);
}
那么是怎么实现上级菜单跳转到下级菜单的尼，比如初始显示欢迎界面的状态下，按下不同按键后，通过数组查表，确定要跳转到的索引号，然后根据索引号，通过函数指针执行索引号对应的显示函数，即实现了一次页面切换。然后，就是在新的页面状态，收到下一个按钮指令，再切换到下一个显示状态。
我们看下key_table table[30]数组里面的元素。
//第0层{0,1,1,1,(*fun_0)},//开机界面//第1层{1,2,2, 2,(*fun_a1)},//主菜单界面{2,6,3, 7,(*fun_b1)},//显示WIFI下划线{3,2,4, 8,(*fun_c1)},//显示万年历下划线{4,3,5, 9,(*fun_d1)},//显示时钟下划线{5,4,6, 10,(*fun_e1)},//显示小说下划线{6,5,2, 0,(*fun_f1)},//显示返回下划线//第2层{7,7,7,1,(*fun_a21)}, //连接WIFI{8,8,8,1,(*fun_b21)}, //显示时间{9,9,9,1,(*fun_c21)}, //倒计时
元素是一开始我们定义好的结构体，依次为当前页面索引号，上按键，下按键，确认按键，执行的函数。当我们在索引号1的主菜单界面按上按键，下按键，确认按键，都会跳转到索引号2的显示WIFI下划线界面，然后按上按键，就去跳转到索引号6的显示返回下划线界面，或者按下按键跳转到索引号3的显示WIFI下划线界面,按确认键就跳转到第2层的连接WIFI。在索引号7的连接WIFI界面中，按上按键和下按键都是跳到当前索引号7，从而显示按键按下不跳其他界面的功能，只有按确认按键才会跳到当前索引号1的主菜单界面。
通过分析，不难发现，这些数组在空间上的关系：
菜单界面的切换。比如初始显示欢迎界面的状态下，按下不同按键后，通过数组查表，确定要跳转到的索引号，然后根据索引号，通过函数指针执行索引号对应的显示函数，即实现了一次页面切换。
然后，就是在新的页面状态，收到下一个按钮指令，再切换到下一个显示状态。
效果可以看看视频
多级菜单演示
代码链接：https://pan.baidu.com/s/1XddINn6Qos5-4r5XtIuwXQ?pwd=z754
提取码：z754