lvgl庫(kù)V7版本相關(guān)應(yīng)用

筆者能力有限，如果文中出現(xiàn)錯(cuò)誤的地方，還請(qǐng)各位朋友能夠給我指出來(lái)，我將不勝感激，謝謝~

前言

在使用 lvgl 庫(kù)的時(shí)候，筆者使用的 V7 版本的庫(kù)，使用過(guò)程中發(fā)現(xiàn)網(wǎng)上關(guān)于 V7 版本的資料非常少，官網(wǎng)有文檔介紹其如何使用，但有些方面還不是很全面，而且網(wǎng)上現(xiàn)在的中文教程大多數(shù)是針對(duì)于 V6 版本的，V6 和 V7 使用上的差異在有些方面還是挺大的，所以筆者也就想把自己在使用 V7 版本的庫(kù)的時(shí)候的一些心得記錄下來(lái)，這篇文章不能覆蓋全面，只是筆者就最近幾天所使用到的 lvgl V7 版本的一部分功能的一個(gè)總結(jié)，后期如果有新的心得了，會(huì)繼續(xù)完善這個(gè)系列，好了，下面開(kāi)始正文。

V7 版本亮點(diǎn)

首先，我們看一下 lvgl 的 github 倉(cāng)庫(kù)，可以看到有目前 V7 版的 lvgl 也有好幾個(gè)版本了，最新發(fā)布的版本是 V7.1.1 的。

關(guān)于 V7 版本的庫(kù)相對(duì)于 V6 版本的庫(kù)的一個(gè)亮點(diǎn)是關(guān)于 lv_core 文件夾下的?lv_obj_style_dec.h這個(gè)文件。

我們先打開(kāi)這個(gè)文件，可以看到這個(gè)文件全是一些宏定義以及內(nèi)聯(lián)函數(shù)的組合，如下所示：

那為什么說(shuō)這些宏定義的很巧妙呢，我們繼續(xù)看下下面這樣一張圖：

上圖所示的代碼左邊是官方給出的一個(gè) demo ，在查看代碼的過(guò)程中，左圖 171 行代碼 go to 過(guò)去，對(duì)應(yīng)的是右圖的 158 行的代碼，右圖的代碼可以看到前面全是一樣的，這又是如果與作圖的代碼相對(duì)應(yīng)的呢？這需要使用到 C 語(yǔ)言宏粘貼的概念。這里介紹一下羽林君公眾號(hào)的一篇文章描述了宏粘貼的相關(guān)應(yīng)用：你用過(guò)宏##粘貼函數(shù)，然后用函數(shù)指針查找執(zhí)行嗎？今天就給你說(shuō)道說(shuō)道，筆者也在這里簡(jiǎn)單敘述一下宏粘貼的相關(guān)概念：

宏粘貼##的概念

一句話概括 ## 的作用就是：將宏參數(shù)進(jìn)行連接，下面看一個(gè)例子：

#include?

#define?f(a,b)?a##b
#define?g(a)??#a
#define?h(a)??g(a)

int?main(void)
{
????printf("%s\n",h(f(1,2)));
????printf("%s\n",g(f(1,2)));
}

輸出結(jié)果是這樣子的：

對(duì)于這個(gè)例子，需要補(bǔ)充的一點(diǎn)知識(shí)是：#的作用是將宏字符串化。下圖是第一個(gè)?printf的計(jì)算過(guò)程：

知道了第一個(gè) printf 輸出時(shí)的計(jì)算過(guò)程，第二個(gè)的結(jié)果也就明了了，不再進(jìn)行贅述。除了可以將兩個(gè)數(shù)字進(jìn)行拼接，這種方法也可以用于變量的聲明，在?羽林君公眾號(hào)中給出的例子是這樣的：

#define?def_u32_array(__name,?__size)????uint32_t?array_##__name[__size];

那么我們可以這樣進(jìn)行調(diào)用：

def_u32_array(sample_buffer,?64);

宏展開(kāi)的效果是這樣子的：

uint32_t?array_sample_buffer[64];

除此之外，也可以粘貼成函數(shù)，這也就是 lvgl V7 版本的相對(duì)于 V6 版本的一個(gè)巧妙之處。

lvgl 的宏粘貼

首先我們來(lái)看文件最底下這個(gè)宏定義：

先將這個(gè)宏定義展開(kāi)，也就是說(shuō)?_LV_OBJ_STYLE_SET_GET_DECLAR等效于：_OBJ_GET_STYLE_scalar(prop_name, func_name, value_type, style_type)?_OBJ_SET_STYLE_LOCAL_scalar(prop_name, func_name, value_type, style_type)和?_OBJ_SET_STYLE_scalar(prop_name, func_name, value_type, style_type)，分析到這步還不能看出啥，我們進(jìn)一步拆解，我們來(lái)看_OBJ_GET_STYLE_scalar(prop_name, func_name, value_type, style_type),這對(duì)應(yīng)的是下圖所示的代碼：

這個(gè)時(shí)候，再來(lái)看?_OBJ_GET_STYLE_scalar(prop_name, func_name, value_type, style_type)，就是一個(gè)宏定義的內(nèi)聯(lián)函數(shù)，現(xiàn)在基本就清晰了，就是說(shuō)一個(gè)?_LV_OBJ_STYLE_SET_GET_DECLARE?聲明了三個(gè)函數(shù)，我們拿一個(gè)具體的例子來(lái)進(jìn)行分析，我們就那這個(gè)文件的第一個(gè)聲明來(lái)進(jìn)行分析：

