Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在前面已经学了三十多个控件了，其中我们也多次谈到对象的样式，以及很多次的分析每个对象的样式，但是肯定还有很多小伙伴没有很搞懂样式，没关系，本节课程就带大家来分析一下！ 本节课没有可以运行的代码，只分析样式的属性。 一 什么是样式 样式用于设置对象的外观。样式是一种具有颜色，填充，不透明度，字体等属性的结构，每个对象类型都有一个称为lv_style_t的通用样式类型。 通过设置lv_style_t变量的，并将其分配给对象(lv_obj_set_style)，就可以改变对象的外观。 通常来说一个对象会有一个主样式，主要用来描述对象和主要部分的外观，但是某些对象由于是由几个部件组成的，所以会具有多个属性，就比如我们前面学习滑动按钮对象那节的时候我们就设置了四个部件的样式，而像一般简单的对象就不会有这么多。 二 如何设置对象样式 不知道大家在前面的控件对象学习的时候还记不记得我们是如何设置控件的样式的，这里来给大家总结一下，其实我们可以使用下面的函数去设置所有控件的样式： void lv_obj_set_style(lv_obj_t *obj, const lv_style_t *style) void lv_arc_set_style(lv_obj_t *arc, lv_arc_style_ttype, const lv_style_t *style) void lv_bar_set_style(lv_obj_t *bar, lv_bar_style_ttype, const lv_style_t *style) void lv_btn_set_style(lv_obj_t *btn, lv_btn_style_ttype, const lv_style_t *style) void lv_btnm_set_style(lv_obj_t *btnm, lv_btnm_style_ttype, const lv_style_t *style) void lv_calendar_set_style(lv_obj_t *calendar, lv_calendar_style_ttype, const lv_style_t *style) void lv_canvas_set_style(lv_obj_t *canvas, lv_canvas_style_ttype, const lv_style_t *style) void lv_cb_set_style(lv_obj_t *cb, lv_cb_style_ttype, const lv_style_t *style) static void lv_chart_set_style(lv_obj_t *chart, lv_chart_style_ttype, const lv_style_t *style) static void lv_cont_set_style(lv_obj_t *cont, lv_cont_style_ttype, const lv_style_t *style) void lv_ddlist_set_style(lv_obj_t *ddlist, lv_ddlist_style_ttype, const lv_style_t *style) static void lv_gauge_set_style(lv_obj_t *gauge, lv_gauge_style_ttype, lv_style_t *style) static void lv_img_set_style(lv_obj_t *img, lv_img_style_ttype, const lv_style_t *style) void lv_imgbtn_set_style(lv_obj_t *imgbtn, lv_imgbtn_style_ttype, const lv_style_t *style) void lv_kb_set_style(lv_obj_t *kb, lv_kb_style_ttype, const lv_style_t *style) static void lv_label_set_style(lv_obj_t *label, lv_label_style_ttype, const lv_style_t *style) static void lv_led_set_style(lv_obj_t *led, lv_led_style_ttype, const lv_style_t *style) static void lv_line_set_style(lv_obj_t *line, lv_line_style_ttype, const lv_style_t *style) void lv_list_set_style(lv_obj_t *list, lv_list_style_ttype, const lv_style_t *style) static void lv_lmeter_set_style(lv_obj_t *lmeter, lv_lmeter_style_ttype, lv_style_t *style) void lv_mbox_set_style(lv_obj_t *mbox, lv_mbox_style_ttype, const lv_style_t *style) void lv_page_set_style(lv_obj_t *page, lv_page_style_ttype, const lv_style_t *style) void lv_preload_set_style(lv_obj_t *preload, lv_preload_style_ttype, const lv_style_t *style) void lv_roller_set_style(lv_obj_t *roller, lv_roller_style_ttype, const lv_style_t *style) void lv_slider_set_style(lv_obj_t *slider, lv_slider_style_ttype, const lv_style_t *style) static void lv_spinbox_set_style(lv_obj_t *spinbox, lv_spinbox_style_ttype, lv_style_t *style) void lv_sw_set_style(lv_obj_t *sw, lv_sw_style_ttype, const lv_style_t *style) void lv_table_set_style(lv_obj_t *table, lv_table_style_ttype, const lv_style_t *style) void lv_tabview_set_style(lv_obj_t *tabview, lv_tabview_style_ttype, const lv_style_t *style) void lv_ta_set_style(lv_obj_t *ta, lv_ta_style_ttype, const lv_style_t *style) void lv_tileview_set_style(lv_obj_t *tileview, lv_tileview_style_ttype, const lv_style_t *style) void lv_win_set_style(lv_obj_t *win, lv_win_style_ttype, const lv_style_t *style) lv_sw_set_style(sw1, LV_SW_STYLE_BG, &bg_style);
lv_sw_set_style(sw1, LV_SW_STYLE_INDIC, &indic_style);
lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_ON, &knob_on_style);
lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_OFF, &knob_off_style);三 样式都有哪些属性 要想知道样式都有哪些属性，我觉得还是通过看代码了解的更快一点，所以给大家贴一下样式结构体，大家也可以自己去源码中看一下： /**
* Objects in LittlevGL can be assigned a style - which holds information about
* how the object should be drawn.
*
* This allows for easy customization without having to modify the object's design
* function.
*/
typedef struct
{
uint8_t glass : 1; /**< 1: Do not inherit this style*/
/** Object background. */
struct
{
lv_color_t main_color; /**< Object's main background color. */
lv_color_t grad_color; /**< Second color. If not equal to `main_color` a gradient will be drawn for the background. */
lv_coord_t radius; /**< Object's corner radius. You can use #LV_RADIUS_CIRCLE if you want to draw a circle. */
lv_opa_t opa; /**< Object's opacity (0-255). */
struct
{
lv_color_t color; /**< Border color */
lv_coord_t width; /**< Border width */
lv_border_part_t part; /**< Which borders to draw */
lv_opa_t opa; /**< Border opacity. */
} border;
struct
{
lv_color_t color;
lv_coord_t width;
lv_shadow_type_t type; /**< Which parts of the shadow to draw */
} shadow;
struct
{
lv_coord_t top;
lv_coord_t bottom;
lv_coord_t left;
lv_coord_t right;
lv_coord_t inner;
} padding;
} body;
/** Style for text drawn by this object. */
struct
{
lv_color_t color; /**< Text color */
lv_color_t sel_color; /**< Text selection background color. */
const lv_font_t * font;
lv_coord_t letter_space; /**< Space between letters */
lv_coord_t line_space; /**< Space between lines (vertical) */
lv_opa_t opa; /**< Text opacity */
} text;
/**< Style of images. */
struct
{
lv_color_t color; /**< Color to recolor the image with */
lv_opa_t intense; /**< Opacity of recoloring (0 means no recoloring) */
lv_opa_t opa; /**< Opacity of whole image */
} image;
/**< Style of lines (not borders). */
struct
{
lv_color_t color;
lv_coord_t width;
lv_opa_t opa;
uint8_t rounded : 1; /**< 1: rounded line endings*/
} line;
#if LV_USE_DEBUG
#if LV_USE_ASSERT_STYLE
uint32_t debug_sentinel; /**
然后是文本属性，我们在汉字显示一节，也有使用，大家也可以回过头去看看：
然后是图片属性：
最后是线条属性：
这就是所有的属性了，当然有些时候这个属性都是灵活运用的，具体对应控件的哪些属性，还需要大家去查看一下控件的源码去分析，或者自己通过修改样式的属性去不断的测试并记录。 四 内部样式 我们在前面的课程学习的时候都是通过复制一个样式，然后来修改部分的属性来达到我们想要的效果，没错我们复制的那个样式就是一些自带的样式，或者叫做预设样式，大概有13种预设样式，大家可以通过下面一个图片来看一下都有哪些不同：
下面把这些样式的名称贴出来，方便大家复制使用： lv_style_t lv_style_scr; lv_style_t lv_style_transp; lv_style_t lv_style_transp_fit; lv_style_t lv_style_transp_tight; lv_style_t lv_style_plain; lv_style_t lv_style_plain_color; lv_style_t lv_style_pretty; lv_style_t lv_style_pretty_color; lv_style_t lv_style_btn_rel; lv_style_t lv_style_btn_pr; lv_style_t lv_style_btn_tgl_rel; lv_style_t lv_style_btn_tgl_pr; lv_style_t lv_style_btn_ina; 是的，就像上面说的，我们都是通过复制一个预设样式然后去修改，这样的做的目的其实主要是为了确保所有的属性都已经被设置，虽然有些属性可能用不到，但是如果没有被赋值可能会出现意想不到的效果，所以建议大家自己创建一个新的样式的时候，也是用我们前面的常用的那种方式去先复制一个已经存在的，像下面一样： static lv_style_t my_red_style; lv_style_copy(&my_red_style, &lv_style_plain); my_red_style.body.main_color = LV_COLOR_RED; my_red_style.body.grad_color = LV_COLOR_RED;
发表评论
最新评论Arduino
基础入门
OpenCV
littleGL
|
