這一期講解GUI_guider中的容器控件的使用以及相關函數，容器本質上是具有布局和自動調整大小功能的基本對象 ，通常用來裝載其他子控件。
打開上一期的項目，在工具欄中選中容器控件拖拽到界面中，具體如圖所示：
容器默認是浮于其他控件上，我們右鍵容器控件選擇“置底”，然后改變容器位置為（75，56），大小為（329，400），圓角半徑為30，具體如圖所示：
以下是界面的相關代碼：
//Write codes screen_2_cont_1
//創建容器控件
ui->screen_2_cont_1 = lv_obj_create(ui->screen_2);
//設置位置以及大小
lv_obj_set_pos(ui->screen_2_cont_1, 75, 56);
lv_obj_set_size(ui->screen_2_cont_1, 329, 400);
//禁用容器滾動條
lv_obj_set_scrollbar_mode(ui->screen_2_cont_1, LV_SCROLLBAR_MODE_OFF);
//Write style for screen_2_cont_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//設置邊框寬度
lv_obj_set_style_border_width(ui->screen_2_cont_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框透明度
lv_obj_set_style_border_opa(ui->screen_2_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框顏色
lv_obj_set_style_border_color(ui->screen_2_cont_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框顯示方式
lv_obj_set_style_border_side(ui->screen_2_cont_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置圓角半徑
lv_obj_set_style_radius(ui->screen_2_cont_1, 30, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置背景透明度
lv_obj_set_style_bg_opa(ui->screen_2_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置背景顏色
lv_obj_set_style_bg_color(ui->screen_2_cont_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//設置背景漸變方向
lv_obj_set_style_bg_grad_dir(ui->screen_2_cont_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置內邊距（頂部、底部、左側、右側）
lv_obj_set_style_pad_top(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置陰影寬度
lv_obj_set_style_shadow_width(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
?
容器控件布局方式的API
lv_cont_set_layout(lv_obj_t * cont, lv_layout_t layout)；其中第二個參數指的是容器的布局方式。
- LV_LAYOUT_OFF = 0
無布局：沒有指定布局，意味著對象的位置和大小由開發者手動設置，LVGL 不會自動調整。 - LV_LAYOUT_CENTER
居中布局：將對象放置在容器的中心位置。 - LV_LAYOUT_COL_L
列左對齊：將對象垂直排列在列中，并將所有對象左對齊。 - LV_LAYOUT_COL_M
列中對齊：將對象垂直排列在列中，并將所有對象在列中居中對齊。 - LV_LAYOUT_COL_R
列右對齊：將對象垂直排列在列中，并將所有對象右對齊。 - LV_LAYOUT_ROW_T
行頂部對齊：將對象水平排列在一行中，并將所有對象頂部對齊。 - LV_LAYOUT_ROW_M
行中部對齊：將對象水平排列在一行中，并將所有對象在行中居中對齊。 - LV_LAYOUT_ROW_B
行底部對齊：將對象水平排列在一行中，并將所有對象底部對齊。 - LV_LAYOUT_PRETTY
美觀布局：盡可能將對象排列在一行中，直到空間不夠時自動換行。 - LV_LAYOUT_GRID
網格布局：將同樣大小的對象排列成一個網格布局。 - LV_LAYOUT_NUM
布局類型的數量：表示布局類型的總數（這個常量通常用于表示布局枚舉的數量）。
容器自適應的API
函數有三個分別為：（1）lv_cont_set_fit4(lv_obj_t * cont, lv_fit_t left, lv_fit_t right, lv_fit_t top, lv_fit_t bottom)
（2）static inline void lv_cont_set_fit2(lv_obj_t * cont, lv_fit_t hor, lv_fit_t ver)
（3）static inline void lv_cont_set_fit(lv_obj_t * cont, lv_fit_t fit)
以上函數的作用都是設定容器的自適應方式，第一個設定四個方向的自適應方式，第二個是設定水平和垂直方向上的自適應方式，第三個是將四個方向的自適應方式統一設定。
以下是lv_fit_t的定義：
- LV_FIT_NONE
不自動調整大小：此選項表示對象的大小不會自動調整，而是保持開發者手動設置的大小，不受父容器或子對象的影響。 - LV_FIT_TIGHT
緊縮包裹子對象：對象的大小會自動調整為剛好包裹其所有子對象的大小，即對象的尺寸會緊密貼合子對象，避免任何空隙。 - LV_FIT_FLOOD
填充到父容器的邊緣：對象的大小會自動調整，使其填滿父容器的空間。這意味著對象的大小會與父容器的尺寸一致。 - LV_FIT_FILL
填充父容器的邊緣，但如果有子對象超出父容器范圍，則會增大對象大小：這個選項首先會讓對象填滿父容器的邊緣。如果對象內有子對象超出父容器的邊界，容器會自動增大，直到所有子對象都能完全顯示為止。 - _LV_FIT_NUM
適配類型數量：表示適配類型的總數，通常用于定義適配類型的枚舉數量。
注：具體請參照對應版本的官方手冊。
這些適配類型控制了對象如何根據其父容器和子對象的情況調整大小。不同的適配類型可以滿足不同布局和排版需求，讓開發者更靈活地管理對象的尺寸和顯示效果，下一期將講解登錄按鍵以及ok的回調邏輯。
本文章由威三學社出品
對課程感興趣可以私信聯系
)
（每套四十題）)
