【LVGL】设置对象样式 - 渐变背景色

        LVGL提供设置对象渐变背景色的功能，渐变色是由color1渐变为color2，而color1是对象的background color，而color2则是通过lv_style_set_bg_grad_color设置的颜色。

        如下代码，是由红色渐变至蓝色。

    static lv_style_t style;

    lv_style_init( &style );
    lv_style_set_radius( &style, 20 );
    lv_style_set_bg_opa( &style, LV_OPA_COVER );
    lv_style_set_bg_color( &style, lv_color_hex(0xff0000) );
    lv_style_set_bg_grad_color( &style, lv_color_hex( 0x0000ff ) );
    lv_style_set_bg_grad_dir( &style, LV_GRAD_DIR_HOR );

    lv_obj_t* btn = lv_btn_create( lv_scr_act() );
    lv_obj_set_size( btn, 320, 120 );
    lv_obj_center( btn );
    lv_obj_add_style( btn, &style, LV_PART_MAIN );

    return;

运行效果：

        在渐变设置接口中还提供了 lv_style_set_bg_main_stop 和  lv_style_set_bg_grad_stop，这两个接口用来设置渐变过程中的起点和终点。

        接口第二个参数lv_coord_t value：0 表示起点，255 表示终点，128 表示中心，均为渐变方向上。依此类推。

1. 设置背景色终点（即渐变的起点）为255

lv_style_set_bg_main_stop( &style, 255 );

运行结果：

2. 设置渐变的终点为0

lv_style_set_bg_grad_stop( &style, 0 );

运行结果：

3. 设置渐变的起点和终点为128

lv_style_set_bg_main_stop( &style, 128 );
lv_style_set_bg_grad_stop( &style, 128 );

运行结果：

 4. 设置不同的起点和终点

lv_style_set_bg_main_stop( &style, 80 );
lv_style_set_bg_grad_stop( &style, 175 );

运行结果：

渐变只发生在中间一段颜色上。 

所以，默认情况时，可以理解为渐变起点是0，渐变终点是255。

    static lv_style_t style;

    lv_style_init( &style );
    lv_style_set_radius( &style, 20 );
    lv_style_set_bg_opa( &style, LV_OPA_COVER );
    lv_style_set_bg_color( &style, lv_color_hex( 0x04dae2 ) );
    lv_style_set_bg_grad_color( &style, lv_color_hex( 0xfb04ff ) );
    lv_style_set_bg_grad_dir( &style, LV_GRAD_DIR_HOR );
    lv_style_set_bg_main_stop( &style, 0 );
    lv_style_set_bg_grad_stop( &style, 255 );

    lv_obj_t* btn = lv_btn_create( lv_scr_act() );
    lv_obj_set_size( btn, 320, 120 );
    lv_obj_center( btn );
    lv_obj_add_style( btn, &style, LV_PART_MAIN );

    return;

运行结果：