闭门造轮(LVGL_1)

参考的课程：

全志韦东山的课程：https://www.100ask.net/p/t_pc/course_pc_detail/column/p_61c5a317e4b0cca4a4e8b6f1?product_id=p_61c5a317e4b0cca4a4e8b6f1

例程1_// 基础对象(lv_obj)，"Hello, LVGL!"

void lvgl_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj, LV_PCT(20), LV_PCT(10));
    lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

    lv_obj_t * label = lv_label_create(obj);
    lv_label_set_text(label, "Hello, LVGL!");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}

 LVGL_API解析：

lv_obj_t * obj = lv_obj_create(lv_scr_act());

//创建一个基础对象，基础对象样式默认为矩形，这里的lv_scr_act()是LVGL提供的API，表示获取当前屏幕对象

lv_obj_set_size(obj, LV_PCT(20), LV_PCT(10));

//lv_obj_set_size函数设置对象的大小，使用LV_PCT宏指定百分比大小，这里设置为20% x 10%

lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

//lv_obj_align函数将对象置于屏幕中心，使用LV_ALIGN_CENTER宏指定对齐方式，其中第三个和第四个参数分别表示在水平和垂直方向上的偏移量。

//有宏定义如下：

• LV_ALIGN_DEFAULT: 默认对齐方式，由具体对象确定。
• LV_ALIGN_TOP_LEFT: 左上角对齐。
• LV_ALIGN_TOP_MID: 上中对齐。
• LV_ALIGN_TOP_RIGHT: 右上角对齐。
• LV_ALIGN_BOTTOM_LEFT: 左下角对齐。
• LV_ALIGN_BOTTOM_MID: 下中对齐。
• LV_ALIGN_BOTTOM_RIGHT: 右下角对齐。
• LV_ALIGN_LEFT_MID: 左中对齐。
• LV_ALIGN_RIGHT_MID: 右中对齐。
• LV_ALIGN_CENTER: 中心对齐。

lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label, "Hello, LVGL!");
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

//lv_label_create函数在上一步创建的对象上创建一个标签对象，然后使用lv_label_set_text函数设置标签文本为“Hello, LVGL!”。最后，再次使用lv_obj_align函数将标签对象置于上一步创建的对象中心。

自己造个轮_1：

额？...这几个API还能玩出花来不成？...

例程2_// 基础对象的大小(size)

void lvgl_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_width(obj, 300);
    lv_obj_set_height(obj, 500);
    //lv_obj_set_size(obj,300, 300);

    printf("w:%d\n", lv_obj_get_width(obj));
    printf("h:%d\n", lv_obj_get_height(obj));
}

这段代码创建了一个基本对象，并且将这个对象的长和宽设定为300和500，通过lv_obj_get_width(obj)和lv_obj_get_width(obj)获取到对象的长宽

 但是奇怪的来了，打印的值是0

 可以看到，返回值类型是一个16位整型，用%d没有问题？但为什么呢？

GPT是这样说的:

但是不行，在添加了lv_obj_invalidate(obj)后仍没有能够显示对象的长和宽，问了另一个模型：

 更改代码后，结果确实是打印出来了：

自己造个轮_2

题目：建立一个长500宽300的基本对象，并通过lv_obj_get_width(obj)等方式获取到相关数据，在第一个创建的对象的右边紧贴着建立一个长300宽500的基本对象

void lvgl_demo(void)
{
    lv_obj_t * obj_1 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj_1,500, 300);
    lv_obj_align(obj_1, LV_ALIGN_TOP_LEFT, 0, 0);

    lv_task_handler(); // 处理LVGL任务循环

    lv_obj_t * obj_2 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj_2,lv_obj_get_height(obj_1), lv_obj_get_width(obj_1));
    lv_obj_align(obj_1, LV_ALIGN_TOP_LEFT, 300, 0);

    printf("w:%d\n", lv_obj_get_width(obj_1));
    printf("h:%d\n", lv_obj_get_height(obj_1));
}

例程3_// 基础对象的位置(position) 

