嵌入式GUI LVGL『Window窗口控件』介绍

Posted 2022-01-22 Wireless_Link

一. LVGL GUI窗口控件的概念

 

该窗口是由带有标题、按钮和内容区域的标题构建的类似容器的对象。

二. LVGL GUI窗口小部件和样式

主要部分是LV_WIN_PART_BG，它包含另外两个实部分:

• LV_WIN_PART_HEADER:顶部的一个头部容器，带有标题和控制按钮
• LV_WIN_PART_CONTENT_SCRL页眉下面的内容的可滚动部分。

除此之外，LV_WIN_PART_CONTENT_SCRL还有一个称为LV_WIN_PART_CONTENT_SCRL的滚动条部分。有关滚动条的更多细节，请阅读页面的文档。

所有部件都支持典型的背景属性。标题使用标题部分的文本属性。

控制按钮的高度是:标题栏高度- header padding_top - header padding_bottom。

三. LVGL GUI窗口控件的使用

1. 标题(Title)

用这个函数来设置标题lv_win_set_title(win, "New title")

2. 控制按键(Control buttons)

控件按钮可以用: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可以作为一个事件回调函数来关闭窗口。

3. 滚动条(Scrollbars)

滚动条的行为可以通过lv_win_set_scrlbar_mode(win, LV_SCRLBAR_MODE_…)设置

4. 手动滚动跟获取焦点(Manual scroll and focus)

要直接滚动窗口，可以使用lv_win_scroll_hor(win, dist_px)或lv_win_scroll_ver(win, dist_px)。

使用lv_win_focus(win, child, LV_ANIM_ON/OFF)让窗口显示一个对象。

滚动和聚焦动画的时间可以通过lv_win_set_anim_time(win, anim_time_ms)进行调整

5. 布局(Layout)

用这个函数进行布局

我们来看个综合例子

void lvgl_window_test(void)

    /*Create a window*/
    lv_obj_t* win = lv_win_create(lv_scr_act(), NULL);
    lv_win_set_title(win, "Window title");                        /*Set the title*/


    /*Add control button to the header*/
    lv_obj_t* close_btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE);           /*Add close button and use built-in close action*/
    lv_obj_set_event_cb(close_btn, lv_win_close_event_cb);
    lv_win_add_btn(win, LV_SYMBOL_SETTINGS);        /*Add a setup button*/

    /*Add some dummy content*/
    lv_obj_t* txt = lv_label_create(win, NULL);
    lv_label_set_text(txt, "This is the content of the window\\n\\n"
        "You can add control buttons to\\n"
        "the window header\\n\\n"
        "The content area becomes\\n"
        "automatically scrollable is it's \\n"
        "large enough.\\n\\n"
        " You can scroll the content\\n"
        "See the scroll bar on the right!");

 

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