零知开源——STM32F4实现ILI9486显示屏UI界面系列教程（三）：记事本功能实现

eefocus_4087784

在智能设备的人机交互界面中，记事本功能是基础且重要的应用场景。本教程将基于STM32F4和LVGL库，在3.5英寸ILI9486显示屏上实现完整的记事本功能，包含文本输入、虚拟键盘、内容清除等核心功能。

一、硬件连接（同电子书教程）硬件连接方式与电子书阅读器完全一致，请参考系列教程（一）的硬件连接部分。显示屏直接插入零知增强板专用接口，无需额外连线。
系列教程直达：
零知开源——STM32F4实现ILI9486显示屏UI界面系列教程（一）：电子书阅读器功能

ILI9486扩展板显示屏及记事本UI页面图：

二、软件UI组件实现 2.1 核心功能实现

1. lv_obj_t *win = create_app_win("NotePad");
   
2.     lv_coord_t hres = lv_disp_get_hor_res(NULL);
   
3.     lv_coord_t vres = lv_disp_get_ver_res(NULL);
   
4.     lv_coord_t header_height = 32; // 标题栏高度
   
5. 
   
6.     // 创建文本区域
   
7.     lv_obj_t *ta = lv_ta_create(win, NULL);
   
8.     lv_obj_set_size(ta, hres - 40, (vres - header_height) / 2);
   
9.     lv_obj_align(ta, NULL, LV_ALIGN_IN_TOP_MID, 0, header_height + 10);
   
10.     lv_ta_set_text(ta, "");
    
11.     lv_ta_set_cursor_type(ta, LV_CURSOR_BLOCK);
    
12.     lv_ta_set_placeholder_text(ta, "Type your note here...");
    
13.     lv_ta_set_sb_mode(ta, LV_SB_MODE_AUTO);
    
14. 
    
15.     // 创建键盘 - 使用更小的键盘节省空间
    
16.     lv_obj_t *kb = lv_kb_create(win, NULL);
    
17.     lv_obj_set_size(kb, hres - 40, (vres - header_height) / 3);
    
18.     lv_obj_align(kb, ta, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    
19.     lv_kb_set_ta(kb, ta);
    
20. 
    
21.     // 创建按钮容器 - 简化按钮数量
    
22.     lv_obj_t *btn_cont = lv_cont_create(win, NULL);
    
23.     lv_cont_set_layout(btn_cont, LV_LAYOUT_ROW_M);
    
24.     lv_obj_set_size(btn_cont, hres - 40, 40);
    
25.     lv_obj_align(btn_cont, kb, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    
26. 
    
27.     // 只保留清除按钮节省空间
    
28.     lv_obj_t *btn_clear = lv_btn_create(btn_cont, NULL);
    
29.     lv_obj_t *btn_clear_label = lv_label_create(btn_clear, NULL);
    
30.     lv_label_set_text(btn_clear_label, "Clear");
    
31.     lv_obj_set_event_cb(btn_clear, note_clear_event_cb);
    
32.     lv_obj_set_user_data(btn_clear, ta);

复制代码

2.2 文本区域功能详解

光标控制：
  LV_CURSOR_BLOCK：块状光标，提高可视性
  自动光标跟踪：滚动时保持光标可见
  触摸精确定位：点击任意位置移动光标

滚动优化：
  自动滚动条管理（LV_SB_MODE_AUTO）
  平滑滚动动画
  长文本分页渲染

占位提示：
  引导用户输入的提示文本
  输入内容时自动消失
  内容清空后重新显示

2.3 清除功能实现

1. // 清除按钮事件处理
   
2. static void note_clear_event_cb(lv_obj_t * btn, lv_event_t event)
   
3. {
   
4.     if(event == LV_EVENT_SHORT_CLICKED) {
   
5.         lv_obj_t *ta = (lv_obj_t *)lv_obj_get_user_data(btn);
   
6.         lv_ta_set_text(ta, "");
   
7.     }
   
8. }

复制代码

三、零知IDE配置（同电子书教程） 请参考系列教程（一）的零知IDE配置部分，确保：

正确配置LCD屏幕驱动
启用触摸屏支持
添加LVGL库依赖

关键配置项（lv_conf.h）：

1. #define LV_USE_TA            1
   
2. #define LV_USE_KB            1
   
3. #define LV_USE_ANIMATION     1    // 启用动画效果
   
4. #define LV_FONT_ROBOTO_16    1    // 启用默认字体

复制代码

触摸屏校准：

1. bool my_touchpad_read(lv_indev_drv_t * indev, lv_indev_data_t * data)
   
2. {
   
3.         static lv_coord_t last_x = 0;
   
4.         static lv_coord_t last_y = 0;
   
5.         
   
6.         data->state = ts.touched() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
   
7.         if(data->state == LV_INDEV_STATE_PR){
   
8.                 TS_Point p = ts.getPoint();
   
9.                  
   
10.                
    
11.                 last_x = LV_HOR_RES-(p.y *LV_HOR_RES)/4095;      
    
12.                 last_y = (p.x *LV_VER_RES)/4095;      
    
13.                  
    
14.                 Serial.print("touched:");
    
15.                 Serial.print(last_x);Serial.print(",");Serial.println(last_y);
    
16.         }
    
17.         data->point.x = last_x;
    
18.         data->point.y = last_y;
    
19.          
    
20.         return false;
    
21. }

复制代码

四、演示效果4.1 功能演示

触摸键盘输入英文内容
触摸文本区域移动光标
滑动查看长文本内容
点击清除按钮清空内容
大小写和符号键盘切换

4.2 视频效果
https://www.bilibili.com/video/BV1QdKgzjEpe/?spm_id_from=333.1387.homepage.video_card.click&vd_source=a31e3d8d8ce008260eee442534c2f63d
记事本界面包含文本编辑区、虚拟键盘和清除按钮

4.3 性能指标

项目	数值	说明
键盘响应时间	< 50ms	从触碰到键盘弹出的延迟
内存占用	32KB	包括LVGL核心和文本缓冲区
输入响应延迟	< 30ms	按键到字符显示的时间
最大字符容量	无限制	动态内存管理
触摸精度	±3像素	键盘按键触发精度

五、常见问题解决 ? 输入卡顿/优化方法

1. // 在lv_conf.h中增加内存池大小
   
2. #define LV_MEM_SIZE (16U * 1024U)  // 增加至48KB
   
3. #define LV_DISP_DEF_REFR_PERIOD 30  // 降低刷新率至30ms

复制代码

六、总结与扩展 6.1 实现总结本教程实现了基础记事本功能：

文本输入与编辑功能
虚拟键盘输入支持
一键清除内容
滚动查看长文本
触摸优化的用户界面

6.2 扩展建议

1. // 1. 中文输入支持（需外置字库）
   
2. void init_chinese_font() {
   
3.     lv_font_t * cn_font = lv_font_load("S:/fonts/simhei_20.bin");
   
4.     static lv_style_t style;
   
5.     lv_style_init(&style);
   
6.     lv_style_set_text_font(&style, LV_STATE_DEFAULT, cn_font);
   
7.     lv_obj_add_style(ta, LV_TEXTAREA_PART_MAIN, &style);
   
8. }
   
9. 
   
10. // 2. 保存到Flash
    
11. void save_to_flash() {
    
12.     const char* text = lv_ta_get_text(ta);
    
13.     // 使用W25Q128 Flash芯片存储
    
14.     w25qxx_write_str(0x1000, text);
    
15. }
    
16. 
    
17. // 3. 添加时间戳
    
18. void add_timestamp() {
    
19.     char time_str[20];
    
20.     sprintf(time_str, "\n[%02d:%02d]", rtc.getHours(), rtc.getMinutes());
    
21.     lv_ta_add_text(ta, time_str);
    
22. }
    
23. 
    
24. // 4. 云同步功能
    
25. void sync_to_cloud() {
    
26.     if(WiFi.status() == WL_CONNECTED) {
    
27.         httpClient.post("/api/notes", lv_ta_get_text(ta));
    
28.     }
    
29. }

复制代码

6.3 下一步在下一个系列教程中，我们将实现相册浏览功能，支持图片预览和大图查看模式。

??零知开源是一个真正属于国人自己的开源软硬件平台，在开发效率上超越了Arduino平台并且更加容易上手，大大降低了开发难度。
?零知开源在软件方面提供了完整的学习教程和丰富示例代码，让不懂程序的工程师也能非常轻而易举的搭建电路来创作产品，测试产品。快来动手试试吧！

?访问零知开源平台，获取更多实战项目和教程资源吧！
www.lingzhilab.com