lvgl 控件实现h5中class样式共用

lvgl 在设计之初主要是参考了html中的css，所以其很多设置控件的样式语法都和前端相似。而前端css最重要的就是class类，在lvgl中也可以实现这样的写法，实现多个控件共用一套样式。

如下图两个按钮其实是共用一套样式：

其关键的代码是：

    static lv_style_t btn_style; // 创建按钮样式class
    lv_style_init(&btn_style); // 初始化

    // 设置class 里面的相应属性
    lv_style_set_radius(&btn_style, 6);
    lv_style_set_bg_opa(&btn_style, LV_OPA_100);
    lv_style_set_bg_color(&btn_style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_bg_grad_color(&btn_style, lv_palette_darken(LV_PALETTE_BLUE, 2));
    lv_style_set_bg_grad_dir(&btn_style, LV_GRAD_DIR_VER);
    lv_style_set_border_opa(&btn_style, LV_OPA_40);
    lv_style_set_border_width(&btn_style, 2);
    lv_style_set_border_color(&btn_style, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_text_color(&btn_style, lv_color_white());
    lv_style_set_pad_all(&btn_style, 10);
    lv_style_set_width(&btn_style, 120);
    lv_style_set_height(&btn_style, 40);

    lv_obj_t * btn1 = lv_btn_create(ui_main); // 创建按钮1
    lv_obj_remove_style_all(btn1);       // 删除按钮1自带的所有样式属性                 
    lv_obj_add_style(btn1, &btn_style, 0); // 把按钮class添加给按钮1
    lv_obj_center(btn1);

    lv_obj_t * label2 = lv_label_create(btn1);
    lv_label_set_text(label2, "button1");
    lv_obj_center(label2);

    lv_obj_t * btn2 = lv_btn_create(ui_main); // 创建按钮2
    lv_obj_remove_style_all(btn2);               // 删除按钮2自带的所有样式属性             
    lv_obj_add_style(btn2, &btn_style, 0);// 把按钮class添加给按钮2
    lv_obj_align_to(btn2, btn1, LV_ALIGN_BOTTOM_MID, 0, 80);

    lv_obj_t * label3 = lv_label_create(btn2);
    lv_label_set_text(label3, "button2");
    lv_obj_center(label3);

以上就是创建共用样式的方式，可以根据这种方式来实现样式抽离，以及整个项目的主题色设置，类似前端ui框架中的element ui 实现各式各样的组件。