當前使用的是LVGL v8.0.0.首先我們對style進翻譯，style解釋有三種：風格，樣式，作風。
哪么style在LVGL里面，它到底是什么？通過了解和測試，我個人初步
對style進行定義：它就是外觀，對只是外觀而已！
外觀就是些表面上 我們人眼看到的東東，比如形狀，長方形，正方形，長方形角邊是圓角，
還是有這形狀的顏色，是紅色 還是綠色等等？還有就是透明度，陰影等等，五花8門的，
決不是三言倆語能講明白的，（其他教程 網站都是講得比較淺，看多了就知道了）
為什么呢？讓我們看看lv_obj_style.h，這個lv_obj_style.c略過
1 void _lv_obj_style_init(void); 2 void lv_obj_add_style(struct _lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector); 3 void lv_obj_remove_style(struct _lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector); 4 5 static inline void lv_obj_remove_style_all(struct _lv_obj_t * obj) 6 { 7 lv_obj_remove_style(obj, NULL, LV_PART_ANY | LV_STATE_ANY); 8 } 9 10 void lv_obj_report_style_change(lv_style_t * style); 11 void lv_obj_refresh_style(struct _lv_obj_t * obj, lv_part_t part, lv_style_prop_t prop); 12 void lv_obj_enable_style_refresh(bool en); 13 14 lv_style_value_t lv_obj_get_style_prop(const struct _lv_obj_t * obj, lv_part_t part, lv_style_prop_t prop); 15 void lv_obj_set_local_style_prop(struct _lv_obj_t * obj, lv_style_prop_t prop, lv_style_value_t value, lv_style_selector_t selector); 16 17 lv_res_t lv_obj_get_local_style_prop(struct _lv_obj_t * obj, lv_style_prop_t prop, lv_style_value_t * value, lv_style_selector_t selector); 18 bool lv_obj_remove_local_style_prop(struct _lv_obj_t * obj, lv_style_prop_t prop, lv_style_selector_t selector); 19 void _lv_obj_style_create_transition(struct _lv_obj_t * obj, lv_part_t part, lv_state_t prev_state, lv_state_t new_state, const _lv_obj_style_transition_dsc_t * tr); 20 _lv_style_state_cmp_t _lv_obj_style_state_compare(struct _lv_obj_t * obj, lv_state_t state1, lv_state_t state2); 21 void lv_obj_fade_in(struct _lv_obj_t * obj, uint32_t time, uint32_t delay); 22 void lv_obj_fade_out(struct _lv_obj_t * obj, uint32_t time, uint32_t delay); 23 lv_state_t lv_obj_style_get_selector_state(lv_style_selector_t selector); 24 lv_part_t lv_obj_style_get_selector_part(lv_style_selector_t selector); 25 26 #include "lv_obj_style_gen.h" 27 28 static inline void lv_obj_set_style_pad_all(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector) { 29 lv_obj_set_style_pad_left(obj, value, selector); 30 lv_obj_set_style_pad_right(obj, value, selector); 31 lv_obj_set_style_pad_top(obj, value, selector); 32 lv_obj_set_style_pad_bottom(obj, value, selector); 33 } 34 35 static inline void lv_obj_set_style_pad_hor(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector) { 36 lv_obj_set_style_pad_left(obj, value, selector); 37 lv_obj_set_style_pad_right(obj, value, selector); 38 } 39 40 static inline void lv_obj_set_style_pad_ver(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector) { 41 lv_obj_set_style_pad_top(obj, value, selector); 42 lv_obj_set_style_pad_bottom(obj, value, selector); 43 } 44 45 static inline void lv_obj_set_style_pad_gap(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector) { 46 lv_obj_set_style_pad_row(obj, value, selector); 47 lv_obj_set_style_pad_column(obj, value, selector); 48 } 49 50 static inline void lv_obj_set_style_size(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector) { 51 lv_obj_set_style_width(obj, value, selector); 52 lv_obj_set_style_height(obj, value, selector); 53 }
上面line:26加載了#include "lv_obj_style_gen.h"，里面關聯了更多內容，看看吧，希望不要嚇到你們。。。
當我們了解到style有這么多內容，怎么可能像他人一樣，簡簡單單幾句話
就能把style講明白呢？這不是應付了事嗎？我們至少要把lv_obj_style.h全部
搞得明明白白，才能直正意義上理解了 認識了style。。。加油！！！
時間：2021-06-19
其實要把style講明白還是比較難的,首先LVGL都有默認主題（外觀），在V8版本中可選
在lv_conf.h中進行配置：
/* ----------- * Themes *----------*/ /* 一個簡單，令人印象深刻且非常完整的主題 */ #define LV_USE_THEME_DEFAULT 1 #if LV_USE_THEME_DEFAULT /* 0: 燈光模式 ; 1: 暗夜模式 */ # define LV_THEME_DEFAULT_DARK 0
在測試 style外觀之前，必須對主題和對像有所了解，要不然就講不明白style外觀這個知識點，
我們簡單的創建一個對像，讓我們從最簡單的開始吧：
void lv_example(void) { /* 創建新的對象 */ lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建OBJ對像,父對像是當前活動屏幕 lv_obj_set_size(obj,100,50); //OBJ對像的大小，指像素點 lv_obj_align(obj, LV_ALIGN_TOP_RIGHT, 0, 0); //對像的對齊方式,頂部右上 }
這個測試就像HELLO WORLD一樣簡單吧?
這就是LVGL主題給我們外觀,但是,朋友們不喜歡這個外觀,要自己設計外觀時,這時 style就有用武之地了.
我們講過style就是外觀，我們用它改改形狀和位置吧：
void lv_example(void) { static lv_style_t style; //style變量,lv_style_t結構體 lv_style_init(&style); //init初始化,其實只是分配內存空間 lv_style_set_radius(&style, 60); //清一色style_set操作,范指style屬性 lv_style_set_width(&style, 150); //寬度 lv_style_set_height(&style, 150); //高度 lv_style_set_pad_ver(&style, 20); lv_style_set_pad_left(&style, 5); lv_style_set_x(&style, 0); // 默認X位置 lv_style_set_y(&style, 0); // 默認Y位置 /* 創建具有新樣式的對象 */ lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建OBJ對像,父對像是當前活動屏幕 lv_obj_add_style(obj, &style, 0); //把新外觀加到OBJ對像上去,執行完后不刪除style }
因為OBJ對像沒有SET過多的屬性，可以看到
直接使用了新style外觀的默認屬性。
我們之前contiki ng與LVGL圖形庫之label標簽功能，就已經學過label文本了，就加上文本看看效果：
void lv_example(void) { static lv_style_t style; //style變量,lv_style_t結構體 lv_style_init(&style); //init初始化,其實只是分配內存空間 lv_style_set_radius(&style, 60); //清一色style_set操作,范指style屬性 lv_style_set_width(&style, 150); //寬度 lv_style_set_height(&style, 150); //高度 lv_style_set_pad_ver(&style, 20); lv_style_set_pad_left(&style, 5); lv_style_set_x(&style, 0); // 默認X位置 lv_style_set_y(&style, 0); // 默認Y位置 /* 創建具有新樣式的對象 */ lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建OBJ對像,父對像是當前活動屏幕 lv_obj_add_style(obj, &style, 0); //把新外觀加到OBJ對像上去,執行完后不刪除style lv_obj_t * label = lv_label_create(obj); //創建一個文本對像,父對像是OBJ lv_label_set_recolor(label, true); //打開重新着色功能 lv_label_set_text(label,"#ff0000 hello world# "); //設置文件對像屬性->字符串信息和顏色 lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); //以OBJ父對像進行居中對齊 }
這個測試就到這里吧,最后留一個問題吧。如何把
這個新建的style，把這的背景改成綠色？試試吧，V7 V6哪一套方法肯定行不通的，好好想想吧。哈哈！！
其實很簡單的，在SET屬性時加入下面就行了，
lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_GREEN));
確實很有意思，從頭到尾，從錢入深，學這個LVGL v8很有意思吧？
在LVGL中，很多函數功能都沒有注示信息，我們只能通過官方的例程，反復測試觀察能得出直觀的結論，還好例程
還算全面：
void lv_example_style_2(void) { static lv_style_t style; lv_style_init(&style); lv_style_set_radius(&style, 5); lv_style_set_width(&style, 200); //寬度 lv_style_set_height(&style, 480); //高度 /* 做一個漸變 */ lv_style_set_bg_opa(&style, LV_OPA_100); // 透明度設置100% lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));// 背景灰色 lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE)); lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER); /* 將漸變移到底部 */ lv_style_set_bg_main_stop(&style, 50); // 這是在控制漸變范圍 lv_style_set_bg_grad_stop(&style, 150); // 默認是0-255 /*Create an object with the new style*/ lv_obj_t * obj = lv_obj_create(lv_scr_act()); lv_obj_add_style(obj, &style, 0); lv_obj_center(obj); //將對象與父項的中心對齊。 }
這是官方給出外觀色漸變的方法，也是它的套路，背景為灰色，以藍色進行漸變。
/* 將漸變移到底部 */ lv_style_set_bg_main_stop(&style, 50); // 這是在控制漸變范圍 lv_style_set_bg_grad_stop(&style, 150); // 默認是0-255
上面這個控制漸變范圍，是可以去掉的，去掉之后的意思是，這個style外觀的頂到底是
以藍色漸變灰色，全程細分色0-255。加了上面控制后，就是：0-50是背景原色-灰色，
50-150之間是漸變過程，150之后就直接是原色-藍色。
這玩意有點難理解，不過在后期用多了，就慢慢明白的。
時間：2021-06-20
style外觀的應用，還有外框，陰影等等，我覺得太簡單了，我們就以圖像樣式屬性進行收尾吧。
同樣我們在創建一個圖形對像時,圖形的源文件怎么來？圖形的源文件怎么用？是首先要面對
的問題，先進行解決它們。
第1步，去網址 https://gitee.com/icesu/Lvgl_image_convert_tool 下載lvgl_image_convert轉換工具。
如果你在華芯微特QQ的492524359技術群里，可以直接下載使用，已經上傳到Q群里面了。
第2步，為了做個簡單的演示用，隨便找個320*240圖片，找一個PNG格式圖片。
點擊“轉換”后，會自動生成一個C文件，我們把這個C文件放在\LVGL\examples\assets里面就要可以了，最后
在IAR中加入剛生成C文件，如下圖所示：
最后，簡單的進行測試：
void lv_example_style(void)
{
lv_obj_t * obj4 = lv_img_create(lv_scr_act());
LV_IMG_DECLARE(img_cogwhee_qq_hello);
lv_img_set_src(obj4, &img_cogwhee_qq_hello);
lv_obj_align(obj4, LV_ALIGN_CENTER, 0, 0);
}
img_cogwhee_qq_hello就是我們生成C文件的源碼，燒進芯片去看一下效果吧。
到此為止，已經把圖形的源文件怎么來？圖形的源文件怎么用？，講得一清二楚了，
但是要知道,上面操作只把圖片丟到LCD屏上進行顯示在而已,原圖片的大小,形狀,顏色什么等.
目前是無法改變的。嘿嘿，這個時候style外觀的圖像樣式，就有用武之地了,搞這么多事情是為
它鋪路的。
接着測試：
void lv_example_style(void) {
static lv_style_t style; lv_style_init(&style); //Set a background color and a radius lv_style_set_radius(&style, 60); lv_style_set_transform_angle(&style, 700); lv_style_set_bg_opa(&style, LV_OPA_COVER); lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_BLUE, 3)); lv_style_set_border_width(&style, 10); lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_RED)); lv_obj_t * obj3 = lv_img_create(lv_scr_act()); lv_obj_add_style(obj3, &style, 0); LV_IMG_DECLARE(img_cogwhee_qq_hello); lv_img_set_src(obj3, &img_cogwhee_qq_hello); lv_obj_align(obj3, LV_ALIGN_CENTER, 0, 0); lv_obj_t * obj4 = lv_img_create(lv_scr_act()); LV_IMG_DECLARE(img_cogwhee_qq_hello); lv_img_set_src(obj4, &img_cogwhee_qq_hello); lv_obj_align(obj4, LV_ALIGN_TOP_LEFT, 0, 0); lv_obj_t * obj = lv_img_create(lv_scr_act()); LV_IMG_DECLARE(img_cogwhee_qq_map); lv_img_set_src(obj, &img_cogwhee_qq_map); lv_obj_align(obj, LV_ALIGN_BOTTOM_RIGHT,-100, 0); }
我們看到了，style進行了圖片后期處理，方向，外框和背景。右下角這個圖象是LVGL
的demo圖片，杯子是透明的，我們搞的圖片卻是實心的，看來還是有許許多多套路在里面。
OK, LVGL的style到此結束了。