lvgl v8之Styling the scrollbars

Styling the scrollbars

/**
* Styling the scrollbars
*/
static void lv_example_scroll_4(void)
{
    lv_obj_t* obj = lv_obj_create(lv_scr_act()); // 创建obj对象
    lv_obj_set_size(obj, 200, 100);   // 设置大小
    lv_obj_center(obj);        // 居中显示
    lv_obj_t* label = lv_label_create(obj);  // 在obj对象上创建label对象
    lv_label_set_text(label,
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n"
        "Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula. \n"
        "Sed vestibulum sapien nulla, id convallis ex porttitor nec. \n"
        "Duis et massa eu libero accumsan faucibus a in arcu. \n"
        "Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor. \n"
        "Sed nisl augue, venenatis in blandit et, gravida ac tortor. \n"
        "Etiam dapibus elementum suscipit. \n"
        "Proin mollis sollicitudin convallis. \n"
        "Integer dapibus tempus arcu nec viverra. \n"
        "Donec molestie nulla enim, eu interdum velit placerat quis. \n"
        "Donec id efficitur risus, at molestie turpis. \n"
        "Suspendisse vestibulum consectetur nunc ut commodo. \n"
        "Fusce molestie rhoncus nisi sit amet tincidunt. \n"
        "Suspendisse a nunc ut magna ornare volutpat."); // 设置文字内容
    /*Remove the style of scrollbar to have clean start*/
    lv_obj_remove_style(obj, NULL, LV_PART_SCROLLBAR | LV_STATE_ANY); 
    /*Create a transition the animate the some properties on state change*/
    static const lv_style_prop_t props[] = { LV_STYLE_BG_OPA, LV_STYLE_WIDTH, 0 };
    static lv_style_transition_dsc_t trans;
    lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 200, 0, NULL);  // transition描述初时化
    /*Create a style for the scrollbars*/
    static lv_style_t style;  // 定义style静态变量
    lv_style_init(&style);  // style初时化
    lv_style_set_width(&style, 4); /*Width of the scrollbar*/
    lv_style_set_pad_right(&style, 5); /*Space from the parallel side*/
    lv_style_set_pad_top(&style, 5); /*Space from the perpendicular side*/
    lv_style_set_radius(&style, 2);   //设置倒角大小
    lv_style_set_bg_opa(&style, LV_OPA_70); //设置背景透明度
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE)); //设置背景颜色
    lv_style_set_border_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 3)); //设置边框颜色
    lv_style_set_border_width(&style, 2); //设置边框宽度
    lv_style_set_shadow_width(&style, 8); // 设置阴影宽度
    lv_style_set_shadow_spread(&style, 2); // 设置阴影延伸值
    lv_style_set_shadow_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 1)); // 设置阴影颜色
    lv_style_set_transition(&style, &trans); //设置transition的风格
    /*Make the scrollbars wider and use 100% opacity when scrolled*/
    static lv_style_t style_scrolled; // 定义滚动静态style变量
    lv_style_init(&style_scrolled);  //初时化style
    lv_style_set_width(&style_scrolled, 8);  //设置style宽度值
    lv_style_set_bg_opa(&style_scrolled, LV_OPA_COVER); // 设置背景透明度
    lv_obj_add_style(obj, &style, LV_PART_SCROLLBAR);  //obj对象关联LV_PART_SCROLLBAR style  
    lv_obj_add_style(obj, &style_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED); //obj对象关联滚动LV_PART_SCROLLBAR和LV_STATE_SCROLLED style
}

运行效果图

修改滚动style_scrolled宽度值

lv_style_set_width(&style_scrolled, 28);

再次运行效果值