前言

lvgl是一個開源的圖形庫，可以用於嵌入式系統中創建美觀的用戶界面。lvgl提供了多種物件，如按鈕、滑塊、文本框等，可以讓開發者快速地構建出所需的界面。本文將介紹lvgl中的物件的基本概念和操作方法。物件是lvgl中最基本的元素，它們代表了界面上的各種元件，如圖標、文字、圖形等。物件有自己的屬性，如顏色、大小、位置、對齊方式等，可以通過函數或者風格來設置。物件也有自己的事件，如點擊、拖動、釋放等，可以通過回調函數來處理。

目的

本文旨在介紹lvgl中物件的基本概念和操作方法，包括如何創建、設置大小、設置位置、設置對齊方式、處理父子關係等。通過本文，讀者可以了解lvgl中物件的特點和用法，並能夠使用物件來構建自己的GUI。

設置大小

要設置物件的大小，可以使用 lv_obj_set_size 函數，它接受一個物件指針和兩個坐標參數作為輸入，分別表示物件的寬度和高度。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建一個基礎物件

lv_obj_set_size(obj, 100, 50); //設置物件的寬度為100像素，高度為50像素

除了使用像素值來設置物件的大小外，還可以使用百分比值或者 LV_SIZE_CONTENT 常量來表示相對於父物件或者內容區域的大小。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建一個基礎物件
lv_obj_set_size(obj, lv_pct(50), LV_SIZE_CONTENT); //設置物件的寬度為父物件的50%，高度為自適應內容

設置大小時，還需要考慮物件的填充（padding）和輪廓（outline）等屬性，它們會影響物件的內容區域和外觀。填充是指物件兩側與其子物件之間的空間，輪廓是指物件外圍的一圈邊框。要設置這些屬性，可以使用 lv_obj_set_style_pad_all 和 lv_obj_set_style_outline_width 等函數。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建一個基礎物件
lv_obj_set_size(obj, 100, 50); //設置物件的寬度為100像素，高度為50像素
lv_obj_set_style_pad_all(obj, 10, 0); //設置物件的四個方向的填充為10像素
lv_obj_set_style_outline_width(obj, 5, 0); //設置物件的輪廓寬度為5像素

設置位置

要設置物件的位置，可以使用 lv_obj_set_pos 函數，它接受一個物件指針和兩個坐標參數作為輸入，分別表示物件的x坐標和y坐標。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建一個基礎物件
lv_obj_set_pos(obj, 50, 100); //設置物件的x坐標為50像素，y坐標為100像素

除了使用像素值來設置物件的位置外，還可以使用百分比值或者 LV_ALIGN_DEFAULT 等常量來表示相對於父物件或者對齊方式的位置。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建一個基礎物件
lv_obj_set_pos(obj, lv_pct(50), LV_ALIGN_CENTER); //設置物件的x坐標為父物件寬度的50%，y坐標為居中對齊

設置位置時，還需要考慮物件的變換（transform）等屬性，它們會影響物件的移動和旋轉等效果。變換是指在完成布局、對齊和其他定位之後，對物件進行額外的操作，如平移、縮放和旋轉等。要設置這些屬性，可以使用 lv_obj_set_style_transform_x 和 lv_obj_set_style_transform_zoom 等函數。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //創建一個基礎物件
lv_obj_set_pos(obj, 50, 100); //設置物件的x坐標為50像素，y坐標為100像素
lv_obj_set_style_transform_x(obj, 10, 0); //在x方向上移動物件10像素
lv_obj_set_style_transform_zoom(obj, 200, 0); //將物件放大一倍

設置對齊方式

要設置物件的對齊方式，可以使用 lv_obj_align 函數或者 lv_obj_align_to 函數。lv_obj_align 函數可以設置物件相對於其父物件的對齊方式，lv_obj_align_to 函數可以設置物件相對於另一個物件的對齊方式。這些函數都接受一個物件指針和一個對齊常量作為輸入，還可以選擇輸入x和y方向的偏移量。例如：

lv_obj_t * obj1 = lv_obj_create(lv_scr_act()); //創建一個基礎物件

lv_obj_set_size(obj1, 100, 50); //設置物件的寬度為100像素，高度為50像素

lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0); //設置物件相對於父物件居中對齊

lv_obj_t * obj2 = lv_obj_create(lv_scr_act()); //創建另一個基礎物件

lv_obj_set_size(obj2, 50, 25); //設置物件的寬度為50像素，高度為25像素

lv_obj_align_to(obj2, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 10); //設置物件相對於obj1在下方居中對齊，並在y方向上偏移10像素

對齊方式有以下幾種選項(圖1)：

