LVGL是一個開源的嵌入式圖形庫，它可以在不同的平台和硬件上運行，提供了豐富的圖形元素和交互功能。LVGL的一個重要特性是主題Themes，它可以讓開發者快速地改變界面的風格和外觀。本文將介紹LVGL的主題系統，包括主題的概念、使用方法和自定義方式。
►什麼是主題？
主題是一組預定義的樣式，它們可以應用到不同的圖形元素上，例如按鈕、滑塊、列表等。通過使用主題，開發者可以統一界面的色彩、字體、間距等屬性，使得界面看起來更加協調和美觀。LVGL提供了多種內置的主題，例如材料設計Material、蒙奈Monet、夜間Night等，它們都有自己的特點和風格。開發者也可以根據自己的需求，修改現有的主題或者創建新的主題。
►主題概念
主題是一組風格（styles），可以應用於不同的物件（objects），以統一界面的視覺效果。每個主題都有一個回調函數（callback function），用於根據物件的類型和狀態，為其添加合適的風格。例如，一個按鈕（button）在默認狀態下可能有一種背景顏色，而在按下狀態下可能有另一種背景顏色。主題回調函數就可以根據按鈕的狀態，為其設置不同的背景風格。
LVGL提供了幾種內置的主題，例如基本主題（basic theme）、單色主題（mono theme）、默認主題（default theme）等2。這些主題都是基於LVGL的預設風格系統（style system）實現的，並且支持暗色模式（dark mode）和亮色模式（light mode）的切換。開發者可以直接使用這些內置的主題，也可以根據自己的需求，修改或創建新的主題。
►如何使用主題？
使用LVGL的主題非常簡單，只需要幾個步驟：
- 在項目中引入LVGL和所需的主題文件，例如lvgl.h和lv_theme_material.h。
- 在初始化LVGL之後，創建一個主題對象，並傳入一些參數，例如色彩模式、字體大小等。例如：
// 創建材料設計主題
lv_theme_t * theme = lv_theme_material_init(LV_COLOR_PRIMARY, LV_COLOR_SECONDARY, LV_THEME_MATERIAL_FLAG_LIGHT, LV_FONT_DEFAULT, LV_FONT_DEFAULT, LV_FONT_DEFAULT, LV_FONT_DEFAULT);
- 將創建的主題對象設置為當前活動的主題。例如：
// 設置當前活動的主題
lv_theme_set_act(theme);
- 創建圖形元素並添加到屏幕上，它們會自動應用當前活動的主題。例如：
// 創建一個按鈕
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);
// 設置按鈕的文本
lv_obj_set_style_local_value_str(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Button");
// 調整按鈕的位置和大小
lv_obj_align(btn, NULL, LV_ALIGN_CENTER, 0, 0);
lv_obj_set_size(btn, 100, 50);
這樣就完成了使用主題的基本操作，如果想要切換到其他主題，只需要重複第2和第3步驟即可。
►如何自定義主題？
如果內置的主題不能滿足開發者的需求，可以自定義一個新的主題。自定義主題需要完成以下幾個步驟：
- 定義一個全局或靜態的主題實例變量。
- 初始化該主題實例，並設置其父主題和回調函數。
- 定義一個或多個全局或靜態的風格實例變量，並初始化它們。
- 在回調函數中，根據物件的類型和狀態，為其添加相應的風格。
- 設置當前顯示器的主題為自定義的主題。
例如，以下代碼片段展示了如何自定義一個新的主題，該主題會為所有的矩形物件（rect object）添加一個紅色的背景和一個白色的陰影：
/*定義一個全局的主題實例變量*/
static lv_theme_t th_new;
/*定義一個全局的風格實例變量*/
static lv_style_t style_rect;
/*初始化風格實例*/
void style_init(void)
{
/*設置背景顏色和不透明度*/
lv_style_init(&style_rect);
lv_style_set_bg_color(&style_rect, lv_color_red());
lv_style_set_bg_opa(&style_rect, LV_OPA_COVER);
/*設置陰影寬度和顏色*/
lv_style_set_shadow_width(&style_rect, 10);
lv_style_set_shadow_color(&style_rect, lv_color_white());
}
/*定義回調函數*/
void theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
/*如果物件是矩形物件，則添加風格*/
if(lv_obj_check_type(obj, &lv_obj_class))
{
lv_obj_add_style(obj, &style_rect, LV_STATE_DEFAULT);
}
}
/*初始化主題實例*/
void theme_init(void)
{
/*獲取當前活動的主題*/
lv_theme_t * th_active = lv_theme_get_from_obj(NULL);
/*通過當前活動的主題初始化新主題*/
th_new = *th_active;
/*設置父主題和回調函數*/
lv_theme_set_parent(&th_new, th_active);
lv_theme_set_apply_cb(&th_new, theme_apply_cb);
}
/*設置當前顯示器的主題為新主題*/
void theme_set(void)
{
lv_disp_set_theme(NULL, &th_new);
}
這個新主題是基於當前活動的主題創建的，因此它會保留其他物件的風格。如果想要完全自定義所有物件的風格，可以在回調函數中添加更多的判斷和風格設置。
►結語
本文介紹了LVGL的主題系統，包括主題的概念、使用方法和自定義方式。通過使用主題，開發者可以方便地改變界面的風格和外觀，提高用戶體驗。LVGL的主題也支持暗色模式和亮色模式的切換，以適應不同的環境和用戶。LVGL還提供了其他強大的功能，例如動畫、事件、風格等，有興趣的讀者可以參考LVGL的官方文檔和示例來進一步學習。
►Q&A
- Q：什麼是主題？
A：主題是一種視覺樣式，用於定義UI元素的外觀和感覺。
- Q：如何設置主題？
A：使用lv_theme_set_current（）函數設置主題。
- Q：如何自定義主題？
A：可以使用lv_theme_set_act（）函數自定義主題。
- Q：主題支持哪些屬性？
A：主題支持屬性包括：背景，邊框，文字，圖像等。
- Q：如何在主題中使用圖像？
A：可以使用lv_theme_set_image（）函數在主題中使用圖像。
評論