lvgl：样式 styles

1 styles 样式

  styles 样式是用来决定对象obj外观的一大类属性，大概是最重要最常见的一个属性，内容较多；

  obj可以拥有多个style属性，最新添加的属性优先级最高，子对象部分没有设置的属性(eg:text color)可以从父对象继承；

  obj 总是由一种或多种states和parts组成，不同的states和parts可以设置成不同的styles；

  1.1 states 状态

    obj总是由一种或多种states组成；可以通过states来设置回调函数，也可以通过states来设置obj不同states下的styles属性；

    状态通常在用户操作时自动更改，但是也可以代码更改；

    states的优先级和单片机优先级相反，对于states属性而言，数值越大那么优先级属性越高；obj优先显示最高优先级属性；

/**    lv_obj.h
 * Possible states of a widget.
 * OR-ed values are possible
 */
enum {
    LV_STATE_DEFAULT     =  0x0000,	//Normal, released state
    LV_STATE_CHECKED     =  0x0001,	//Toggled or checked state
    LV_STATE_FOCUSED     =  0x0002,	//Focused via keypad or encoder or clicked via touchpad/mouse
    LV_STATE_FOCUS_KEY   =  0x0004,	//Focused via keypad or encoder but not via touchpad/mouse
    LV_STATE_EDITED      =  0x0008,	//Edit by an encoder
    LV_STATE_HOVERED     =  0x0010,	//Hovered by mouse (not supported now)
    LV_STATE_PRESSED     =  0x0020,	//Being pressed
    LV_STATE_SCROLLED    =  0x0040,	//Being scrolled
    LV_STATE_DISABLED    =  0x0080,	//Disabled state
 
    LV_STATE_USER_1      =  0x1000,
    LV_STATE_USER_2      =  0x2000,
    LV_STATE_USER_3      =  0x4000,
    LV_STATE_USER_4      =  0x8000,
 
    LV_STATE_ANY = 0xFFFF,    /**< Special value can be used in some functions to target all states*/
};
 
typedef uint16_t lv_state_t;

/**    //lv_obj.h
 * Add one or more states to the object. The other state bits will remain unchanged.
 * If specified in the styles, transition animation will be started from the previous state to the current.
 * @param obj       pointer to an object
 * @param state     the states to add. E.g `LV_STATE_PRESSED | LV_STATE_FOCUSED`
 */
void lv_obj_add_state(lv_obj_t *obj, lv_state_t state);
 
/**
 * Remove one or more states to the object. The other state bits will remain unchanged.
 * If specified in the styles, transition animation will be started from the previous state to the current.
 * @param obj       pointer to an object
 * @param state     the states to add. E.g `LV_STATE_PRESSED | LV_STATE_FOCUSED`
 */
void lv_obj_clear_state(lv_obj_t *obj, lv_state_t state);

  1.2 parts 部分

    obj总是由一种或多种parts构成的；可以通过parts来设置obj不同parts下的styles属性；

    比如basic obj使用main part和scrollbar part，silider使用main part、indicator part、knob part组成；

/**    //lv_obj.h
 * The possible parts of widgets.
 * The parts can be considered as the internal building block of the widgets.
 * E.g. slider = background + indicator + knob
 * Not all parts are used by every widget
 */
enum {
    LV_PART_MAIN         = 0x000000,   /**< A background like rectangle*/
    LV_PART_SCROLLBAR    = 0x010000,   /**< The scrollbar(s)*/
    LV_PART_INDICATOR    = 0x020000,   /**< Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox*/
    LV_PART_KNOB         = 0x030000,   /**< Like handle to grab to adjust the value*/
    LV_PART_SELECTED     = 0x040000,   /**< Indicate the currently selected option or section*/
    LV_PART_ITEMS        = 0x050000,   /**< Used if the widget has multiple similar elements (e.g. table cells)*/
    LV_PART_TICKS        = 0x060000,   /**< Ticks on scale e.g. for a chart or meter*/
    LV_PART_CURSOR       = 0x070000,   /**< Mark a specific place e.g. for text area's cursor or on a chart*/
 
    LV_PART_CUSTOM_FIRST = 0x080000,    /**< Extension point for custom widgets*/
 
    LV_PART_ANY          = 0x0F0000,    /**< Special value can be used in some functions to target all parts*/
};
 
typedef uint32_t lv_part_t;

2 lv_style_t 结构体

  styles数据的作用域应该和所属obj的作用域一样长，所以styles变量需要定义成全局属性或动态分配内存；

  2.1 lv_style_t 结构体

/**    lv_style.h    styles结构体
 * Descriptor of a style (a collection of properties and values).
 */