• LV_ALIGN_DEFAULT: 相當於 LV_ALIGN_TOP_LEFT ，即以左上角作為原點
• LV_ALIGN_TOP_LEFT/MID/RIGHT: 分別以左上角、中上方和右上角作為原點
• LV_ALIGN_BOTTOM_LEFT/MID/RIGHT: 分別以左下角、中下方和右下角作為原點
• LV_ALIGN_LEFT/RIGHT_MID: 分別以左中方和右中方作為原點
• LV_ALIGN_CENTER: 以中心點作為原點

如果使用 lv_obj_align_to 函數，還可以在常量前加上 LV_ALIGN_OUT_ 前綴，表示在參考物件的外部對齊。(圖1)

• LV_ALIGN_OUT_TOP_LEFT/MID/RIGHT: 分別在參考物件的上方左側、中間和右側對齊
• LV_ALIGN_OUT_BOTTOM_LEFT/MID/RIGHT: 分別在參考物件的下方左側、中間和右側對齊
• LV_ALIGN_OUT_LEFT/RIGHT_MID: 分別在參考物件的左側和右側中間對齊

 

圖 1

對象的父子關係

在lvgl中，每個物件都有一個父物件，除了根物件（screen）。父物件可以包含多個子物件，形成一個樹形結構。父子關係會影響物件的位置、大小、可見性、事件傳遞等。

要創建一個子物件，可以在 lv_obj_create 函數中傳入父物件指針作為第一個參數。例如：

lv_obj_t * parent = lv_obj_create(lv_scr_act()); //創建一個基礎物件作為父物件

lv_obj_t * child = lv_obj_create(parent); //創建一個基礎物件作為子物件

要獲取或者修改一個物件的父物件，可以使用 lv_obj_get_parent 或者 lv_obj_set_parent 函數。例如：

lv_obj_t * parent = lv_obj_get_parent(child); //獲取子物件的父物件

lv_obj_set_parent(child, lv_scr_act()); //將子物件的父物件修改為根物件

父子關係會影響物件的以下方面：

• 位置：子物件的位置是相對於父物件的，而不是相對於屏幕的。如果父物件移動了，子物件也會跟隨移動。
• 大小：子物件的大小不能超過父物件的大小，否則會被裁剪。如果父物件改變了大小，子物件也會根據百分比或者自適應等規則改變大小。
• 可見性：子物件的可見性取決於父物件的可見性。如果父物件隱藏了，子物件也會隱藏。如果父物件顯示了，子物件也會顯示，除非子物件本身是隱藏的。
• 事件傳遞：子物件的事件會傳遞給父物件，除非子物件消費了該事件。這樣可以實現事件的冒泡和捕獲等機制。

結語

本文介紹了lvgl中物件的基本概念和操作方法，包括如何創建、設置大小、設置位置、設置對齊方式、處理父子關係等。通過本文，讀者可以了解lvgl中物件的特點和用法，並能夠使用物件來構建自己的GUI。

lvgl是一個功能強大而靈活的圖形庫，它還提供了許多其他的特性和組件，如佈局、樣式、主題、動畫、字體、圖像、小工具等。這些內容將在後續的文章中進行介紹。

Q&A

Q1：lvgl物件是什麼？

A1：lvgl物件是LVGL（Light and Versatile Graphics Library）中用來構建用戶界面的基本單元，也叫做部件（Widgets）。例如按鈕，標籤，圖片，列表，圖表或文本區域等。

Q2：lvgl物件有哪些共同的基本屬性？

A2：lvgl物件都有一些共同的基本屬性，例如位置，大小，父物件，拖動啟用，點擊啟用等。您可以使用lv_obj_set_…和lv_obj_get_…函數來設置或獲取這些屬性。

Q3：lvgl物件如何實現父子結構？

A3：lvgl物件可以有一個父物件和多個子物件。父物件可以看作是子物件的容器。每個物件（除了屏幕）都有一個父物件，但是一個父物件可以有任意數量的子物件。如果父物件的位置改變了，子物件會跟隨移動。因此，所有的位置都是相對於父物件的。如果子物件部分或全部超出了父物件的範圍，那麼超出的部分將不會可見。

Q4：lvgl物件如何創建和刪除？

A4：lvgl物件可以在運行時動態地創建和刪除。這意味著只有當前創建（存在）的物件佔用RAM。這允許您根據需要創建或刪除屏幕或其他部件。每種物件類型都有自己的創建函數，它需要兩個參數：一個父物件和一個複製模板（可為NULL）。

例如：

lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); //在當前屏幕上創建一個按鈕

lv_obj_t * label = lv_label_create(btn, NULL); //在按鈕上創建一個標籤

要刪除一個物件，只需調用lv_obj_del函數並傳遞要刪除的物件指針。例如：lv_obj_del(btn);//刪除按鈕和它的所有子物件

Q5：lvgl物件如何設置特定的屬性？

A5：除了共同的基本屬性外，每種物件類型還有一些特定的屬性。例如，滑塊有最小值和最大值，當前值等。對於這些特定的屬性，每種物件類型可能有獨特的API函數。

資料來源：New Bing