lvgl一天上头

#lvgl学习

---

`提示： 此文章资源来源于百问网，ths韦东山的开源
http://lvgl.100ask.net/8.2/index.html

---

前言

随着嵌入式设备的更新迭代的的发展，不管是单片机设备还是linux设备，很多设备都要求上了界面的要求，特别是一些数控跟智能农业的终端控制，而界面的选择挺多，emwin，qt等，但是这两者都本着主体“不开源“，对于一些商业或者学者不友好，所以现在选择一款快速上手，界面优良，lvgl无疑是一款好的框架选择

---

lv_event_send

一、安装环境跟下载代码

环境可以用visual 或者codeblock或者vscode，只要工程ok就行，这里用百问网建好的codeblock，

https://gitee.com/weidongshan/lvgl_100ask_course_materials
代码也在这里面了

二、使用步骤

1是百问网的demo，2是官方的，3是工程，用codeblock打开就行，
4是驱动，这里我们不需要理，5源文件

三、打开工程

这里只要进行注释就可以运行了，但是运行很多没有中文注释，这里对api进行整理

四、各个组件对象

1.基础对象

创建窗口
	lv_obj_t * lv_obj_create（参数一般是lv_scr_act（））//创建窗口对象，一般在初始化用  lv_scr_act--活动窗口

2.字符对象

 基于对象创建字符对象
	lv_obj_t * lv_label_create(对象);
 设置字符对象显示的字符串
	void       lv_label_set_text(字符对象,字符串);
 类似于sprintf输入进字符对象中显示
	void       lv_label_set_text_fmt(字符对象, "%s: %d", "Value", 15); 
获取label的字符
	char * lv_label_get_text(const lv_obj_t * obj)

3.开关对象

 基于lv_scr_act创建开关对象
	lv_obj_t * lv_switch_create(lv_scr_act()); 

4.按键对象

 基于lv_scr_act创建按键对象
	lv_obj_t * lv_btn_create(lv_scr_act()); 

5.switch 对象

  创建一个 switch 部件(对象),他的父对象是活动屏幕对象
	lv_obj_t * lv_checkbox_create(lv_scr_act());  
  修改switch 的提示文字(覆盖)
	void       lv_checkbox_set_text(cb, "100ASK LVGL Tutorial" LV_SYMBOL_PLAY);  
  修改复选框勾选框的大小
	void       lv_obj_set_style_pad_all(cb, 20, LV_PART_INDICATOR); 
  设置复选框的勾选框和提示文字的距离  
	void       lv_obj_set_style_pad_column(cb, 100, 0);                   

6.下拉对象

  创建一个下拉对象,他的父对象是活动屏幕对象
	lv_obj_t * lv_dropdown_create(lv_scr_act());   
  写法1：添加选项，索引从0开始
	void       lv_dropdown_set_options(dd, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10");  
 获取选项的内容
	void       lv_dropdown_get_selected_str(obj, tmp_buf, sizeof(tmp_buf)); 
  获取选项的索引值，从0开始
	int_16	   lv_dropdown_get_selected(obj));  
 获取下拉的列表  
	lv_obj_t * lv_dropdown_get_list(obj);
 打开列表
	void       lv_dropdown_open(dd);
 关闭列表
	void       lv_dropdown_close(dd);

7.滚轮对象

 创建一个 lv_roller 部件(对象),他的父对象是活动屏幕对象
	lv_obj_t * lv_roller_create(lv_scr_act());   
 写法1：设置选项，索引从0开始
	void       lv_roller_set_options(roller, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10", LV_ROLLER_MODE_NORMAL);   
  设置默认选中的选项  num-索引
	void       lv_roller_set_selected(roller, num, LV_ANIM_ON); 
  获取被选中的选项的索引值，从0开始
	int_16     lv_roller_get_selected(roller));     
 获取被选中的选项的内容  
	void       lv_roller_get_selected_str(roller, tmp_buf, sizeof(tmp_buf));
  获取当前选项的索引(位置)
	uint32_t   lv_roller_get_selected(roller);
 获取当前选项的总数
	uint32_t   lv_roller_get_option_cnt(roller) - 1; 
 设置当前选项的索引(位置) 
        void       lv_roller_set_selected(roller, sel_opt, LV_ANIM_ON);
 向 roller 发送 LV_EVENT_VALUE_CHANGED 事件
        void       lv_event_send(roller, LV_EVENT_VALUE_CHANGED, 0); 
 设置当前选框可见数量
	void       lv_roller_set_visible_row_count(roller, 2); 

8.进度条对象

 创建一个 bar 部件(对象),他的父对象是活动屏幕对象
	lv_obj_t * lv_bar_create(lv_scr_act());
 获取进度条值
	uint32_t   lv_bar_get_value(bar));
 设置进度条值
	void       lv_bar_set_value(obj, lv_bar_get_value(obj)+1, LV_ANIM_ON);

9.滑块对象

 创建一个slider 部件(对象),他的父对象是活动屏幕对象
	lv_obj_t * lv_slider_create(lv_scr_act());
 获取滑块当前值
	int_16     lv_slider_get_value(slider));
 设置滑块模式
	void       lv_slider_set_mode(slider, LV_BAR_MODE_SYMMETRICAL);
 设置滑块模范围 
	void       lv_slider_set_range(slider, -100, 100); 
 设置滑块模数值 
	void       lv_slider_set_value(slider, -50, LV_ANIM_ON); 
	

10.定时器对象

创建定时器对象  my_timer1--定时函数  time--定时时间  arc--函数参数
	lv_timer_t * lv_timer_create(my_timer1, time,  arc);
     同上
	lv_timer_t * lv_timer_create_basic();
	lv_timer_set_cb(timer, my_timer3);
	lv_timer_set_period(timer, 100);
运行
    lv_timer_pause(timer3);
 挂起
    lv_timer_resume(timer3);

五、对象设置

1.对象大小

 同时设置基础对象的宽高
	void       lv_obj_set_size(基础对象,宽,高);
 设置基础对象的宽 
	void       lv_obj_set_width(基础对象,宽);
 设置基础对象的高
	void       lv_obj_set_height(基础对象,高);
 获取基础对象的高
	int_16     lv_obj_get_height（基础对象）
 /获取基础对象的宽
	int_16     lv_obj_get_width（基础对象）

2.对象位置

 设置对象的相对于#的位置  #  LV_ALIGN_CENTER那一类的枚举  
	void       lv_obj_align(对象,#,相对于#的x,相对于#的y); 
 将字符对象加入到对象中的相对于#的xy位置 # LV_ALIGN_CENTER那一类的枚举  
	void       lv_obj_align_to(字符对象, 对象,#, 相对于#的x,相对于#的y);
 设置对象的x的绝对位置
	void       lv_obj_set_x(对象,x); 
 设置对象的y的绝对位置
	void       lv_obj_set_y(对象,y);
 设置对象的x,y的绝对位置
 	void       lv_obj_set_pos(对象,x,y);
 设置对象的x,y的方位
 	void       lv_obj_set_align(对象, LV_ALIGN_CENTER);

3.对象状态

 开关默认处于关闭状态，这里设置为打开状态
	void       lv_obj_add_state(sw, LV_STATE_CHECKED);  
 清除禁用状态，按钮可正常使用 
	void       lv_obj_clear_state(sw, LV_STATE_DISABLED);
 查询对象状态
	bool	   lv_obj_has_state(btn, LV_STATE_CHECKED))

4.对象样式

    //初始化样式结构体
 样式结构体
	static lv_style_t style_obj;
 初始化样式结构体
	void       lv_style_init(&style_obj);
 设置样式文字颜色
	void       lv_style_set_text_color(&style_obj, lv_color_hex(0xc43e1c));    
 设置样式背景色
	void       lv_style_set_bg_color(&style_obj, lv_color_hex(0xc43e1c));  
 设置有操作样式透明度
	void       lv_style_set_bg_opa(&style_obj, 30);                          

    // 添加样式到对象
 设置自定义按下时的背景色
	void       lv_obj_set_style_bg_color(基础对象,  lv_color_hex(0xc43e1c), LV_STATE_PRESSED);    
 设置自定义按下时的背景色的颜色浓度 0--min   100--max    
	void       lv_obj_set_style_bg_opa(基础对象, LV_OPA_50, 0);	    
 设置对象运动延时时间
	void       lv_obj_set_style_anim_time(bar, 1, LV_PART_MAIN);
 根据样式设置按下时的背景色
	void       lv_obj_add_style(基础对象, &style_obj, LV_STATE_PRESSED);   
 字符对象字体
	void       lv_obj_set_style_text_font(字符对象, &lv_font_montserrat_28, 0);  
清除设置的所以样式
lv_obj_remove_style_all(slider);        

5.设置回调

 让对象可以响应输入事件  
	void       lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE);  
 obj-触发对象  my_event_cb-回调函数  LV_EVENT_ALL-触发类型   label-函数参数 
	void       lv_obj_add_event_cb(obj, my_event_cb, LV_EVENT_ALL, label); 
 获取触发事件的部件(对象)
	lv_obj_t * lv_event_get_target(e);   
 获取当前部件(对象)触发的事件代码
	lv_event_code_t  lv_event_get_code(e); 
 获取添加事件时传递的用户数据 
	lv_obj_t *  lv_event_get_user_data(e);   

6.对象拖拽移动

lv_obj_set_drag(obj1,true);

6.调用图片

    LV_IMG_DECLARE(img_demo_widgets_avatar);
    lv_obj_t * avatar = lv_img_create(panel1);
    lv_img_set_src(avatar, &img_demo_widgets_avatar);

LV_IMG_DECLARE其实内部就是一个extern
extern什么呢，一张图片解码后会有一个结构体，结构体里面的一个参数就代表这个图片

lv_img_create就是加一个图片对象，
要设置图像的来源lv_img_set_src

七、使用中文跟给回调发送消息

	    lv_obj_set_style_text_font(label, &lv_font_simsun_16_cjk, 0);   // 使用自定义的字库 
	   lv_event_send(roller, LV_EVENT_VALUE_CHANGED, 0);      222222

八、以上是对总体的概括，接下来是对一些刚入门的朋友其具体的使用

1、 lv_100ask_demo_course_2_1_1

    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);基于obj创建一个字符对象
    lv_label_set_text(label, "qq, LVGL!");设置字符对象的字符
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);设置相对于obj的位置

这儿我们看下对于宏LV_PCT他的代码，可以看看以下的代码

#define LV_PCT(x)    (x < 0 ? LV_COORD_SET_SPEC(1000 - (x)) : LV_COORD_SET_SPEC(x))
#define LV_COORD_SET_SPEC(x)    ((x) | _LV_COORD_TYPE_SPEC)
#define _LV_COORD_TYPE_SPEC     (1 << _LV_COORD_TYPE_SHIFT)

#if LV_USE_LARGE_COORD
#define _LV_COORD_TYPE_SHIFT    (29U)
#else
#define _LV_COORD_TYPE_SHIFT    (13U)
#endif

这里只是对他做了一个显示英文，而对于中文，我们得添加字体库，字体库的制作方法后面讲，印象中这是官方自带的lv_font_simsun_16_cjk，我们在 lv_label_set_text(label, “qq, LVGL!”)前加入这行。我们就可以显示中文了

    lv_obj_set_style_text_font(label, &lv_font_simsun_16_cjk, 0);   // 使用自定义的字库 

2、 lv_100ask_demo_course_2_1_1 （很简单不想说）

就是设置大小获取大小

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

3、 lv_100ask_demo_course_2_2_3（很简单不想说）

注意的就是右跟下为正，左跟上为负

    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    //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));

4、 lv_100ask_demo_course_2_2_4（很简单不想说）

，lv_obj_align_to是对于相对坐标的作用

    lv_obj_t * obj1 = lv_obj_create(lv_scr_act());
    lv_obj_align(obj1, LV_ALIGN_CENTER, 100, 100);
    //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

5、 lv_100ask_demo_course_2_2_5

这源码不贴，主要在那几个设置部分大部分都一样

    // 矩形背景部分
    lv_style_init(&style_main);
    
    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);设置gb的透明度
    lv_style_set_bg_color(&style_main, lv_color_hex3(0x000));
    
    //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_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);        // 当旋钮部分被按下的时候，旋钮部分应用该样式

6、lv_100ask_demo_course_2_2_6

这里都是在父对象的基础上创建一个对象，通过lv_obj_add_event_cb添加回调。

    /* 创建基础部件(对象) */
    lv_obj_t * obj = lv_obj_create(lv_scr_act());

    /* 创建label部件(对象) */
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "test");   // 设置label展示的文字
    lv_obj_center(label);  // 将对象与其父对象的中心对齐，这里的父对象是屏幕：lv_scr_act()

    // 为obj1添加事件回调函数，所有的事件类型都能触发该回调函数
    lv_obj_add_event_cb(obj, my_event_cb, LV_EVENT_ALL, label);

而回调中是这样处理的，通过lv_event_get_target获取回调的对象，lv_event_get_code是获取事件产生的时间id，lv_event_get_user_data是回调的最后一个参数。

static void my_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);        // 获取触发事件的部件(对象)
    lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    lv_obj_t * label = lv_event_get_user_data(e);   // 获取添加事件时传递的用户数据

    switch(code){
        case LV_EVENT_PRESSED:
            lv_label_set_text(label, "LV_EVENT_PRESSED");
            lv_obj_set_style_bg_color(obj, lv_color_hex(0xc43e1c), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_PRESSED\n");
            break;
        case LV_EVENT_LONG_PRESSED:
            lv_label_set_text(label, "LV_EVENT_LONG_PRESSED");
            lv_obj_set_style_bg_color(obj, lv_color_hex(0x4cbe37), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_LONG_PRESSED\n");
            break;
        default:
            //printf("NONE\n");
            break;
    }
}

7、lv_100ask_demo_course_3_1_1

这里的话我们得跟上面的做一个对比，为啥都是对象，但是我却要用lv_obj_add_flag去把他添加到回调行列中，因为这里的是一个text对象，而为啥text需要？小编就不懂了。但是加上去也无妨。
所以我觉得
但凡需要回调处理。加上去就行

 lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE);
 lv_obj_add_event_cb(label, label_event_cb, LV_EVENT_ALL, 0);

 **********************/
static void label_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);        // 获取触发事件的部件(对象)
    lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码

    switch(code){
        case LV_EVENT_PRESSED:
            //lv_label_set_text(label, "LV_EVENT_PRESSED");
            //lv_obj_set_style_bg_color(obj, lv_color_hex(0xc43e1c), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_PRESSED\n");
            break;
        case LV_EVENT_LONG_PRESSED:
            //lv_label_set_text(label, "LV_EVENT_LONG_PRESSED");
            //lv_obj_set_style_bg_color(obj, lv_color_hex(0x4cbe37), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_LONG_PRESSED\n");
            break;
        default:
            //printf("NONE\n");
            break;
    }
}

void lv_100ask_demo_course_3_1_1(void)
{
    char * text = "www.100ask.net";   // 要显示的文字

    /* 创建一个基础对象 label */
    lv_obj_t * label = lv_label_create(lv_scr_act());   // 创建一个label部件(对象),他的父对象是活动屏幕对象


    /* 展示文字 */
    /* 设置要显示的文本，函数中会另外开辟和给定的字符串大小的空间存放字符串（常用） */
    //lv_label_set_text(label, text);
    //lv_label_set_text(label, "www.100ask.net"); // 也可以这样使用

    /* 设置要显示的文字，也会另外开辟空间存放字符串，但是可以像 printf 格式化字符串 */
    //lv_label_set_text_fmt(label, "%s: %d", "Value", 15);

    /* 设置要显示的文字，直接使用给定的缓冲区(不常用) */
    //lv_label_set_text_static(label, text);
    //lv_label_set_text_static(label, "www.100ask.net"); // 也可以这样使用


    /* 设置文字字号(内置ASCII字库) */
    /* 使用其他字号的字体，如果不设置默认使用 lv_font_montserrat_14 ，在 lv_conf.h 中 LV_FONT_DEFAULT 定义 */
    //lv_obj_set_style_text_font(label, &lv_font_montserrat_28, 0);  // 为了方便，这里使用本地(私有)样式


    /* 让 label 可以响应输入事件 */
     lv_obj_add_flag(label, LV_OBJ_FLAG_CLICKABLE);
     lv_obj_add_event_cb(label, label_event_cb, LV_EVENT_ALL, 0);
}

8、lv_100ask_demo_course_3_2_1

这里是对按键的回调处理很明显，跟上次一模一样，没啥可说的

9、lv_100ask_demo_course_3_3_1

这里是对组的编码，但是并没有实际上的变化，但是你可以跳过去看看跟他一个文件的api，里面会有对组的操作，实际上小编猜猜就把一堆对象加到组里面，然后成为对组的操作

10、lv_100ask_demo_course_3_3_1

代码不贴了。这是对开关的操作。主要心得api是
lv_obj_has_state(sw, LV_STATE_CHECKED) 这样就能获取开关的状态

11、lv_100ask_demo_course_3_5_1

代码不贴了。这是对开关的操作。主要心得api是
lv_obj_has_state(cb, LV_STATE_CHECKED)这样就能获取对象的点击状态

12、lv_100ask_demo_course_3_6_1

这是对下拉框的操作。 有意思的是玩过其他显示器的都知道，特别是12864吧，难但是在这里
lv_dropdown_create用这个创建一个下拉对象，然后添加下拉框lv_dropdown_set_options，这里可以不应纠结参数的大小，然后可以动态添加，相当于类似串口助手那种。，然后在回调函数中添加
lv_dropdown_get_selected获取其选取的索引，lv_dropdown_get_selected_str获取其直接在buff的数据，lv_dropdown_get_selected_str如果对数组操作的话用的比较多，毕竟对数据的获取还是通过当前需要的数据

13、lv_100ask_demo_course_3_7_1

这是对滚轮的操作，这部分学习的东西还是有的，比如向callback发送消息，
首先先不说按键那部分，第一部分是滚轮创建lv_roller_create，然后往里面填充数据lv_roller_set_options，
第一个比较重要的api来了，这是是设置他的一个索引，就是设置现在展现出来的，按理来说有通过设置字符设置他的现在的状态，

    lv_roller_set_selected(roller, 3, LV_ANIM_ON);

然后获取设置的数据就没啥了，就是跟上面那个很像，获取索引跟数据啥的

        LV_LOG_USER("%d", lv_roller_get_selected(roller));    
        lv_roller_get_selected_str(roller, tmp_buf, sizeof(tmp_buf));   

然后我们看回按键的回调函数，
这两个获取当前索引跟总数，就很普通

        uint32_t sel_opt = lv_roller_get_selected(roller);          // 获取当前选项的索引(位置)
        uint32_t total_opt = lv_roller_get_option_cnt(roller) - 1;  // 获取当前选项的总数，因为索引从 0 开始算，所以减一用于判断最后的选项

关键第二个，他能向回调发送改变的标志

        lv_roller_set_selected(roller, sel_opt, LV_ANIM_ON);11111
        lv_event_send(roller, LV_EVENT_VALUE_CHANGED, 0);      222222

13、lv_100ask_demo_course_3_7_1

这是对滚轮的操作，这部分学习的东西还是有的，比如向callback发送消息，
首先先不说按键那部分，第一部分是滚轮创建lv_roller_create，然后往里面填充数据lv_roller_set_options，
第一个比较重要的api来了，这是是设置他的一个索引，就是设置现在展现出来的，按理来说有通过设置字符设置他的现在的状态，

    lv_roller_set_selected(roller, 3, LV_ANIM_ON);

然后获取设置的数据就没啥了，就是跟上面那个很像，获取索引跟数据啥的

        LV_LOG_USER("%d", lv_roller_get_selected(roller));    
        lv_roller_get_selected_str(roller, tmp_buf, sizeof(tmp_buf));   

然后我们看回按键的回调函数，
这两个获取当前索引跟总数，就很普通

        uint32_t sel_opt = lv_roller_get_selected(roller);          // 获取当前选项的索引(位置)
        uint32_t total_opt = lv_roller_get_option_cnt(roller) - 1;  // 获取当前选项的总数，因为索引从 0 开始算，所以减一用于判断最后的选项

关键第二个，他能向回调发送改变的标志

        lv_roller_set_selected(roller, sel_opt, LV_ANIM_ON);11111
        lv_event_send(roller, LV_EVENT_VALUE_CHANGED, 0);      222222

14、lv_100ask_demo_course_3_8_1

学习到这里的话，这几个就跟普通了，lv_bar_create创建，lv_obj_set_style_anim_time设置活动的延时时间，这里有个 lv_label_set_text_fmt(label, “%d%%”, lv_bar_get_value(bar));，我们得注意。c语言中显示%是需要两个%的，然后回调函数中去处理和显示，

    switch(code){
        case LV_EVENT_CLICKED:
            LV_LOG_USER("LV_EVENT_CLICKED\n");
			if (lv_bar_get_value(obj) == lv_bar_get_max_value(obj))
				lv_bar_set_value(obj, 0, LV_ANIM_ON);
			//else
			//	lv_bar_set_value(obj, 30, LV_ANIM_ON);
			lv_label_set_text_fmt(label, "%d%%", lv_bar_get_value(obj));
            break;
		case LV_EVENT_PRESSING:
            LV_LOG_USER("LV_EVENT_PRESSING\n");
			lv_bar_set_value(obj, lv_bar_get_value(obj)+1, LV_ANIM_ON);
			lv_label_set_text_fmt(label, "%d%%", lv_bar_get_value(obj));
            break;

回调中通过返回的事件去获取跟设置lv_bar_get_value lv_bar_set_value，不难理解

15、 void lv_100ask_demo_course_3_9_1 (未完待续)

这里是滑块的用法，虽然写着进度条，lv_slider_create创建进度条，lv_slider_get_value获取当前进度条的百分比，
他的三种格式
1.默认这个默认最左边是默认最小值

	lv_slider_set_mode(slider, LV_BAR_MODE_NORMAL);
	lv_slider_set_range(slider, 0, 100);				// 如果不设置，默认是(0-100)

2.这个可以设置最小值，但是起始值是从0开始的

	// 2.symmetrical模式，这个模式下可以指定负的最小范围。但是只能从零值到当前值绘制指示器。
	lv_slider_set_mode(slider, LV_BAR_MODE_SYMMETRICAL);
	lv_slider_set_range(slider, -100, 100);			// 这个模式下可以指定负的最小范围
	//lv_slider_set_value(slider, 50, LV_ANIM_ON);		// 设置结束值(大于0)
	lv_slider_set_value(slider, -0, LV_ANIM_ON);	// 设置结束值(小于0)

3. 这个可以设置最小值，但是起始值也可以设置

	// 3.range模式，这个模式下也可以指定负的最小范围。这样进度条的起始值可以不是0，而是你指定的数值，这样设置的起始值必须小于结束值。
	lv_slider_set_mode(slider, LV_BAR_MODE_RANGE);
	lv_slider_set_range(slider, -100, 100);				// 这个模式下可以指定负的最小范围
	lv_slider_set_value(slider, 50, LV_ANIM_ON);			// 设置结束值
	lv_slider_set_left_value(slider, -90, LV_ANIM_ON);	// 设置起始值，注意必须小于结束值

这里是对他的滑块滑动设置，说明禁止对滑块点左右两边的位置点击而改变数据

lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST);

这里将其运动方向反过来

	lv_obj_set_style_base_dir(slider, LV_BASE_DIR_RTL, LV_PART_MAIN);

中文字体，

提示：这里对中文输入做一个教学，首先这里的先做一个简介，中文基于类似于位图的编码文件，其中包含了字体的大小跟数量，也就是说文件里面的中文大小写死了，但是肯定有其它算法进行转换的，小编没去深究， 首先我们到下载一种字体http://lvgl.100ask.net/8.2/index.html`

