?

在智能設備的人機交互界面中，記事本功能是基礎且重要的應用場景。本教程將基于STM32F4和LVGL庫，在3.5英寸ILI9486顯示屏上實現完整的記事本功能，包含文本輸入、虛擬鍵盤、內容清除等核心功能。

一、硬件連接（同電子書教程）

硬件連接方式與電子書閱讀器完全一致，請參考系列教程（一）的硬件連接部分。顯示屏直接插入零知增強板專用接口，無需額外連線。

系列教程直達：零知開源——STM32F4實現ILI9486顯示屏UI界面系列教程（一）：電子書閱讀器功能

ILI9486擴展板顯示屏及記事本UI頁面圖：

二、軟件UI組件實現

2.1 核心功能實現

lv_obj_t *win = create_app_win("NotePad");
    lv_coord_t hres = lv_disp_get_hor_res(NULL);
    lv_coord_t vres = lv_disp_get_ver_res(NULL);
    lv_coord_t header_height = 32; // 標題欄高度

    // 創建文本區域
    lv_obj_t *ta = lv_ta_create(win, NULL);
    lv_obj_set_size(ta, hres - 40, (vres - header_height) / 2);
    lv_obj_align(ta, NULL, LV_ALIGN_IN_TOP_MID, 0, header_height + 10);
    lv_ta_set_text(ta, "");
    lv_ta_set_cursor_type(ta, LV_CURSOR_BLOCK);
    lv_ta_set_placeholder_text(ta, "Type your note here...");
    lv_ta_set_sb_mode(ta, LV_SB_MODE_AUTO);

    // 創建鍵盤 - 使用更小的鍵盤節省空間
    lv_obj_t *kb = lv_kb_create(win, NULL);
    lv_obj_set_size(kb, hres - 40, (vres - header_height) / 3);
    lv_obj_align(kb, ta, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    lv_kb_set_ta(kb, ta);

    // 創建按鈕容器 - 簡化按鈕數量
    lv_obj_t *btn_cont = lv_cont_create(win, NULL);
    lv_cont_set_layout(btn_cont, LV_LAYOUT_ROW_M);
    lv_obj_set_size(btn_cont, hres - 40, 40);
    lv_obj_align(btn_cont, kb, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);

    // 只保留清除按鈕節省空間
    lv_obj_t *btn_clear = lv_btn_create(btn_cont, NULL);
    lv_obj_t *btn_clear_label = lv_label_create(btn_clear, NULL);
    lv_label_set_text(btn_clear_label, "Clear");
    lv_obj_set_event_cb(btn_clear, note_clear_event_cb);
    lv_obj_set_user_data(btn_clear, ta);

2.2 文本區域功能詳解

光標控制：

LV_CURSOR_BLOCK: 塊狀光標，提高可視性

自動光標跟蹤：滾動時保持光標可見

觸摸精確定位：點擊任意位置移動光標

滾動優化：

自動滾動條管理（LV_SB_MODE_AUTO）

平滑滾動動畫

長文本分頁渲染

占位提示：

引導用戶輸入的提示文本

輸入內容時自動消失

內容清空后重新顯示

2.3 清除功能實現

// 清除按鈕事件處理
static void note_clear_event_cb(lv_obj_t * btn, lv_event_t event)
{
    if(event == LV_EVENT_SHORT_CLICKED) {
        lv_obj_t *ta = (lv_obj_t *)lv_obj_get_user_data(btn);
        lv_ta_set_text(ta, "");
    }
}

三、零知IDE配置（同電子書教程）

請參考系列教程（一）的零知IDE配置部分，確保：

正確配置LCD屏幕驅動

啟用觸摸屏支持

添加LVGL庫依賴

關鍵配置項：

#define LV_USE_TA            1
#define LV_USE_KB            1
#define LV_USE_ANIMATION     1    // 啟用動畫效果
#define LV_FONT_ROBOTO_16    1    // 啟用默認字體

觸摸屏校準：

bool my_touchpad_read(lv_indev_drv_t * indev, lv_indev_data_t * data)
{
        static lv_coord_t last_x = 0;
        static lv_coord_t last_y = 0;
        
        data->state = ts.touched() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
        if(data->state == LV_INDEV_STATE_PR){
                TS_Point p = ts.getPoint();
                 
               
                last_x = LV_HOR_RES-(p.y *LV_HOR_RES)/4095;       
                last_y = (p.x *LV_VER_RES)/4095;       
                 
                Serial.print("touched:");
                Serial.print(last_x);Serial.print(",");Serial.println(last_y);
        }
        data->point.x = last_x;
        data->point.y = last_y;
         
        return false; 
}

四、演示效果

4.1 功能演示

觸摸鍵盤輸入英文內容

觸摸文本區域移動光標

滑動查看長文本內容

點擊清除按鈕清空內容

大小寫和符號鍵盤切換

4.2 視頻效果

https://www.bilibili.com/video/BV1QdKgzjEpe/?spm_id_from=333.1387.homepage.video_card.click&vd_source=a31e3d8d8ce008260eee442534c2f63d

記事本界面包含文本編輯區、虛擬鍵盤和清除按鈕

4.3 性能指標

五、常見問題解決

?輸入卡頓/優化方法

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

六、總結與擴展

6.1 實現總結

本教程實現了基礎記事本功能：

文本輸入與編輯功能

虛擬鍵盤輸入支持

一鍵清除內容

滾動查看長文本

觸摸優化的用戶界面

6.2 擴展建議

// 1. 中文輸入支持（需外置字庫）
void init_chinese_font() {
    lv_font_t * cn_font = lv_font_load("S:/fonts/simhei_20.bin");
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_text_font(&style, LV_STATE_DEFAULT, cn_font);
    lv_obj_add_style(ta, LV_TEXTAREA_PART_MAIN, &style);
}

// 2. 保存到Flash
void save_to_flash() {
    const char* text = lv_ta_get_text(ta);
    // 使用W25Q128 Flash芯片存儲
    w25qxx_write_str(0x1000, text);
}

// 3. 添加時間戳
void add_timestamp() {
    char time_str[20];
    sprintf(time_str, "n[%02d:%02d]", rtc.getHours(), rtc.getMinutes());
    lv_ta_add_text(ta, time_str);
}

// 4. 云同步功能
void sync_to_cloud() {
    if(WiFi.status() == WL_CONNECTED) {
        httpClient.post("/api/notes", lv_ta_get_text(ta));
    }
}

6.3 下一步

在下一個系列教程中，我們將實現相冊瀏覽功能，支持圖片預覽和大圖查看模式。

?零知開源是一個真正屬于國人自己的開源軟硬件平臺，在開發效率上超越了Arduino平臺并且更加容易上手，大大降低了開發難度。
?零知開源在軟件方面提供了完整的學習教程和豐富示例代碼，讓不懂程序的工程師也能非常輕而易舉的搭建電路來創作產品，測試產品。快來動手試試吧！

?訪問零知開源平臺，獲取更多實戰項目和教程資源吧！


審核編輯 黃宇