lvgl6.1.2控件介紹

1.圓弧(arc)

arc 控件的結構非常簡單，一個可以控制角度和厚度的圓弧 。我們可以利用該控件做加載等待或者其他工作。角度應該在 0-360 度范圍內。弧的寬度和高度是相同的。

2.進度條(bar)

bar 控件的構造非常簡單，主要有兩部分：一個固定的背景；一個可以調節的指示器。bar 控件多用來顯示進度等信息。

3.按鈕(button)

按鈕作為一個通用的輸入輸出控件，在 UI 中有大量的使用。按鈕通常是一個簡單的矩形，在按下或者釋放時有不同的狀態。需要注意的是，LittlevGL 的按鈕不像其他 GUI 一樣可以設置文本，而需要用戶添加 label 作為文本顯示。

4.按鈕陣列(button matrix)

button matrix 控件就是 button 的資源簡化、布局擴展版本，他更易於按鈕矩陣的布局，而且矩陣內每個按鈕的資源消耗跟少，有了 button matrix，我們需要創建一個九宮格的鍵盤變得非常簡單。但是由於資源簡化，button matrix也有很多限制，比如，button matrix控件內置的 label 沒有接口修改其樣式。

5.日歷(calendar)

calendar 是一個經典的日歷控件，可以顯示日期。能夠突出顯示當前日期，突出顯示任何自定義的日期，可以選擇日期等。選中的日期會進行突出顯示，也可以手動設置日期進行高亮顯示。

日期使用一個 lv_calendar_date_t 結構體進行保存，包含了年月日。設置和獲取日期都使用這個結構體變量。

6.畫布(canvas)

canvas 畫布是一個很自由的一塊繪制區域，用戶可以在上面繪制任何內容，可以將控件繪制在上面，也可以在上面進行 2D 繪圖，例如矩形，圓等圖形。

7.復選框(checkbox)

checkbox控件用於選擇/非選某一個項目，他的工作機制相當於一個使能了toggle的btn，而且從源碼中也可以看出，checkbox控件就是基於button進行構建的，在 button的基礎上重繪了背景，使能了toggle，增加了label文本等。checkbox控件跟switch控件的工作機制相似，都是用於開關或選擇。

8.圖表(chart)

chart 控件包含了表格背景以及數據顯示，數據顯示包括點、線、柱狀、區域顯示等可選。

9.容器(container)

cont 控件可以為子對象提供一個容器，可以設置其布局，其本質上是具有某些特殊功能的基本對象。

 

10.下拉列表(drop-down list)

下拉列表多用於選擇，從多個選項中選擇某一項。默認情況下，下拉列表處於關閉狀態，控件內僅顯示當前選擇的項目。可以通過點擊它使它展開，他將顯示所有的選項，用戶可以選擇某一個新的選項。

11.儀表盤(gauge)

gauge 控件是帶有刻度和標簽的儀表。可以用於數據值的圖形化顯示，顯示速度、溫濕度或者其他數值。

12.圖像(image)

圖像可以是存儲位圖本身和一些元數據的文件或變量。

13.圖像按鈕(image button)

image button與簡單的button對象非常相似。唯一的區別是，它在每個狀態中顯示用戶定義的圖像，而不是繪制一個按鈕。

14.鍵盤(keyboard)

LittlevGL 為我們提供了一個虛擬鍵盤的控件，可以實現文本和數組以及符號的輸入。kb 鍵盤控件是基於 btnm 控件進行構建的，具有預定義的按鍵映射和其他功能，可以實現虛擬鍵盤來編寫文本。鍵盤有兩種模式可用：LV_KB_MODE_TEXT 顯示字母、數字和符號；LV_KB_MODE_NUM 顯示數字和簡單符號。

15.文本(label)

label 是顯示文本的基本控件，也是LittlevGL中最常用的控件，很多控件（比如 button）默認沒有內置文本，需要我們創建label為子對象並添加上去。

 

16.LED(LED)

led 控件非常簡單，就是一個具有 led 形狀的基礎控件，通過控制其顏色，陰影從而實現模擬 LED 開關的功能。

17.線條(line)

line 線條控件可以在一組點中繪制直線。

18.列表(list)

list 控件簡單分解就是一個背景頁面加上順序排列的按鈕組成，按鈕里面可以包含一個圖標和文本，當然，按鈕的布局並不是固定的，庫也允許用戶重新定義按鈕的布局。按鈕在添加后如果總大小超過 list 控件大小，可以上下滾動。

19.表盤(line meter)

line meter控件包含了一系列徑向線繪制成的刻度。

20.消息提示框(message box)

message box控件 經常用於信息提示，操作選擇等場合，他可以彈出一個提示框，引導用戶進行操作。message box 控件是基於 container控件構建，在上面增加了 label 文本和 button matrix按鈕矩陣，組成了一個完整的消息提示框。

21.頁面(page)

page 控件包含一個背景和一個可滾動的容器，將子對象添加到可滾動容器后，可以觸摸滾動顯示子對象。

22.預加載(preload)

預加載控件在各種 UI 系統中非常常見，它可用於等待某一個事件到達或者等待資源加載。LittlevGL 的 preload 控件是基於 arc 弧形控件進行構建的，在其基礎上增加了與加載相關的操作接口。preload 控件的構成是一個封閉的弧形背景，一個顏色不同的弧形進行旋轉。

23.滾動軸(roller)

roller 控件在智能手機的時間設置中很常見，他可以上下滾動在多個選項中選擇某一個選項。roller 的原型是 drop-down list。

24.滑塊(slider)

slider 控件可以通過滑動滑塊來設置某一個值，它包含一個固定的背景和一個可以滑動的滑塊。可以設置為垂直滑動或者水平滑動。

25.旋鈕框(spinbox)

spinbox 控件包含一個文本輸入區以及一個數字文本，可以通過按鍵或者函數增加或減少數字，可以用作特殊的數字輸入。遺憾的是。LittlevGL 沒有為我們提供可以修改 spinbox 的值的 button。

26.開關(switch)

switch 控件可用於打開/關閉某個事物，在動作上像是一個使能了 toggle 的 button 控件，從外觀和源碼可以看出來是一個 slider 滑塊控件的衍生控件。

27.表格(table)

LittlevGL 為我們提供了一個具有表格最基礎內容的 table 控件，由行、列以及文本構成。提供了基本的單元格操作，合並、對齊等。

28.表視圖(tableview)

tableview控件在移動設備中非常常見，例如很多手機APP底部的頁面切換，就是 tableview 控件的工作機制類似。tableview 可以用於切換多個頁面，每一個頁面可以提供一個 page 對象，我們可以在這個 page 對象上創建我們內容。頂部或者底部會有一個默認是按鈕的導航區。

29.文字輸入(text area)

text area 文字區域，它提供一個文本輸入框，可以跟 keyboard鍵盤控件綁定進行文字輸入。text area控件是由page控件和label 控件構成，page提供輸入框，label提供文本的展示。因此它也繼承了很多page的屬性。

30.平鋪視圖(tile view)

tile view控件可以實現多個頁面的切換顯示，同 tableview 類似卻也有很多不同的功能。tile view 提供多個頁面的網格類型的排列，可以通過上下左右滑動進行頁面切換。如果每個頁面都是屏幕大小，就像是智能手表上的上下或者左右切換頁面的效果。

31.窗口(window)

LittlevGL 的 window 控件同 PC 一樣，有標題欄、主頁面、關閉按鈕等內容。window控件也是比較常用的一種控件。window控件的頁面部分就是一個page控件，所以也有page控件的某些屬性。