使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第二十四讲)

窗口部件作为一个容器可以展示出不同功能的页面，该控件主要由俩部分构成头部与主体

如上图所示，头部由标题以及按键构成而主体由窗口下方的控件构成，当窗口弹出可以使用户调配。标签的原型就是标签更改文本即可，而按键可以用:lv_win_add_btn_right(win, LV_SYMBOL_CLOSE)添加到窗口头的右侧，如果要在窗口头的左侧添加按钮，可以用lv_win_add_btn_left(win, LV_SYMBOL_CLOSE)代替。第二个参数是一个图像源，因此它可以是一个符号、指向lv_img_dsc_t变量的指针或文件的路径。按钮的宽度可以用lv_win_set_btn_width(win, w)来设置。如果w == 0，按钮将是方形的。lv_win_close_event_cb可以作为一个事件回调函数来关闭窗口。

以下是生成的具体代码：
//Write codes screen_1_win_1
//创建一个窗口，文本为setting
ui->screen_1_win_1 = lv_win_create(ui->screen_1, 40);
lv_obj_t * screen_1_win_1_title = lv_win_add_title(ui->screen_1_win_1, “setting”);
//为窗口添加一个关闭按键
ui->screen_1_win_1_item0 = lv_win_add_btn(ui->screen_1_win_1, LV_SYMBOL_CLOSE, 40);
//在窗口内容区创建一个标签，标签为空
lv_obj_t *screen_1_win_1_label = lv_label_create(lv_win_get_content(ui->screen_1_win_1));
lv_label_set_text(screen_1_win_1_label, “”);
//关闭了窗口内容区的滚动条
lv_obj_set_scrollbar_mode(lv_win_get_content(ui->screen_1_win_1), LV_SCROLLBAR_MODE_OFF);
//设置窗口位置以及大小
lv_obj_set_pos(ui->screen_1_win_1, 44, 115);
lv_obj_set_size(ui->screen_1_win_1, 400, 200);
lv_obj_set_scrollbar_mode(ui->screen_1_win_1, LV_SCROLLBAR_MODE_OFF);