void lvgl_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj,500, 300);
    lv_obj_set_x(obj, 200);
    lv_obj_set_y(obj, -50);
    //lv_obj_set_pos(obj, 1300, 600);
    //lv_obj_set_align(obj, LV_ALIGN_CENTER);
    //lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);

    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Hello, LVGL!");
    lv_obj_align_to(label, obj, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);

    //printf("w:%d\n", lv_obj_get_x(obj));
    //printf("h:%d\n", lv_obj_get_y(obj));
}

相关API：这几句都是用于调整对象位置的。

lv_obj_set_x(obj, 200);
lv_obj_set_y(obj, -50);
lv_obj_set_pos(obj, 1300, 600);
lv_obj_set_align(obj, LV_ALIGN_CENTER);
lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);

例程4_// 基础对象的盒子模型(border-box)

void lv_100ask_demo_course_2_2_4(void)
{
    lv_obj_t * obj1 = lv_obj_create(lv_scr_act());
    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
    //lv_obj_set_style_border_width(obj1, 10, 0);
    //lv_obj_set_style_outline_width(obj1, 10, 0);

#if 1
    lv_obj_t * obj2 = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_top = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_bottom = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_left = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_right = lv_obj_create(lv_scr_act());
    //lv_obj_set_style_outline_width(obj_out_left, 10, 0);

    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
    lv_obj_align_to(obj_out_top, obj1, LV_ALIGN_OUT_TOP_MID, 0, 0);
    lv_obj_align_to(obj_out_bottom, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
    lv_obj_align_to(obj_out_left, obj1, LV_ALIGN_OUT_LEFT_MID, 0, 0);
    lv_obj_align_to(obj_out_right, obj1, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
    lv_obj_align_to(obj2, obj_out_right, LV_ALIGN_OUT_TOP_MID, 0, 0);
#endif
}

 陌生API：

lv_obj_set_style_border_width(obj1, 10, 0);

//设置对象的边框宽度为10个像素。

 lv_obj_set_style_outline_width(obj1, 10, 0);

//设置对象的轮廓线宽度为10个像素。

lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
lv_obj_align_to(obj_out_top, obj1, LV_ALIGN_OUT_TOP_MID, 0, 0);
lv_obj_align_to(obj_out_bottom, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
lv_obj_align_to(obj_out_left, obj1, LV_ALIGN_OUT_LEFT_MID, 0, 0);
lv_obj_align_to(obj_out_right, obj1, LV_ALIGN_OUT_RIGHT_MID, 0, 0);

这段代码就是将创建的四个对象分别放置在obj1对象的上下左右，四个地方，且无偏移量，比较简单。

 例程5_// 基础对象的盒子模型(border-box)

 滑杆样式：

static void lv_example_slider_2(void)
{
    /*Create a transition*/
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
    static lv_style_transition_dsc_t transition_dsc;
    lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);

    static lv_style_t style_main;           // 矩形背景部分
    static lv_style_t style_indicator;      // 指针部分
    static lv_style_t style_knob;           // 旋钮部分
    static lv_style_t style_pressed_color;  // 对象某部分被按下时，该部分样式应用的颜色

    // 矩形背景部分
    lv_style_init(&style_main);
    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
    //lv_style_set_outline_width(&style_main, 5);
    //lv_style_set_border_width(&style_main, 2);
    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
    lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/

    // 指针部分
    lv_style_init(&style_indicator);
    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
    lv_style_set_transition(&style_indicator, &transition_dsc);

    // 旋钮部分
    lv_style_init(&style_knob);
    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
    lv_style_set_border_width(&style_knob, 2);
    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
    lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
    lv_style_set_transition(&style_knob, &transition_dsc);

    // 对象某部分被按下时，该部分样式应用的颜色
    lv_style_init(&style_pressed_color);
    lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));

    /*Create a slider and add the style*/
    lv_obj_t * slider = lv_slider_create(lv_scr_act());

    // 体验流程：先体验 lv_obj_add_style 都被注释时的效果；然后一个个去掉注释
    lv_obj_remove_style_all(slider);                                                        // 删除对象的所有样式，然后下面再添加我们自定义的样式
    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);                                    // 矩形背景部分
    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);                          // 指针部分
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);   // 当指针部分被按下的时候，指针部分应用该样式
    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);                                    // 旋钮部分，像按钮一样可以抓取调整值
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);        // 当旋钮部分被按下的时候，旋钮部分应用该样式

    lv_obj_center(slider);
}