选择一种下载，或者全部选择下载都行，日后备用然后去
lvgl官方字体转换器地址：
我们在选择字体那里选择我们的下载的字体，然后在名字填入my_font_20_heiti，代表20号黑体，，，，，，自定义，
2-bitxxxxx是字体的质量，下面的你可以自己翻一下，大概就是压缩啥的

在这里插入图片描述

然后这里我们可以看到他的中文以及一些片假名跟符合的范围，我们就可以按照我们项目的需求加

我们可以根据上面的图片看到我们字体范围，我这里基本汉字都加上去了，然后符号范围，下面可以输入一些我们要用但却不想内存那么大，，，，，然后点击convert，就会导出一个。c使用方法跟demo解析第一个一样就行，去试试

九、样式

void lv_style_set_radius(&style,5);                 //设置样式的圆角

 /*Make a gradient*/
void lv_style_set_width(&style, 150);                        //设置样式对象的宽
void lv_style_set_height(&style, LV_SIZE_CONTENT);           //设置样式对象的宽


void lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE));     //设置样式对象的过渡颜色
void lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);                  //设置样式对象的过渡颜色方向
    /*Shift the gradient to the bottom*/
void lv_style_set_bg_main_stop(&style, 128);
void lv_style_set_bg_grad_stop(&style, 192);