_LV_OBJ_STYLE_SET_GET_DECLARE(RADIUS,?radius,?lv_style_int_t,?_int,?scalar)

將其所有都展開(kāi)，就是我們最終想要看到的內(nèi)容，具體是這樣子的，如下圖所示：

再回到最開(kāi)始拋出的那個(gè)問(wèn)題，go to 過(guò)去為什么對(duì)應(yīng)的代碼是那樣，也就迎刃而解了。

V7 版本修改字體

上述是關(guān)于宏粘貼問(wèn)題的一個(gè)描述，除此之外，V7版本的庫(kù)在修改字體的時(shí)候和 V6 版本的相差也是很大的，網(wǎng)上給出的教程以及官網(wǎng)給出的示例都是依據(jù) V6 版本的，修改方法不能應(yīng)用到 V7 版本上，這里指的修改字體指的是如果我想讓界面顯示出中文，該如何添加字庫(kù)并進(jìn)行應(yīng)用。首先介紹的是官方給出的字體轉(zhuǎn)換工具，這里所做的轉(zhuǎn)換是將字體轉(zhuǎn)換成 C 語(yǔ)言數(shù)組。

這種方法存在的不好的地方是轉(zhuǎn)換繁瑣，需要手動(dòng)操作，筆者在查找資料的時(shí)候，看到了另一款非常方便的轉(zhuǎn)換工具，在這里給出 gitee 鏈接，https://gitee.com/WuBinCPP/MCU_Font_Release，README.md 有很詳細(xì)的使用教程，使用方法不在這里贅述了，使用下來(lái)要比官網(wǎng)介紹的方法要方便很多。

那要如何將我們所轉(zhuǎn)換的字體實(shí)際的用起來(lái)呢，首先要了解的是 lvgl 中的樣式，樣式是用來(lái)修飾對(duì)象的外觀的，在 lvgl 中有對(duì)象的概念，在 lvgl 中，Button ，Label，Image，List，Chart 或者 Text area 都可以被稱(chēng)之為對(duì)象，如果我們現(xiàn)在要顯示一個(gè)中文，需要做的是創(chuàng)建一個(gè)樣式，然后，將樣式的字體設(shè)置為我們要顯示的中文，最后，創(chuàng)建一個(gè) Label 對(duì)象，將剛剛的樣樣式綁定上去就可以實(shí)現(xiàn)了，V6 和 V7 版本關(guān)于這個(gè)方面的原理都一致，但是具體的代碼相差還是有點(diǎn)大，關(guān)于 V6 版本的使用非常的簡(jiǎn)單，在聲明了所轉(zhuǎn)換的字體之后，只需要使用如下所示的語(yǔ)句即可：

static?lv_style_t?my_style;
lv_style_copy(&my_style,&lv_style_plain_color);//樣式拷貝
my_style.text.font?=?&my_font_30;//在樣式中使用字體

lv_obj_t*?label?=?lv_label_create(src,NULL);//創(chuàng)建標(biāo)簽控件
lv_label_set_style(label,LV_LABEL_STYLE_MAIN,&my_style);//設(shè)置樣式
lv_label_set_text(label,"字體使用")

那在 V7 版本中該如何進(jìn)行使用呢？同樣的也是創(chuàng)建一個(gè)樣式，再將樣式綁定到相應(yīng)的對(duì)象，最后實(shí)現(xiàn)字體的設(shè)置，詳細(xì)的代碼如下圖所示：

static?lv_style_t?stytle_title;

lv_style_init(&style_title);
lv_style_set_text_font(&style_title,LV_STATE_DEFAULT,&my_lv_font);

lv_obj_t?*?title?=?lv_label_create(lv_scr_act(),?NULL);
lv_style_list_t?*?list?=?lv_obj_get_style_list(title,?LV_LABEL_PART_MAIN);
_lv_style_list_add_style(list,?&style_title);
lv_obj_refresh_style(title,?LV_OBJ_PART_ALL,?LV_STYLE_PROP_ALL);

lv_label_set_text(title,?"這是一個(gè)字體測(cè)試程序");

可見(jiàn)兩個(gè)版本的使用還是有所差異的。上述就是關(guān)于字體設(shè)置的方法，由于網(wǎng)絡(luò)上關(guān)于如何設(shè)置 V7 版本字體提到的較少，所以在此記錄一下。

總結(jié)

上述的內(nèi)容只是關(guān)于 lvgl 的一小部分，lvgl 所有內(nèi)容還是挺多的，關(guān)于 lvgl 的設(shè)計(jì)思路，還是還精妙的，其采用的對(duì)象，容器等思想，像剛剛所提到的 Button ，Label，Image，List，Chart 或者 Text area都被稱(chēng)之為對(duì)象，雖然對(duì)象不同，但是都可以以對(duì)象的操作方式進(jìn)行操作，可以為對(duì)象添加樣式屬性，改變其外觀。針對(duì)于所提到的容器，又可以用來(lái)放置對(duì)象，Button ，Label 等都可以放置到容器 cont 中，關(guān)于 lvgl 的內(nèi)容還有很多，后期有新的心得體會(huì)了再繼續(xù)分享。

如果你覺(jué)得文章內(nèi)容對(duì)你有所幫助，歡迎點(diǎn)贊、轉(zhuǎn)發(fā)、在看三連吶~同時(shí)，也歡迎添加筆者的個(gè)人微信號(hào)，互相交流，共同進(jìn)步，下面是筆者的個(gè)人微信號(hào)

同時(shí)歡迎關(guān)注筆者的個(gè)人公眾號(hào)：