“本文大部分內(nèi)容來自LVGL官方文檔，手翻版，如有錯(cuò)誤歡迎指正。”

系列文章目錄

一、LVGL系列（一）?一文了解LVGL的學(xué)習(xí)路線?輕松了解LVGL的全部?

二、LVGL系列（二）之一 LVGL必讀介紹? 為什么要學(xué)習(xí)LVGL

???????LVGL系列（二）之二 LVGL常見問題解答 整理自官方文檔

二、LVGL系列（三）LVGL仿真環(huán)境的搭建（WIN下）

? ? ? ? 2.1?VS下搭建LVGL仿真環(huán)境

? ? ? ? 2.1?如何在仿真環(huán)境下運(yùn)行自己的代碼

三、LVGL系列（三） LVGL移植教程

四、LVGL系列（四）概述

? ? ? ? 4.1 對象 LVGL核心概念

? ? ? ? 4.2? 位置、尺寸和布局

五、LVGL系列（五）部件

六、LVGL系列（六）布局

文章目錄

目錄

系列文章目錄

文章目錄

一、概覽??

1.1?單位（Units）

1.2 盒子模型 Boxing model

1.3 Important notes

1.4 延遲坐標(biāo)推算 Postponed coordinate calculation

1.5 移除樣式 Removing styles

二、 位置（Position）

2.1 簡單方式?Simple way?

2.2 對齊（Align）

三 、 尺寸（Size）

3.1 簡單方法（Simple way）

四、通過樣式實(shí)現(xiàn)

五、 轉(zhuǎn)換?Translation

六、變換Transformation

6.1?最大最小尺寸（Min and Max size）

七、 布局Layout

7.1 概覽（Overview）

7.2 標(biāo)志 （Flags）

7.3 Adding new layouts（添加新的布局）

---

---

一、概覽??

????????跟LVGL其他的部分相似，坐標(biāo)設(shè)定的概念靈感來自于CSS。并不是完全的按照其標(biāo)準(zhǔn)實(shí)現(xiàn)，而是實(shí)現(xiàn)了一小部分功能，會(huì)有一些小調(diào)整。簡而言之，這意味著：

• 坐標(biāo)（size, position, layouts, etc）的設(shè)定是通過styles實(shí)現(xiàn)的。
• 支持最小寬度、最大寬度、最低高度、最大高度。
• 具有像素、百分比和“內(nèi)容”單位。
• x=0; y=0 的坐標(biāo)意味著在父類的左上角加上左上填充加上邊框?qū)挾取?/li>
• 高度/寬度是指全尺寸，內(nèi)容區(qū)域隨著填充的和邊框的寬度增加而減小。
• 支持flexbox和grid布局的子集。

1.1?單位（Units）

• 像素：簡單的說在像素中的一個(gè)位置，一個(gè)簡單的整數(shù)可代替像素的位置。例如：lv_obj_set_x(btn,? 10)。
• 百分比：對象或者它父類的百分比（依賴于父類的大小）。函數(shù)lv_pct(value) 能向百分比傳遞一個(gè)值。例如：lv_obj_set_width(btn,? lv_pct(50))??
• LV_SIZE_CONTENT: 用于設(shè)置一個(gè)對象和它子對象高度和寬度的特殊值。它類似于CSS里的自動(dòng)設(shè)置。例如：lv_obj_set_width(btn,? LV_SIZE_CONTENT).

1.2 盒子模型 Boxing model

????????LVGL 遵循 CSS的 border-box 模型. 一個(gè)對象的“box”由以下部分組成：An object's "box" is built from the following parts:

• 邊界框（bounding box）: 元素的高度和寬度。the width/height of the elements.
• 邊界寬度（border width）:邊界的寬度，邊界框的寬度。the width of the border.
• 填充（padding）：在一個(gè)對象和它子對象之間的空間。: space between the sides of the object and its children.
• 內(nèi)容（content）: 內(nèi)容區(qū)域的大小是除去邊界框、邊界寬度、填充區(qū)域剩下的區(qū)域。

邊界在邊界框里面繪制，在邊界內(nèi)部,LVGL保持填充區(qū)域以放置子對象。輪廓在邊界框外面繪制。

1.3 Important notes

本節(jié)介紹LVGL行為可能意外的特殊情況。

1.4 延遲坐標(biāo)推算 Postponed coordinate calculation

????????LVGL不會(huì)立即重新計(jì)算所有坐標(biāo)的變化。這樣做是為了提升性能。相反，有些對象被標(biāo)記為"dirty"并且在重新繪制屏幕之前，LVGL會(huì)檢查是否有一些"dirty"。如果是，LVGL就會(huì)刷新他們的位置、尺寸和布局。

