3、style

基本使用

lv_obj_add_style

    // 自定义样式
    static lv_style_t style;
    // 样式初始化
    lv_style_init(&style);
    //设置字体颜色
    lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_WHITE);// 默认时白色
    lv_style_set_text_color(&style, LV_STATE_PRESSED, LV_COLOR_BLACK);// 按下时黑色
    // 创建label
    lv_obj_t* label = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label, "helllo world");
    lv_label_set_long_mode(label, LV_LABEL_LONG_DOT);
    lv_obj_set_size(label, 700, 400);
    // 给label添加样式
    lv_obj_add_style(label, LV_OBJ_PART_MAIN, &style);

text_color

    // 默认时白色
    lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    // 按下时黑色
    lv_style_set_text_color(&style, LV_STATE_PRESSED, LV_COLOR_BLACK);

border

    // 边框相关
    lv_style_set_border_color(&style, LV_STATE_DEFAULT, LV_COLOR_RED); // 边框颜色
    lv_style_set_border_opa(&style, LV_STATE_DEFAULT, LV_OPA_30);    // 边框透明度
    lv_style_set_border_width(&style, LV_STATE_DEFAULT, 2);            // 边框宽度

line

    static lv_style_t style_line;
    lv_style_init(&style_line);
    lv_style_set_line_width(&style_line, LV_STATE_DEFAULT, 8);
    lv_style_set_line_color(&style_line, LV_STATE_DEFAULT, LV_COLOR_BLUE);
    lv_style_set_line_rounded(&style_line, LV_STATE_DEFAULT, true);

bg

// 设置背景颜色透明度
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER); 
// 设置背景颜色
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_GREEN); 

// 设置渐变颜色 lv_style_set_bg_grad_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE); // 设置渐变方向 lv_style_set_bg_grad_dir(&style, LV_STATE_DEFAULT, LV_GRAD_DIR_HOR); // 按下的状态 lv_style_set_bg_opa(&style, LV_STATE_PRESSED, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_PRESSED, LV_COLOR_GREEN);

lv_style_set_bg_grad_color(&style, LV_STATE_PRESSED, LV_COLOR_YELLOW);  

lv_style_set_bg_grad_dir(&style, LV_STATE_PRESSED, LV_GRAD_DIR_VER);

radius

• 圆角

  lv_style_set_radius(&style, LV_STATE_DEFAULT, 100);

• 设置自定义圆角

  lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);

pad/margin

// 设置内边距

lv_style_set_pad_all(&style, LV_STATE_DEFAULT, 0); lv_style_set_pad_top(&style, LV_STATE_DEFAULT, 30);

lv_style_set_pad_left(&style, LV_STATE_DEFAULT, 10);

lv_style_set_pad_right(&style, LV_STATE_DEFAULT, 0);

lv_style_set_pad_bottom(&style, LV_STATE_DEFAULT, 0);


// 设置子控件之间的距离

lv_style_set_pad_inner(&style, LV_STATE_DEFAULT, 0);

// 设置外边距

lv_style_set_margin_all(&style, LV_STATE_DEFAULT, 0);

lv_style_set_margin_top(&style, LV_STATE_DEFAULT, 10);

lv_style_set_margin_left(&style, LV_STATE_DEFAULT, 30);

transform

• 按下的时候宽高缩小10 ``` lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -10); lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, -10);

  static lv_anim_path_t path; lv_anim_path_init(&path); // 设置过渡函数 lv_anim_path_set_cb(&path, aa);

  lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT); lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH); lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 300); lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT, &path);

lv_anim_value_t aa(const lv_anim_path_t path, const lv_anim_t a) { LV_UNUSED(path);

/*Calculate the current step*/

uint32_t t;
if (a->time == a->act_time)
    t = 1024;
else
    t = (uint32_t)((uint32_t)a->act_time * 1024) / a->time;

int32_t step = _lv_bezier3(t, 0, 1000, 1300, 1024);

int32_t new_value;
new_value = (int32_t)step * (a->end - a->start);
new_value = new_value >> 10;
new_value += a->start;

return (lv_anim_value_t)new_value;

}

<a name="bnPYB"></a>
#### reset_style

- 移除默认主题中的风格

lv_obj_reset_style_list(btn, LV_BTN_PART_MAIN);

<a name="XcRfi"></a>
#### lv_state_t

- UI当前所处的状态，聚焦、按下等

enum { LV_STATE_DEFAULT = 0x00, LV_STATE_CHECKED = 0x01, LV_STATE_FOCUSED = 0x02, LV_STATE_EDITED = 0x04, LV_STATE_HOVERED = 0x08, LV_STATE_PRESSED = 0x10, LV_STATE_DISABLED = 0x20, };

typedef uint8_t lv_state_t; ```