void lv_style_set_border_color(lv_style_t * style, lv_color_t value);			//设置样式边框颜色
void lv_style_set_border_color_filtered(lv_style_t * style, lv_color_t value);	//设置样式边框过滤颜色
void lv_style_set_border_opa(lv_style_t * style, lv_opa_t value);			    //设置样式边框透明度
void lv_style_set_border_width(lv_style_t * style, lv_coord_t value);			//设置样式边框宽度
void lv_style_set_border_side(lv_style_t * style, lv_border_side_t value);		//设置样式边框显示范围
void lv_style_set_border_post(lv_style_t * style, bool value);					//设置样式边框柱
 
void lv_style_set_outline_width(&style, 2);	   			//设置样式外边框线宽度
void lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));		//设置样式外边框线颜色
void lv_style_set_outline_pad(&style, 10);	   	      	 //设置样式外边框线距离

 
/* shadow*/
void lv_style_set_shadow_width(&style, 10);             //设置样式外影子辐射大小
void lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
//设置样式外影子辐射颜色
void lv_style_set_shadow_ofs_x(&style, 10);              //设置样式外影子辐射偏移
void lv_style_set_shadow_ofs_y(&style, 20);              //设置样式外影子辐射偏移     


void lv_style_set_img_recolor(&style, lv_palette_main(LV_PALETTE_BLUE));             //设置图片颜色     
void lv_style_set_img_recolor_opa(&style, LV_OPA_50);                           //设置图片透明都 
void lv_style_set_transform_angle(&style, 300);                                //设置图片旋转