????????換句話說， 如果你需要獲取一個(gè)對象的坐標(biāo)而且它的坐標(biāo)剛剛發(fā)生改變，需要強(qiáng)制LVGL重新計(jì)算坐標(biāo)。可以調(diào)用lv_obj_update_layout(obj)來實(shí)現(xiàn)。

??? 尺寸和位置可能會(huì)依賴與父類或者布局。因此lv_obj_update_layout(obj).會(huì)重新計(jì)算在屏幕上的所有對象的坐標(biāo)。

1.5 移除樣式 Removing styles

????????正如Using style部分所述：坐標(biāo)同樣可以通過style參數(shù)的方式進(jìn)行設(shè)置。更準(zhǔn)確地說，在后臺，每個(gè)與樣式坐標(biāo)相關(guān)的屬性都存儲為樣式屬性。如果你使用了lv_obj_set_x(obj,? 20)，LVGL將在對象的本地樣式中保存x=20。這是一個(gè)內(nèi)部的工作機(jī)制，跟你使用的LVGL沒有太大關(guān)系。但是，有一種情況你需要知道。如果一個(gè)對象的樣式被移除，通過：

1. lv_obj_remove_style_all (obj)

或者

1. lv_obj_remove_style(obj, NULL , LV_PART_MAIN);

????????在此之前設(shè)置的坐標(biāo)也會(huì)被移除。

例如：

1. /*The size of obj1 will be set back to the default in the end*/ 2. lv_obj_set_size(obj1, 200, 100); /*Now obj1 has 200;100 size*/ 3. lv_obj_remove_style_all(obj1); /*It removes the set sizes*/ 4. /*obj2 will have 200;100 size in the end */ 5. lv_obj_remove_style_all(obj2); 6. lv_obj_set_size(obj2, 200, 100);

二、 位置（Position）

2.1 簡單方式?Simple way?

????????簡單的給一個(gè)對象設(shè)置x和y坐標(biāo)可以通過下列方法：

1. lv_obj_set_x(obj, 10); 2. lv_obj_set_y(obj, 20); 3. lv_obj_set_pos(obj, 10, 20); //Or in one function

????????默認(rèn)情況下，x和y坐標(biāo)從父級內(nèi)容區(qū)域的左上角測量。例如：如果父對象在每個(gè)邊上都有5個(gè)像素的填充區(qū)域，上面的代碼會(huì)把對象放在（15，25），這是因?yàn)閮?nèi)容區(qū)域是在填充之后開始的。

????????如果根據(jù)父對象的內(nèi)容區(qū)域的大小計(jì)算百分比的值：

1. lv_obj_set_x(btn, lv_pct(10)); //x = 10 % of parant content area width

2.2 對齊（Align）

????????在某些情況下，可以很方便的修改位置標(biāo)的默認(rèn)原點(diǎn)。如果原點(diǎn)被更改，例如：對于左下角，（0，0）意味著：與右下角對齊。改變原點(diǎn)可以通過：

1. lv_obj_set_align(obj, align);

????????改變排列并設(shè)置新的坐標(biāo)：

1. lv_obj_align(obj, align, x, y);

????????下列的一些排列位置可以使用：

• LV_ALIGN_TOP_LEFT
• LV_ALIGN_TOP_MID
• LV_ALIGN_TOP_RIGHT
• LV_ALIGN_BOTTOM_LEFT
• LV_ALIGN_BOTTOM_MID
• LV_ALIGN_BOTTOM_RIGHT
• LV_ALIGN_LEFT_MID
• LV_ALIGN_RIGHT_MID
• LV_ALIGN_CENTER

????????將父對象和子對象對齊是十分常見的，因此對于這個(gè)功能有一個(gè)專門對應(yīng)的方法：

1. lv_obj_center(obj); 2. 3. //Has the same effect 4. lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

????????如果父對象的的尺寸發(fā)生了變化，子對象的對齊設(shè)置和位置會(huì)自動(dòng)重新的排列。

上面介紹的函數(shù)將對象與它的父類對齊。然而，他也有可能與一個(gè)任意的對象對齊。

1. lv_obj_align_to(obj_to_align, reference_obj, align, x, y);

除了上面的一些對齊方式之外，下面的一些選項(xiàng)可以用來將對象與參考對象的外邊對齊：

• LV_ALIGN_OUT_TOP_LEFT
• LV_ALIGN_OUT_TOP_MID
• LV_ALIGN_OUT_TOP_RIGHT
• LV_ALIGN_OUT_BOTTOM_LEFT
• LV_ALIGN_OUT_BOTTOM_MID
• LV_ALIGN_OUT_BOTTOM_RIGHT
• LV_ALIGN_OUT_LEFT_TOP
• LV_ALIGN_OUT_LEFT_MID
• LV_ALIGN_OUT_LEFT_BOTTOM
• LV_ALIGN_OUT_RIGHT_TOP
• LV_ALIGN_OUT_RIGHT_MID
• LV_ALIGN_OUT_RIGHT_BOTTOM

????????例如：要對齊按鈕上方的標(biāo)簽并且使標(biāo)簽水平居中對齊：

1. lv_obj_align_to(label, btn, LV_ALIGN_OUT_TOP_MID, 0, -10);

請注意：不像lv_obj_align()一樣，lv_obj_align_to()并不能在它的坐標(biāo)或者參考對象的坐標(biāo)發(fā)生改變后重新對齊。

三 、 尺寸（Size）

3.1 簡單方法（Simple way）

????????一個(gè)對象的寬度和高度也可以輕松設(shè)置，方法如下：

1. lv_obj_set_width(obj, 200); 2. lv_obj_set_height(obj, 100); 3. lv_obj_set_size(obj, 200, 100); //Or in one function

????????百分比值是基于父對象的內(nèi)容區(qū)域大小計(jì)算的。例如：要將對象的高度設(shè)置成屏幕的高度

1. lv_obj_set_height(obj, lv_pct(100))

????????尺寸設(shè)置支持單值：LV_SIZE_CONTENT 。這意味著對象在各自的方向上的尺寸大小將設(shè)置為它子類的大小。請注意：只考慮右下的子類，而左上的將會(huì)保持裁剪。這種限制讓對象的行為更加可預(yù)測。

???具有LV_OBJ_FLAG_HIDDEN or LV_OBJ_FLAG_FLOATING屬性的對象會(huì)被LV_SIZE_CONTENT算法忽略。

????????上面的函數(shù)不光可以設(shè)置對象邊界的尺寸，而且也可以設(shè)置內(nèi)容區(qū)域的尺寸。這意味著對象的邊界在填充后大于設(shè)置的尺寸。

1. lv_obj_set_content_width(obj, 50); //The actual width: padding left + 50 + padding right 2. lv_obj_set_content_height(obj, 30); //The actual width: padding top + 30 + padding bottom

可通過以下功能獲取邊界框和內(nèi)容區(qū)域的大小：

1. lv_coord_t w = lv_obj_get_width(obj); 2. lv_coord_t h = lv_obj_get_height(obj); 3. lv_coord_t content_w = lv_obj_get_content_width(obj); 4. lv_coord_t content_h = lv_obj_get_content_height(obj);

四、通過樣式實(shí)現(xiàn)

????????位置、尺寸、對齊方式等屬性是樣式屬性。為了簡單起見，上面所描述的簡單函數(shù)隱藏了與樣式相關(guān)的代碼，并且在本地樣式中設(shè)置了對象的位置、大小、和對齊方式幾個(gè)屬性。

????????但是，使用樣式來設(shè)置坐標(biāo)有非常多的優(yōu)點(diǎn)：

• 可以一起輕松設(shè)置多個(gè)對象的寬度/高度等屬性。例如：設(shè)置所有的滑塊100×10像素大小。
• 可以在一個(gè)位置修改屬性值。
• 這些值可以被其他樣式覆蓋。例如在默認(rèn)狀態(tài)下style_btn 設(shè)置對象為100×50，但是style_full_width 函數(shù)能夠覆蓋對象的寬度特性。
• 對象可以在不同的狀態(tài)下具有不同的位置和大小。例如：在默認(rèn)狀態(tài)下為100px 而在LV_STATE_PRESSED 下為120px。
• 樣式傳遞可以使坐標(biāo)變化平滑。

以下時(shí)使用樣式來設(shè)置對象大小的例子：

1. static lv_style_t style; 2. lv_style_init(&style); 3. lv_style_set_width(&style, 100); 4. lv_obj_t * btn = lv_btn_create(lv_scr_act()); 5. lv_obj_add_style(btn, &style, LV_PART_MAIN);

????????正如你即將在下面看到的一樣，還有一些其他關(guān)于設(shè)置位置和尺寸的強(qiáng)大功能。然而為了保持LVGl的API的簡潔性，只有最常見的坐標(biāo)設(shè)置具有最簡版本，對于更復(fù)雜的屬性設(shè)置通過樣式來實(shí)現(xiàn)。

五、 轉(zhuǎn)換?Translation

????????比方說：現(xiàn)在有相鄰的3個(gè)按鈕，它們的位置設(shè)置像上面說的一樣。現(xiàn)在，你想在按鈕被按下的時(shí)，讓按鈕向上一點(diǎn)。

????????實(shí)現(xiàn)這個(gè)設(shè)置的一個(gè)方式是給按壓狀態(tài)設(shè)置一個(gè)新的Y坐標(biāo)：

1. static lv_style_t style_normal; 2. lv_style_init(&style_normal); 3. lv_style_set_y(&style_normal, 100); 4. static lv_style_t style_pressed; 5. lv_style_init(&style_pressed); 6. lv_style_set_y(&style_pressed, 80); 7. lv_obj_add_style(btn1, &style_normal, LV_STATE_DEFAULT); 8. lv_obj_add_style(btn1, &style_pressed, LV_STATE_PRESSED); 9. lv_obj_add_style(btn2, &style_normal, LV_STATE_DEFAULT); 10. lv_obj_add_style(btn2, &style_pressed, LV_STATE_PRESSED); 11. lv_obj_add_style(btn3, &style_normal, LV_STATE_DEFAULT); 12. lv_obj_add_style(btn3, &style_pressed, LV_STATE_PRESSED);

?????????可以通過上面的的方式實(shí)現(xiàn)這個(gè)需求，但是，由于這是硬編碼實(shí)現(xiàn)的，看起來不夠絲滑。如果按鈕不在y=100，style_pressed不會(huì)按照預(yù)期的那樣工作。為了解決這個(gè)問題可以使用Translation來實(shí)現(xiàn)：

1. static lv_style_t style_normal; 2. lv_style_init(&style_normal); 3. lv_style_set_y(&style_normal, 100); 4. static lv_style_t style_pressed; 5. lv_style_init(&style_pressed); 6. lv_style_set_translate_y(&style_pressed, -20); 7. lv_obj_add_style(btn1, &style_normal, LV_STATE_DEFAULT); 8. lv_obj_add_style(btn1, &style_pressed, LV_STATE_PRESSED); 9. lv_obj_add_style(btn2, &style_normal, LV_STATE_DEFAULT); 10. lv_obj_add_style(btn2, &style_pressed, LV_STATE_PRESSED); 11. lv_obj_add_style(btn3, &style_normal, LV_STATE_DEFAULT); 12. lv_obj_add_style(btn3, &style_pressed, LV_STATE_PRESSED);

????????通過上面的操作變換（Translation）被應(yīng)用于對象的當(dāng)前位置。

????????百分比值也用于（Translation）。對象的大小與百分比有關(guān)（不會(huì)作用于父類）。比如：lv_pct(50)可以使對象移動(dòng)到它的寬或高一半的距離。

在布局計(jì)算之后轉(zhuǎn)換（translation）才會(huì)應(yīng)用。因此即使已經(jīng)布局的對象的位置一樣可以被轉(zhuǎn)換。

轉(zhuǎn)換（translation）實(shí)際上上是移動(dòng)了對象（這本文中translation叫平移更加合適）。這就意味著它可以使?jié)L動(dòng)條和LV_SIZE_CONTENT對象對位置改變做出反應(yīng)。

六、變換Transformation

????????與位置屬性相似，尺寸屬性也可以相對于當(dāng)前尺寸大小改變。變換后的寬度和高度將會(huì)添加到對象的兩邊。這意味著在寬度10個(gè)像素的變換實(shí)際上使對象擴(kuò)展到2×10個(gè)像素的寬度。

????????不像位置變換一樣，尺寸變換不會(huì)讓對象真正的變大。換句話說，滾動(dòng)條、布局、LV_SIZE_CONTENT不會(huì)考慮轉(zhuǎn)換大小。因此如果僅僅是一個(gè)視覺效果使用尺寸變化更合適。

????????下面的代碼使一個(gè)按鈕在按下時(shí)變大：

1. static lv_style_t style_pressed; lv_style_init(&style_pressed); 2. lv_style_set_transform_width(&style_pressed, 10); 3. lv_style_set_transform_height(&style_pressed, 10); 4. 5. lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);

????????與位置相似，大小也可以根據(jù)當(dāng)前大小進(jìn)行更改。轉(zhuǎn)換后的寬度和高度被添加到對象的兩邊。這意味著10像素的轉(zhuǎn)換寬度使對象寬2x10像素。

