前言

LVGL是一個開源的嵌入式圖形庫，可以用於創建美觀和高效的圖形用戶界面。LVGL中的style樣式是用於設置物件的外觀的一種機制，它受到CSS的啟發，並具有一些獨特的特點。本文將介紹style樣式的基本概念、設置方法、添加和移除方式、狀態和過渡效果、以及一些實際範例。

目的

讓讀者了解LVGL中的style樣式的作用和用法，並能夠根據自己的需求，為物件設置合適的樣式。

樣式基本介紹

lvgl 中樣式是以物件的方式存在，一個物件可以描述一種樣式。每個控制元件都可以獨立新增樣式，建立的樣式之間互不影響。樣式可以設定控制元件的尺寸、位置、顏色、形狀、邊距、邊框等屬性。樣式也可以使用選擇器(selector)來作用於控制元件的部分或狀態。例如，可以設定滾軸(slider)的主體、把手(knob)和進度指示條(indicator)的不同樣式，或者設定按鈕在按下時的樣式。一種樣式是由四個部分構成的，分別是 body 的背景，text 的文本，image 的圖片，line 的線條。每個部分都有很多屬性來定義它的外觀和功能。樣式結構大致如下：(圖1)

設置樣式

在LVGL中，一個style樣式是一個lv_style_t類型的變量，它可以保存多種屬性，例如邊框寬度、文字顏色、背景顏色等。它類似於CSS中的class，可以用於定義物件的外觀特徵。不過，並不需要指定所有的屬性，未指定的屬性將使用默認值。

設置一個style樣式，首先需要創建一個lv_style_t變量，然後使用lv_style_init函數對其進行初始化。接著，可以使用lv_style_set_xxx函數來設置各種屬性，其中xxx表示屬性名稱。例如：

//創建一個style樣式

lv_style_t my_style;

//初始化style樣式

lv_style_init(&my_style);

//設置背景顏色為紅色

lv_style_set_bg_color(&my_style, lv_color_red());

//設置文字顏色為白色

lv_style_set_text_color(&my_style, lv_color_white());

//設置邊框寬度為5像素

lv_style_set_border_width(&my_style, 5);

添加和移除樣式

將一個style樣式應用到一個物件，需要使用lv_obj_add_style函數，並指定物件、部件和狀態。部件是指物件中的子元素，例如按鈕中的文字或圖像。狀態是指物件在不同情況下的表現，例如默認、按下、聚焦等。例如：

//創建一個按鈕物件

lv_obj_t * btn = lv_btn_create(lv_scr_act());

//將my_style樣式添加到按鈕物件上

lv_obj_add_style(btn, LV_PART_MAIN, LV_STATE_DEFAULT, &my_style);

從一個物件上移除一個style樣式，需要使用lv_obj_remove_style函數，並指定物件、部件和狀態。例如：

//創建一個按鈕物件

lv_obj_t * btn = lv_btn_create(lv_scr_act());

//將my_style樣式添加到按鈕物件上

lv_obj_add_style(btn, LV_PART_MAIN, LV_STATE_DEFAULT,&my_style);

//將my_style樣式從按鈕物件上移除

lv_obj_remove_style(btn, LV_BTN_PART_MAIN,&my_style);

狀態和過渡效果

在LVGL中，物件可以處於不同的狀態，例如默認、按下、聚焦、禁用等。每個狀態可以有不同的style樣式，例如按下時背景顏色變深，聚焦時邊框發光等。要設置不同狀態的style樣式，需要在lv_obj_add_style函數中指定狀態參數，例如：

//創建一個style樣式

lv_style_t my_style;

//初始化style樣式

lv_style_init(&my_style);

//設置默認狀態的背景顏色為紅色

lv_style_set_bg_color(&my_style, LV_STATE_DEFAULT, lv_color_red());

//設置按下狀態的背景顏色為藍色

lv_style_set_bg_color(&my_style, LV_STATE_PRESSED, lv_color_blue());

//將my_style樣式添加到按鈕物件上，並指定部件和狀態

lv_obj_add_style(btn, LV_PART_MAIN, LV_STATE_DEFAULT | LV_STATE_PRESSED, &my_style);

當物件從一個狀態切換到另一個狀態時，可以使用過渡效果來平滑地改變style樣式。過渡效果是一種動畫，可以設置持續時間、延遲時間、曲線類型等參數。要設置過渡效果，需要創建一個lv_anim_path_t類型的變量，並使用lv_style_set_transition_path函數將其添加到style樣式中。例如：

//創建一個過渡效果

lv_anim_path_t path;

//初始化過渡效果

lv_anim_path_init(&path);

//設置過渡效果的曲線類型為彈性

lv_anim_path_set_cb(&path, lv_anim_path_ease_in_out);

//將過渡效果添加到style樣式中

lv_style_set_transition_path(&my_style, LV_STATE_DEFAULT, &path);

//設置過渡效果的持續時間為500毫秒

lv_style_set_transition_time(&my_style, LV_STATE_DEFAULT, 500);

典型樣式- Background