typedef struct {
#if LV_USE_ASSERT_STYLE
    uint32_t sentinel;
#endif
    /*If there is only one property store it directly.
     *For more properties allocate an array*/
    union {
        lv_style_value_t value1;                       //lv_style_value_t 结构体
        uint8_t * values_and_props;
        const lv_style_const_prop_t * const_props;     //lv_style_const_prop_t 结构体
    } v_p;
    uint16_t prop1;
    uint8_t has_group;
    uint8_t prop_cnt;
} lv_style_t;

  2.2 lv_style_value_t 结构体

/**    lv_style.h   
 * A common type to handle all the property types in the same way.
 */
typedef union {
    int32_t num;         /**< Number integer number (opacity, enums, booleans or "normal" numbers)*/
    const void * ptr;    /**< Constant pointers  (font, cone text, etc)*/
    lv_color_t color;    /**< Colors  这个后续举个例子放下面，先放着;*/
} lv_style_value_t;

  2.3 lv_style_const_prop_t 结构体

/**    lv_style.h
 * Descriptor of a constant style property.
 */
typedef struct {
    lv_style_prop_t prop;
    lv_style_value_t value;    //lv_style_t中定义了一个lv_style_value_t,这里又定义了一个lv_style_value_t；
} lv_style_const_prop_t;
 
 
/**  lv_style.h  styles 属性
 * Enumeration of all built in style properties
 * Props are split into groups of 16. When adding a new prop to a group, ensure it does not overflow into the next one.
 */
typedef enum {
    LV_STYLE_PROP_INV               = 0,
 
    /*Group 0*/
    LV_STYLE_WIDTH                  = 1,
    LV_STYLE_MIN_WIDTH              = 2,
    LV_STYLE_MAX_WIDTH              = 3,
    LV_STYLE_HEIGHT                 = 4,
    LV_STYLE_MIN_HEIGHT             = 5,
    LV_STYLE_MAX_HEIGHT             = 6,
    LV_STYLE_X                      = 7,
    LV_STYLE_Y                      = 8,
    LV_STYLE_ALIGN                  = 9,
    LV_STYLE_LAYOUT                 = 10,
    LV_STYLE_RADIUS                 = 11,
 
    /*Group 1*/
    LV_STYLE_PAD_TOP                = 16,
    LV_STYLE_PAD_BOTTOM             = 17,
    LV_STYLE_PAD_LEFT               = 18,
    LV_STYLE_PAD_RIGHT              = 19,
    LV_STYLE_PAD_ROW                = 20,
    LV_STYLE_PAD_COLUMN             = 21,
    LV_STYLE_BASE_DIR               = 22,
    LV_STYLE_CLIP_CORNER            = 23,
 
    /*Group 2*/
    LV_STYLE_BG_COLOR               = 32,
    LV_STYLE_BG_OPA                 = 33,
    LV_STYLE_BG_GRAD_COLOR          = 34,
    LV_STYLE_BG_GRAD_DIR            = 35,
    LV_STYLE_BG_MAIN_STOP           = 36,
    LV_STYLE_BG_GRAD_STOP           = 37,
    LV_STYLE_BG_GRAD                = 38,
    LV_STYLE_BG_DITHER_MODE         = 39,
    LV_STYLE_BG_IMG_SRC             = 40,
    LV_STYLE_BG_IMG_OPA             = 41,
    LV_STYLE_BG_IMG_RECOLOR         = 42,
    LV_STYLE_BG_IMG_RECOLOR_OPA     = 43,
    LV_STYLE_BG_IMG_TILED           = 44,
 
    /*Group 3*/
    LV_STYLE_BORDER_COLOR           = 48,
    LV_STYLE_BORDER_OPA             = 49,
    LV_STYLE_BORDER_WIDTH           = 50,
    LV_STYLE_BORDER_SIDE            = 51,
    LV_STYLE_BORDER_POST            = 52,
    LV_STYLE_OUTLINE_WIDTH          = 53,
    LV_STYLE_OUTLINE_COLOR          = 54,
    LV_STYLE_OUTLINE_OPA            = 55,
    LV_STYLE_OUTLINE_PAD            = 56,
 
    /*Group 4*/
    LV_STYLE_SHADOW_WIDTH           = 64,
    LV_STYLE_SHADOW_OFS_X           = 65,
    LV_STYLE_SHADOW_OFS_Y           = 66,
    LV_STYLE_SHADOW_SPREAD          = 67,
    LV_STYLE_SHADOW_COLOR           = 68,
    LV_STYLE_SHADOW_OPA             = 69,
    LV_STYLE_IMG_OPA                = 70,
    LV_STYLE_IMG_RECOLOR            = 71,
    LV_STYLE_IMG_RECOLOR_OPA        = 72,
    LV_STYLE_LINE_WIDTH             = 73,
    LV_STYLE_LINE_DASH_WIDTH        = 74,
    LV_STYLE_LINE_DASH_GAP          = 75,
    LV_STYLE_LINE_ROUNDED           = 76,
    LV_STYLE_LINE_COLOR             = 77,
    LV_STYLE_LINE_OPA               = 78,
 
    /*Group 5*/
    LV_STYLE_ARC_WIDTH              = 80,
    LV_STYLE_ARC_ROUNDED            = 81,
    LV_STYLE_ARC_COLOR              = 82,
    LV_STYLE_ARC_OPA                = 83,
    LV_STYLE_ARC_IMG_SRC            = 84,
    LV_STYLE_TEXT_COLOR             = 85,
    LV_STYLE_TEXT_OPA               = 86,
    LV_STYLE_TEXT_FONT              = 87,
    LV_STYLE_TEXT_LETTER_SPACE      = 88,
    LV_STYLE_TEXT_LINE_SPACE        = 89,
    LV_STYLE_TEXT_DECOR             = 90,
    LV_STYLE_TEXT_ALIGN             = 91,
 
    /*Group 6*/
    LV_STYLE_OPA                    = 96,
    LV_STYLE_COLOR_FILTER_DSC       = 97,
    LV_STYLE_COLOR_FILTER_OPA       = 98,
    LV_STYLE_ANIM                   = 99,
    LV_STYLE_ANIM_TIME              = 100,
    LV_STYLE_ANIM_SPEED             = 101,
    LV_STYLE_TRANSITION             = 102,
    LV_STYLE_BLEND_MODE             = 103,
    LV_STYLE_TRANSFORM_WIDTH        = 104,
    LV_STYLE_TRANSFORM_HEIGHT       = 105,
    LV_STYLE_TRANSLATE_X            = 106,
    LV_STYLE_TRANSLATE_Y            = 107,
    LV_STYLE_TRANSFORM_ZOOM         = 108,
    LV_STYLE_TRANSFORM_ANGLE        = 109,
    LV_STYLE_TRANSFORM_PIVOT_X      = 110,
    LV_STYLE_TRANSFORM_PIVOT_Y      = 111,
 
    _LV_STYLE_LAST_BUILT_IN_PROP     = 111,
    _LV_STYLE_NUM_BUILT_IN_PROPS     = _LV_STYLE_LAST_BUILT_IN_PROP + 1,
 
    LV_STYLE_PROP_ANY                = 0xFFFF,
    _LV_STYLE_PROP_CONST             = 0xFFFF /* magic value for const styles */
} lv_style_prop_t;