????????與位置平移不同，這種大小的轉(zhuǎn)換并不會(huì)讓對象真正的變大。換句話說，滑塊、布局、LV_SIZE_CONTENT將不考慮轉(zhuǎn)換后的大小。因此這樣的尺寸變化只是一個(gè)視覺效果。

下面的代碼可以實(shí)現(xiàn)當(dāng)按鈕被按下時(shí)變大的效果：

1. static lv_style_t style_pressed; lv_style_init(&style_pressed); 2. lv_style_set_transform_width(&style_pressed, 10); 3. lv_style_set_transform_height(&style_pressed, 10); 4. 5. lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);

6.1?最大最小尺寸（Min and Max size）

????????類似于CSS，LVGL也支持min-width, max-width, min-height 和 max-height.他們可以限制對象尺寸的范圍。如果這些值由百分比或者LV_SIZE_CONTENT設(shè)置，這些限制非常有效。

1. static lv_style_t style_max_height; 2. lv_style_init(&style_max_height); 3. lv_style_set_y(&style_max_height, 200); 4. lv_obj_set_height(obj, lv_pct(100)); 5. lv_obj_add_style(obj, &style_max_height, LV_STATE_DEFAULT); //Limit the height to 200 px

還可以使用相對于父類內(nèi)容區(qū)域大小的百分比值:

1. static lv_style_t style_max_height; 2. lv_style_init(&style_max_height); 3. lv_style_set_y(&style_max_height, lv_pct(50)); 4. lv_obj_set_height(obj, lv_pct(100)); 5. lv_obj_add_style(obj, &style_max_height, LV_STATE_DEFAULT); //Limit the height to?half parent heigh

七、 布局Layout

7.1 概覽（Overview）

????????布局能夠更新一個(gè)對象的子類的位置和尺寸大小。他們能夠使子類自動(dòng)的按照一行或者一列的方式排布，或者更加復(fù)雜的方式。

????????布局設(shè)置的位置和大小將覆蓋正常情況下x，y，高度、寬度的設(shè)置。

????????每個(gè)布局只有一個(gè)相同的功能：lv_obj_set_layout(obj,? <LAYOUT_NAME>)設(shè)置對象上的布局。有關(guān)父級類和子類的進(jìn)一步設(shè)置，請參閱給定布局的文檔。

7.2內(nèi)置布局Built-in layout

LVGL具有兩個(gè)非常強(qiáng)大的布局：

• Flexbox
• Grid

兩者都深受同名 CSS 布局的啟發(fā)。

7.2 標(biāo)志 （Flags）

可以在對象上使用一些標(biāo)志可以用來影響布局時(shí)對象的行為：

LV_OBJ_FLAG_HIDDEN ：在布局運(yùn)算中忽略隱藏對象。

• LV_OBJ_FLAG_IGNORE_LAYOUT 布局只會(huì)忽略該對象，它的坐標(biāo)可以像往常一樣被設(shè)置。
• LV_OBJ_FLAG_FLOATING??????????? 跟LV_OBJ_FLAG_IGNORE_LAYOUT相似，但是使用LV_OBJ_FLAG_FLOATING的對象 將會(huì)從LV_SIZE_CONTENT 計(jì)算中被忽略。

這些標(biāo)志可以添加或者刪除通過方法： lv_obj_add/clear_flag(obj,? FLAG)；

7.3 Adding new layouts（添加新的布局）

LVGL可以通過如下自定義布局自由的擴(kuò)展：

1. uint32_t MY_LAYOUT; 2. ... 3. MY_LAYOUT = lv_layout_register(my_layout_update, &user_data); 4. ... 5. void my_layout_update(lv_obj_t * obj, void * user_data) 6. { 7. /*Will be called automatically if required to reposition/resize the children of "obj" */ 8. }

還可以添加自定義風(fēng)格屬性，這些屬性可以在更新回調(diào)函數(shù)中獲取，例如：

1. uint32_t MY_PROP; 2. ... 3. LV_STYLE_MY_PROP = lv_style_register_prop(); 4. ... 5. static inline void lv_style_set_my_prop(lv_style_t * style, uint32_t value) 6. { 7. lv_style_value_t v = { 8. .num = (int32_t)value 9. }; 10. lv_style_set_prop(style, LV_STYLE_MY_PROP, v); 11. }

總結(jié)

以上是生活随笔為你收集整理的LVGL系列（四）概述 之 位置、尺寸和布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。