【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;

运行效果:

【LVGL】设置对象样式 - 渐变背景色_第1张图片

        在渐变设置接口中还提供了 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 );

运行结果:

【LVGL】设置对象样式 - 渐变背景色_第2张图片

2. 设置渐变的终点为0

lv_style_set_bg_grad_stop( &style, 0 );

运行结果:

【LVGL】设置对象样式 - 渐变背景色_第3张图片

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

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

运行结果:

【LVGL】设置对象样式 - 渐变背景色_第4张图片

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

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

运行结果:

【LVGL】设置对象样式 - 渐变背景色_第5张图片

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

所以,默认情况时,可以理解为渐变起点是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;

运行结果:

【LVGL】设置对象样式 - 渐变背景色_第6张图片

你可能感兴趣的:(LVGL,LVGL,样式渐变色)