3 lv_style_t 使用

  3.1 styles 初始化

/**       lv_styles.h  styles在使用之前应该先初始化;
 * Initialize a style
 * @param style pointer to a style to initialize
 * @note Do not call `lv_style_init` on styles that already have some properties
 *       because this function won't free the used memory, just sets a default state for the style.
 *       In other words be sure to initialize styles only once!
 */
void lv_style_init(lv_style_t * style);

  3.2 styles 属性设置

//lv_style.h     10来个函数：styles 的pad,size设置，prop属性的设置函数
static inline void lv_style_set_pad_all(lv_style_t * style, lv_coord_t value);
void lv_style_init(lv_style_t * style);
void lv_style_reset(lv_style_t * style);
bool lv_style_remove_prop(lv_style_t * style, lv_style_prop_t prop);
void lv_style_set_prop(lv_style_t * style, lv_style_prop_t prop, lv_style_value_t value);
 
//lv_style_gen.h   80多个函数：styles 的各种属性设置  格式lv_style_set_<property_name>(&style, <value>);
void lv_style_set_width(lv_style_t * style, lv_coord_t value);
void lv_style_set_pad_top(lv_style_t * style, lv_coord_t value);
void lv_style_set_bg_color(lv_style_t * style, lv_color_t value);
void lv_style_set_bg_opa(lv_style_t * style, lv_opa_t value);
void lv_style_set_text_opa(lv_style_t * style, lv_opa_t value);
void lv_style_set_text_font(lv_style_t * style, const lv_font_t * value);
void lv_style_set_anim(lv_style_t * style, const lv_anim_t * value);
void lv_style_set_anim_time(lv_style_t * style, uint32_t value);

  3.3 styles 属性赋值

/**   lv_obj_style.h
 * Add a style to an object.
 * @param obj       pointer to an object
 * @param style     pointer to a style to add
 * @param selector  OR-ed value of parts and state to which the style should be added 
 *                  用来选择将styles加到哪part的哪state上;所以这个selector里是有两个参数或在一块的;
 * @example         lv_obj_add_style(btn, &style_btn, 0); //Default button style
 * @example         lv_obj_add_style(btn, &btn_red, LV_STATE_PRESSED); //Overwrite only some colors to red when pressed
 */
void lv_obj_add_style(struct _lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector);