這一期講解lvgl中下拉框的基礎使用，下拉列表允許用戶從選項列表中選擇一個值，下拉列表的選項表默認是關閉的，其中的選項可以是單個值或預定義文本。 當單擊下拉列表后，其將創建一個列表，用戶可以從中選擇一個選項。 當用戶選擇了一個值后，該列表將被刪除，下次點擊會再重新生成。總而言之，下拉框控件是由按鍵與列表組成的控件。
使用GUI_Guider軟件在工具欄將下拉框拖拽到界面中，以下是下拉框的默認樣式：
在右側的屬性列表中，下拉框分為三個模塊分別是main主模塊、selected選擇模塊、list列表模塊、scrollbar滾輪模塊。
以下圖片是main主模塊的使用，可以分別配置控件的主顏色、字體顏色以及邊框等設置。
以下圖片是selected選擇模塊的使用，主要用來設置點擊下拉框后，選中條的屬性設置，分別有選中的邊框粗細以及顏色的設置。
以下指的是列表的屬性設置具體有列表背景顏色、邊框大小以及字體設置，最后的高度指的是列表展開的長度設置。
以下是scrollbar滾輪模塊的使用，主要用來設置右側滾動條的顏色以及粗細。
以下是下拉框的相關生成代碼：
//Write codes screen_1_ddlist_1
ui->screen_1_ddlist_1 = lv_dropdown_create(ui->screen_1);
//設置列表元素
lv_dropdown_set_options(ui->screen_1_ddlist_1, “list1\nlist2\nlist3”);
//設置列表位置以及大小
lv_obj_set_pos(ui->screen_1_ddlist_1, 144, 187);
lv_obj_set_size(ui->screen_1_ddlist_1, 168, 31);
//Write style for screen_1_ddlist_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//設置文本顏色
lv_obj_set_style_text_color(ui->screen_1_ddlist_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//設置文本字體
lv_obj_set_style_text_font(ui->screen_1_ddlist_1, &lv_font_SourceHanSerifSC_Regular_12, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置文本透明度
lv_obj_set_style_text_opa(ui->screen_1_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框寬度
lv_obj_set_style_border_width(ui->screen_1_ddlist_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框透明度
lv_obj_set_style_border_opa(ui->screen_1_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框顏色
lv_obj_set_style_border_color(ui->screen_1_ddlist_1, lv_color_hex(0xe1e6ee), LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框類型
lv_obj_set_style_border_side(ui->screen_1_ddlist_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框內邊距
lv_obj_set_style_pad_top(ui->screen_1_ddlist_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_1_ddlist_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_1_ddlist_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置邊框圓角半徑
lv_obj_set_style_radius(ui->screen_1_ddlist_1, 4, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置背景透明度
lv_obj_set_style_bg_opa(ui->screen_1_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置背景顏色
lv_obj_set_style_bg_color(ui->screen_1_ddlist_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);
//設置背景漸變方向
lv_obj_set_style_bg_grad_dir(ui->screen_1_ddlist_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//設置陰影寬度
lv_obj_set_style_shadow_width(ui->screen_1_ddlist_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style state: LV_STATE_CHECKED for &style_screen_1_ddlist_1_extra_list_selected_checked
static lv_style_t style_screen_1_ddlist_1_extra_list_selected_checked;
ui_init_style(&style_screen_1_ddlist_1_extra_list_selected_checked);
//設置邊框寬度
lv_style_set_border_width(&style_screen_1_ddlist_1_extra_list_selected_checked, 1);
//設置邊框透明度
lv_style_set_border_opa(&style_screen_1_ddlist_1_extra_list_selected_checked, 255);
//設置邊框顏色
lv_style_set_border_color(&style_screen_1_ddlist_1_extra_list_selected_checked, lv_color_hex(0xe1e6ee));
//設置邊框類型
lv_style_set_border_side(&style_screen_1_ddlist_1_extra_list_selected_checked, LV_BORDER_SIDE_FULL);
//設置邊框圓角半徑
lv_style_set_radius(&style_screen_1_ddlist_1_extra_list_selected_checked, 3);
//設置背景透明度
lv_style_set_bg_opa(&style_screen_1_ddlist_1_extra_list_selected_checked, 255);
//設置背景顏色
lv_style_set_bg_color(&style_screen_1_ddlist_1_extra_list_selected_checked, lv_color_hex(0x00a1b5));
//設置背景漸變方向
lv_style_set_bg_grad_dir(&style_screen_1_ddlist_1_extra_list_selected_checked, LV_GRAD_DIR_NONE);
//將樣式應用于下拉列表的選中項
lv_obj_add_style(lv_dropdown_get_list(ui->screen_1_ddlist_1), &style_screen_1_ddlist_1_extra_list_selected_checked, LV_PART_SELECTED|LV_STATE_CHECKED);
//Write style state: LV_STATE_DEFAULT for &style_screen_1_ddlist_1_extra_list_main_default
static lv_style_t style_screen_1_ddlist_1_extra_list_main_default;
ui_init_style(&style_screen_1_ddlist_1_extra_list_main_default);
//設置最大高度
lv_style_set_max_height(&style_screen_1_ddlist_1_extra_list_main_default, 90);
//設置文本顏色
lv_style_set_text_color(&style_screen_1_ddlist_1_extra_list_main_default, lv_color_hex(0x0D3055));
//設置字體類型
lv_style_set_text_font(&style_screen_1_ddlist_1_extra_list_main_default, &lv_font_montserratMedium_12);
//設置文本透明度
lv_style_set_text_opa(&style_screen_1_ddlist_1_extra_list_main_default, 255);
//設置邊框寬度
lv_style_set_border_width(&style_screen_1_ddlist_1_extra_list_main_default, 1);
//設置邊框透明度
lv_style_set_border_opa(&style_screen_1_ddlist_1_extra_list_main_default, 255);
//設置邊框顏色
lv_style_set_border_color(&style_screen_1_ddlist_1_extra_list_main_default, lv_color_hex(0xe1e6ee));
//設置邊框類型
lv_style_set_border_side(&style_screen_1_ddlist_1_extra_list_main_default, LV_BORDER_SIDE_FULL);
//設置圓角半徑
lv_style_set_radius(&style_screen_1_ddlist_1_extra_list_main_default, 3);
//設置背景透明度
lv_style_set_bg_opa(&style_screen_1_ddlist_1_extra_list_main_default, 255);
//設置背景顏色
lv_style_set_bg_color(&style_screen_1_ddlist_1_extra_list_main_default, lv_color_hex(0xffffff));
//設置背景漸變色方向
lv_style_set_bg_grad_dir(&style_screen_1_ddlist_1_extra_list_main_default, LV_GRAD_DIR_NONE);
//將樣式應用于下拉列表的主部分
lv_obj_add_style(lv_dropdown_get_list(ui->screen_1_ddlist_1), &style_screen_1_ddlist_1_extra_list_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style state: LV_STATE_DEFAULT for &style_screen_1_ddlist_1_extra_list_scrollbar_default
static lv_style_t style_screen_1_ddlist_1_extra_list_scrollbar_default;
ui_init_style(&style_screen_1_ddlist_1_extra_list_scrollbar_default);
//設置圓角半徑
lv_style_set_radius(&style_screen_1_ddlist_1_extra_list_scrollbar_default, 3);
//設置背景透明度
lv_style_set_bg_opa(&style_screen_1_ddlist_1_extra_list_scrollbar_default, 255);
//設置背景顏色
lv_style_set_bg_color(&style_screen_1_ddlist_1_extra_list_scrollbar_default, lv_color_hex(0x00ff00));
//設置漸變色方向 lv_style_set_bg_grad_dir(&style_screen_1_ddlist_1_extra_list_scrollbar_default, LV_GRAD_DIR_NONE);
//將樣式應用到滾動條
lv_obj_add_style(lv_dropdown_get_list(ui->screen_1_ddlist_1), &style_screen_1_ddlist_1_extra_list_scrollbar_default, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);
下一期講解下拉框的回調以及信號。
本文章由威三學社出品
對課程感興趣可以私信聯系
)
