看人家lvgl开源项目那么厉害，自己也想写一个简单的UI，从最简单的开始，使用的硬件为
单片机；STM32F411单片机
外设：一个按键
屏幕：SSD1306 OLED屏幕

先上效果：

1、屏幕上电会显示四个元素（宏定义修改），被选中的元素会比其他的稍微大一些。

1.png

2、在向下切换时，会有一点点动态效果，被选中的元素会有一点点放大的效果。切换时使用按键单击控制。

2.gif

3、在进入被选定元素后，会从被选定元素向两周扩散至全屏幕。进入元素使用按键双击进入

3.gif

4、退出到主界面会从左到右刷新，具有缓出效果。长按按钮退出到主界面。

4.gif

视频看上去有些闪烁实际上显示很清晰，使用的是双缓冲的刷新方式。

任务函数：
分别对应每一个元素建立一个任务数组，传入参数为键值，这样在任务内部使用键值：

void page0_task(uint8_t key);
void page1_task(uint8_t key);
void page2_task(uint8_t key);
void page3_task(uint8_t key);
void page4_task(uint8_t key);
void page5_task(uint8_t key);
void(* funcArr[])(uint8_t key) = { page0_task,page1_task,page2_task,page3_task,page4_task,page5_task };

以下是主循环函数，无非就是判断当前处于哪个界面，应该运行哪个任务，因为传入了键值，所以可以在任务中通过按键运行任务：

while (1)
  {
    /* USER CODE END WHILE */

    /* USER CODE BEGIN 3 */
      
    //ssd1306_TestAll();
      uint8_t key=read_key();
       if(page1.out_in==1)//当前处于内部元素显示
      {
          funcArr[current_page_index(&page1)](key);
      }
      else//处于外部元素
      {
           if(key==1)//检测到单击，切换到下一个元素
          {
              page_next(&page1);
          }
          
          if(key==2)//检测到双击，进入到元素中
          {
              page_item_page(&page1);
          }
      }
      if(key==3)//检测到长按，回到主界面顶部
      {
          page_set_index(&page1,0);
      } 
  }
  /* USER CODE END 3 */
}