void lv_style_set_pad_top(lv_style_t * style, lv_coord_t value);		//设置样式顶部内边距
void lv_style_set_pad_bottom(lv_style_t * style, lv_coord_t value);		//设置样式底部内边距
void lv_style_set_pad_left(lv_style_t * style, lv_coord_t value);		//设置样式左边内边距
void lv_style_set_pad_right(lv_style_t * style, lv_coord_t value);		//设置样式右边内边距
void lv_style_set_pad_row(lv_style_t * style, lv_coord_t value);		//设置样式内部对象之间的行间距由布局使用
void lv_style_set_pad_column(lv_style_t * style, lv_coord_t value);		//设置样式内部对象之间的列间距由布局使用

void lv_style_set_pad_all(lv_style_t * style, lv_coord_t value);	//四边内边距
void lv_style_set_pad_hor(lv_style_t * style, lv_coord_t value);	//水平内边距 左右相同
void lv_style_set_pad_ver(lv_style_t * style, lv_coord_t value);	//竖直内边距 上下相同
void lv_style_set_pad_gap(lv_style_t * style, lv_coord_t value);	//差距内边距 行列相同 由布局使用

void lv_style_set_text_letter_space(&style, 3);    //文字间隙

void lv_style_set_text_line_space(&style, 20);   //文字行间隙