Display有三個背景屬性：顏色，圖片和透明度。只有當Screen是透明或沒有佔滿整個屏幕的時候，才能看到Display的背景。顏色是Display的填充色，用lv_disp_set_bg_color(disp, color)函數來改變。圖片是一個文件路徑或者一個指向lv_img_dsc_t類型變量（轉換後的圖片）的指針，作為Display的牆紙。用lv_disp_set_bg_color(disp, &my_img)函數來改變。如果有背景圖片（即非空），就不會顯示背景顏色。顏色或者圖片的不透明度用lv_disp_set_bg_opa(disp, opa)函數來改變。這些函數中，disp參數如果是NULL，就表示默認Display。參考範例：https://github.com/lvgl/lvgl/blob/effe86bf5f77de60f70f35763e165f5c3213ec63/examples/styles/lv_example_style_2.c

典型樣式- Border

lvgl的border樣式是指物件的邊框，可以設置顏色、寬度、圓角等屬性。border樣式可以讓物件更加美觀和突出，也可以用於區分不同的物件。lvgl提供了多種預設的border樣式，也可以自定義border樣式，通過lv_style_set_border_*函數來設置。參考範例：https://github.com/lvgl/lvgl/blob/effe86bf5f77de60f70f35763e165f5c3213ec63/examples/styles/lv_example_style_3.c

典型樣式- Outline

lvgl outline樣式是一種可以設置物件的外輪廓效果的樣式，可以用來增強物件的視覺效果。要使用lvgl outline樣式，需要以下幾個步驟：

1. 創建一個lv_style_t變量，並用lv_style_init函數初始化它。

2. 用lv_style_set_radius、lv_style_set_bg_opa、lv_style_set_bg_color等函數設置樣式的基本屬性，如圓角、背景顏色等。

3. 用lv_style_set_outline_width、lv_style_set_outline_color、lv_style_set_outline_pad等函數設置樣式的外輪廓屬性，如寬度、顏色、間距等。

4. 創建一個物件，並用lv_obj_add_style函數將樣式添加到物件上。

5. 用lv_obj_center等函數調整物件的位置和大小。參考範例：https://github.com/lvgl/lvgl/blob/effe86bf5f77de60f70f35763e165f5c3213ec63/examples/styles/lv_example_style_4.c

典型樣式- Shadow

Shadow樣式主要有以下幾個屬性：

- shadow_width：設置陰影的寬度，單位是像素，值應大於等於0。

- shadow_ofs_x：設置陰影在X方向的偏移量，單位是像素，正值表示向右偏移，負值表示向左偏移。

- shadow_ofs_y：設置陰影在Y方向的偏移量，單位是像素，正值表示向下偏移，負值表示向上偏移。

- shadow_spread：設置陰影的擴展範圍，單位是像素，正值表示擴大陰影區域，負值表示縮小陰影區域。

- shadow_color：設置陰影的顏色，可以使用lv_color_t類型的變量或宏定義。

- shadow_opa：設置陰影的不透明度，可以使用lv_opa_t類型的變量或宏定義，取值範圍是0（完全透明）到255（完全不透明）。

使用Shadow樣式首先需要創建一個lv_style_t類型的變量，並使用lv_style_init函數進行初始化。然後使用lv_style_set_shadow_開頭的函數來設置各個屬性的值。最後使用lv_obj_add_style函數將樣式添加到控件對像上。參考範例：https://github.com/lvgl/lvgl/blob/effe86bf5f77de60f70f35763e165f5c3213ec63/examples/styles/lv_example_style_5.c 

結語

LVGL-樣式是一種讓圖形界面更加美觀和個性化的功能。可以使用樣式來定義物件的顏色、字體、大小、邊框、陰影等屬性。樣式可以應用於單個物件，也可以應用於整個主題。使用者甚至可以創建自己的自定義樣式，讓界面與眾不同。

Q&A

1.如何創建一個新的樣式？

答：使用lv_style_init函數來初始化一個lv_style_t結構體，然後使用lv_style_set_xxx函數來設定樣式的各種屬性，例如lv_style_set_bg_color來設定背景顏色。

2.如何將一個樣式應用於一個物件？

答：使用lv_obj_add_style函數來將一個樣式添加到一個物件的某個部分，例如lv_obj_add_style(obj, LV_PART_MAIN, &style)表示將style樣式添加到obj物件的主要部分。 

3.如何將一個樣式從一個物件移除？

答：使用lv_obj_remove_style函數來將一個樣式從一個物件的某個部分移除，例如lv_obj_remove_style(obj, LV_PART_MAIN, &style)表示將style樣式從obj物件的主要部分移除。 

4.如何根據物件的狀態改變樣式？

答：使用lv_style_set_xxx_yyy函數來設定樣式在不同狀態下的屬性，例如lv_style_set_bg_color_pressed表示設定按下狀態下的背景顏色。也可以使用lv_obj_set_style_local_xxx_yyy函數來設定物件在不同狀態下的局部屬性，例如lv_obj_set_style_local_bg_color_pressed表示設定物件在按下狀態下的局部背景顏色。 

5.如何查看或修改已有的預設樣式？

答：使用lv_style_get_xxx函數來獲取預設樣式的屬性值，例如lv_style_get_bg_color(&lv_style_plain)表示獲取lv_style_plain預設樣式的背景顏色。也可以使用lv_style_set_xxx函數來修改預設樣式的屬性值，例如lv_style_set_bg_color(&lv_style_plain, LV_COLOR_RED)表示將lv_style_plain預設樣式的背景顏色修改為紅色。

資料來源：New Bing，LVGL