//Write style for screen_1_win_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置窗口背景透明度
lv_obj_set_style_bg_opa(ui->screen_1_win_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景颜色为灰色
lv_obj_set_style_bg_color(ui->screen_1_win_1, lv_color_hex(0xeeeef6), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置渐变方向为无
lv_obj_set_style_bg_grad_dir(ui->screen_1_win_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置外边框以及阴影为0
lv_obj_set_style_outline_width(ui->screen_1_win_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_win_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_1_win_1_extra_content_main_default
//默认窗口使用默认的样式
static lv_style_t style_screen_1_win_1_extra_content_main_default;
ui_init_style(&style_screen_1_win_1_extra_content_main_default);
//背景透明度设置
lv_style_set_bg_opa(&style_screen_1_win_1_extra_content_main_default, 255);
//设置背景颜色
lv_style_set_bg_color(&style_screen_1_win_1_extra_content_main_default, lv_color_hex(0xeeeef6));
//背景渐变方向设置
lv_style_set_bg_grad_dir(&style_screen_1_win_1_extra_content_main_default, LV_GRAD_DIR_NONE);
//文本颜色设置
lv_style_set_text_color(&style_screen_1_win_1_extra_content_main_default, lv_color_hex(0x393c41));
//字体设置
lv_style_set_text_font(&style_screen_1_win_1_extra_content_main_default, &lv_font_montserratMedium_12);

//文本透明度设置
lv_style_set_text_opa(&style_screen_1_win_1_extra_content_main_default, 255);
//文本字间距设置
lv_style_set_text_letter_space(&style_screen_1_win_1_extra_content_main_default, 0);
//文本行间距设置
lv_style_set_text_line_space(&style_screen_1_win_1_extra_content_main_default, 2);
//应用样式
lv_obj_add_style(lv_win_get_content(ui->screen_1_win_1), &style_screen_1_win_1_extra_content_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_1_win_1_extra_header_main_default
//定义样式
static lv_style_t style_screen_1_win_1_extra_header_main_default;
ui_init_style(&style_screen_1_win_1_extra_header_main_default);
//透明度
lv_style_set_bg_opa(&style_screen_1_win_1_extra_header_main_default, 255);
//颜色
lv_style_set_bg_color(&style_screen_1_win_1_extra_header_main_default, lv_color_hex(0xe6e6e6));
//渐变方向
lv_style_set_bg_grad_dir(&style_screen_1_win_1_extra_header_main_default, LV_GRAD_DIR_NONE);
//文本颜色以及字体
lv_style_set_text_color(&style_screen_1_win_1_extra_header_main_default, lv_color_hex(0x393c41));
lv_style_set_text_font(&style_screen_1_win_1_extra_header_main_default, &lv_font_montserratMedium_12);
//文本透明度以及字间距和行间距
lv_style_set_text_opa(&style_screen_1_win_1_extra_header_main_default, 255);
lv_style_set_text_letter_space(&style_screen_1_win_1_extra_header_main_default, 0);
lv_style_set_text_line_space(&style_screen_1_win_1_extra_header_main_default, 2);
//内边距设置
lv_style_set_pad_top(&style_screen_1_win_1_extra_header_main_default, 5);
lv_style_set_pad_right(&style_screen_1_win_1_extra_header_main_default, 5);
lv_style_set_pad_bottom(&style_screen_1_win_1_extra_header_main_default, 5);
lv_style_set_pad_left(&style_screen_1_win_1_extra_header_main_default, 5);
lv_style_set_pad_column(&style_screen_1_win_1_extra_header_main_default, 5);
lv_obj_add_style(lv_win_get_header(ui->screen_1_win_1), &style_screen_1_win_1_extra_header_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_1_win_1_extra_btns_main_default
//初始化样式对象
static lv_style_t style_screen_1_win_1_extra_btns_main_default;
ui_init_style(&style_screen_1_win_1_extra_btns_main_default);
//按钮样式设置
lv_style_set_radius(&style_screen_1_win_1_extra_btns_main_default, 8);
lv_style_set_border_width(&style_screen_1_win_1_extra_btns_main_default, 0);
lv_style_set_bg_opa(&style_screen_1_win_1_extra_btns_main_default, 255);
lv_style_set_bg_color(&style_screen_1_win_1_extra_btns_main_default, lv_color_hex(0x2195f6));
lv_style_set_bg_grad_dir(&style_screen_1_win_1_extra_btns_main_default, LV_GRAD_DIR_NONE);
lv_style_set_shadow_width(&style_screen_1_win_1_extra_btns_main_default, 0);
lv_obj_add_style(ui->screen_1_win_1_item0, &style_screen_1_win_1_extra_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write codes screen_1_slider_1
//创建以及设置滑动条
ui->screen_1_slider_1 = lv_slider_create(ui->screen_1);
lv_slider_set_range(ui->screen_1_slider_1, 0, 100);
lv_slider_set_mode(ui->screen_1_slider_1, LV_SLIDER_MODE_NORMAL);
lv_slider_set_value(ui->screen_1_slider_1, 50, LV_ANIM_OFF);
lv_obj_set_pos(ui->screen_1_slider_1, 110, 189);
lv_obj_set_size(ui->screen_1_slider_1, 265, 8);

//Write style for screen_1_slider_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//滑动条样式设置
lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 60, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_slider_1, 50, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_outline_width(ui->screen_1_slider_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_slider_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_slider_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_1_slider_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置背景颜色
lv_obj_set_style_bg_color(ui->screen_1_slider_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);
//禁用渐变背景
lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置圆角半径
lv_obj_set_style_radius(ui->screen_1_slider_1, 50, LV_PART_INDICATOR|LV_STATE_DEFAULT);

//Write codes screen_1_slider_2
//创建以及设置滑动条
ui->screen_1_slider_2 = lv_slider_create(ui->screen_1);
lv_slider_set_range(ui->screen_1_slider_2, 0, 100);
lv_slider_set_mode(ui->screen_1_slider_2, LV_SLIDER_MODE_NORMAL);
lv_slider_set_value(ui->screen_1_slider_2, 50, LV_ANIM_OFF);
lv_obj_set_pos(ui->screen_1_slider_2, 110, 247);
lv_obj_set_size(ui->screen_1_slider_2, 265, 8);

//Write style for screen_1_slider_2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//滑动条样式设置
lv_obj_set_style_bg_opa(ui->screen_1_slider_2, 60, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_slider_2, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_2, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_slider_2, 50, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_outline_width(ui->screen_1_slider_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_slider_2, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_slider_2, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_1_slider_2, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置背景颜色
lv_obj_set_style_bg_color(ui->screen_1_slider_2, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);
//禁用渐变背景
lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_2, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//设置圆角半径
lv_obj_set_style_radius(ui->screen_1_slider_2, 50, LV_PART_INDICATOR|LV_STATE_DEFAULT);

//Write style for screen_1_slider_2, Part: LV_PART_KNOB, State: LV_STATE_DEFAULT.
//滑动条样式设置
lv_obj_set_style_bg_opa(ui->screen_1_slider_2, 255, LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_slider_2, lv_color_hex(0x2195f6), LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_slider_2, LV_GRAD_DIR_NONE, LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_slider_2, 50, LV_PART_KNOB|LV_STATE_DEFAULT);
下一期讲解其他控件的使用。
本文章由威三学社出品
对课程感兴趣可以私信联系