网页制作教程和素材seo标题优化步骤

1、键盘(lv_keyboard)

键盘部件可用于输入文本内容，其本质上就是一个特殊的按钮矩阵。

//创建一个键盘对象
lv_obj_t * lv_keyboard_create(lv_obj_t * parent);//将键盘绑定到一个文本区域对象。按下键盘上的字符会输入到绑定的文本区域中。
void lv_keyboard_set_textarea(lv_obj_t * kb, lv_obj_t * ta);//设置键盘的模式（例如文本模式或数字模式）
void lv_keyboard_set_mode(lv_obj_t * kb, lv_keyboard_mode_t mode);//启用或禁用按键按下时显示的气泡提示
void lv_keyboard_set_popovers(lv_obj_t * kb, bool en);//为键盘设置新的按键映射。
void lv_keyboard_set_map(lv_obj_t * kb, lv_keyboard_mode_t mode, const char * map[],const lv_btnmatrix_ctrl_t ctrl_map[]);//获取键盘绑定的文本区域对象
lv_obj_t * lv_keyboard_get_textarea(const lv_obj_t * kb);//获取键盘的当前模式
lv_keyboard_mode_t lv_keyboard_get_mode(const lv_obj_t * kb);//检查是否启用了气泡提示模式
bool lv_btnmatrix_get_popovers(const lv_obj_t * obj);//获取键盘的当前按键映射
static inline const char ** lv_keyboard_get_map_array(const lv_obj_t * kb)
{return lv_btnmatrix_get_map(kb);
}//获取用户最后激活的按键索引（例如按下、释放、聚焦等）。在事件回调函数中，这可用于获取按键的文本、检查是否隐藏等。
static inline uint16_t lv_keyboard_get_selected_btn(const lv_obj_t * obj)
{return lv_btnmatrix_get_selected_btn(obj);
}//获取指定按键的文本
static inline const char * lv_keyboard_get_btn_text(const lv_obj_t * obj, uint16_t btn_id)
{return lv_btnmatrix_get_btn_text(obj, btn_id);
}//默认的键盘事件处理函数，用于将字符输入到绑定的文本区域，并切换键盘模式。如果为键盘添加了自定义的 event_cb，可以在自定义事件回调函数中调用此函数来处理按键点击事件。
void lv_keyboard_def_event_cb(lv_event_t * e);

2、选项卡(lv_tabview)

选项卡部件可以实现多页面切换，用户可以在不同的页面中添加内容。

//创建一个标签页视图对象
lv_obj_t * lv_tabview_create(lv_obj_t * parent, lv_dir_t tab_pos, lv_coord_t tab_size);//在标签页视图中添加一个新的标签页
lv_obj_t * lv_tabview_add_tab(lv_obj_t * tv, const char * name);//获取当前激活的标签页的内容容器
lv_obj_t * lv_tabview_get_content(lv_obj_t * tv);//获取标签按钮的容器对象
lv_obj_t * lv_tabview_get_tab_btns(lv_obj_t * tv);//设置当前激活的标签页
void lv_tabview_set_act(lv_obj_t * obj, uint32_t id, lv_anim_enable_t anim_en);//获取当前激活的标签页的索引
uint16_t lv_tabview_get_tab_act(lv_obj_t * tv);

3、平铺视图部件(lv_tileview)

平铺视图部件可以实现不同方向的页面切换，用户可以页面中添加内容。

//创建一个瓦片视图对象
lv_obj_t * lv_tileview_create(lv_obj_t * parent);//在瓦片视图中添加一个新的瓦片
lv_obj_t * lv_tileview_add_tile(lv_obj_t * tv, uint8_t col_id, uint8_t row_id, lv_dir_t dir);//将指定的瓦片设置为当前激活的瓦片
void lv_obj_set_tile(lv_obj_t * tv, lv_obj_t * tile_obj, lv_anim_enable_t anim_en);//通过瓦片的列编号和行编号将指定的瓦片设置为当前激活的瓦片
void lv_obj_set_tile_id(lv_obj_t * tv, uint32_t col_id, uint32_t row_id, lv_anim_enable_t anim_en);//获取当前激活的瓦片对象
lv_obj_t * lv_tileview_get_tile_act(lv_obj_t * obj);

4、窗口(lv_win)

窗口部件可以作为一个容器，展现不同功能的页面。

//创建一个窗口对象。
lv_obj_t * lv_win_create(lv_obj_t * parent, lv_coord_t header_height);//为窗口添加一个标题
lv_obj_t * lv_win_add_title(lv_obj_t * win, const char * txt);//为窗口添加一个按钮
lv_obj_t * lv_win_add_btn(lv_obj_t * win, const void * icon, lv_coord_t btn_w);//获取窗口的头部对象
lv_obj_t * lv_win_get_header(lv_obj_t * win);//获取窗口的内容区域对象
lv_obj_t * lv_win_get_content(lv_obj_t * win);

5、消息框(lv_msgbox)

消息框部件可以实现弹窗提示，常用于消息通知、确定操作等。

//创建一个消息框
lv_obj_t * lv_msgbox_create(lv_obj_t * parent, const char * title, const char * txt, const char * btn_txts[],bool add_close_btn);//获取消息框的标题对象
lv_obj_t * lv_msgbox_get_title(lv_obj_t * obj);//获取消息框的关闭按钮对象
lv_obj_t * lv_msgbox_get_close_btn(lv_obj_t * obj);//获取消息框的正文内容对象
lv_obj_t * lv_msgbox_get_text(lv_obj_t * obj);//获取消息框的内容容器对象，可以在这个容器中添加其他控件
lv_obj_t * lv_msgbox_get_content(lv_obj_t * obj);//获取消息框的按钮容器对象
lv_obj_t * lv_msgbox_get_btns(lv_obj_t * obj);//获取当前激活的按钮索引
uint16_t lv_msgbox_get_active_btn(lv_obj_t * mbox);//获取当前激活的按钮的文本
const char * lv_msgbox_get_active_btn_text(lv_obj_t * mbox);//立即关闭消息框
void lv_msgbox_close(lv_obj_t * mbox);//异步关闭消息框，通常用于动画关闭
void lv_msgbox_close_async(lv_obj_t * mbox);

6、微调器(lv_spinbox)

微调器部件本质上就是一个数字文本，常用于精确调节某个参数的值。

//创建一个数值选择框对象
lv_obj_t * lv_spinbox_create(lv_obj_t * parent);//设置数值选择框的当前值
void lv_spinbox_set_value(lv_obj_t * obj, int32_t i);//启用或禁用数值选择框的滚动功能。当启用滚动功能时，值达到最大值后会回到最小值，反之亦然。
void lv_spinbox_set_rollover(lv_obj_t * obj, bool b);//设置数值选择框的数字格式，包括数字的位数和小数点的位置。
void lv_spinbox_set_digit_format(lv_obj_t * obj, uint8_t digit_count, uint8_t separator_position);//设置数值选择框的步长。步长决定了每次递增或递减的值。
void lv_spinbox_set_step(lv_obj_t * obj, uint32_t step);//设置数值选择框的值范围
void lv_spinbox_set_range(lv_obj_t * obj, int32_t range_min, int32_t range_max);//设置光标位置，用于编辑特定的数字位
void lv_spinbox_set_pos(lv_obj_t * obj, uint8_t pos);//设置在编辑模式下，通过编码器按钮调整数字时的方向
void lv_spinbox_set_digit_step_direction(lv_obj_t * obj, lv_dir_t direction);//获取数值选择框的滚动功能是否启用。
bool lv_spinbox_get_rollover(lv_obj_t * obj);//获取数值选择框的当前值。用户需要根据数字格式将其转换为浮点数。
int32_t lv_spinbox_get_value(lv_obj_t * obj);//获取数值选择框的步长值。用户需要根据数字格式将其转换为浮点数。
int32_t lv_spinbox_get_step(lv_obj_t * obj);//通过将步长除以 10，选择下一个较低的数字位进行编辑。
void lv_spinbox_step_next(lv_obj_t * obj);//通过将步长乘以 10，选择下一个较高的数字位进行编辑。
void lv_spinbox_step_prev(lv_obj_t * obj);//将数值选择框的值增加一个步长
void lv_spinbox_increment(lv_obj_t * obj);//将数值选择框的值减少一个步长
void lv_spinbox_decrement(lv_obj_t * obj);

7、页面跳转

#include "lvgl.h"lv_obj_t *sr1; // 页面1对象
lv_obj_t *sr2; // 页面2对象static void event_cb_menu1(lv_event_t *e);
static void event_cb_menu2(lv_event_t *e);// 跳转函数：第二层跳转到第一层
static void event_cb_menu1(lv_event_t *e) {// 创建页面1sr1 = lv_obj_create(NULL); // 屏幕作为父对象lv_obj_set_size(sr1, 800, 480); // 设置页面大小// 创建按钮lv_obj_t *btn = lv_btn_create(sr1);lv_obj_set_size(btn, 100, 80); // 设置按钮大小lv_obj_set_pos(btn, 300, 200); // 设置按钮位置// 在按钮上显示标签lv_obj_t *label1 = lv_label_create(btn);lv_label_set_text(label1, "JUMP");lv_obj_set_align(label1, LV_ALIGN_CENTER); // 标签居中// 设置按钮点击事件lv_obj_add_event_cb(btn, event_cb_menu2, LV_EVENT_PRESSED, NULL);// 加载页面1lv_scr_load(sr1);// 删除页面2（如果存在）if (sr2) {lv_obj_del(sr2);sr2 = NULL;}
}// 跳转函数：第一层跳转到第二层
static void event_cb_menu2(lv_event_t *e) {// 创建页面2sr2 = lv_obj_create(NULL); // 屏幕作为父对象lv_obj_set_size(sr2, 800, 480); // 设置页面大小// 创建按钮lv_obj_t *btn = lv_btn_create(sr2);lv_obj_set_size(btn, 100, 80); // 设置按钮大小lv_obj_set_pos(btn, 650, 0); // 设置按钮位置// 在按钮上显示标签lv_obj_t *label1 = lv_label_create(btn);lv_label_set_text(label1, "BACK");lv_obj_set_align(label1, LV_ALIGN_CENTER); // 标签居中// 设置按钮点击事件lv_obj_add_event_cb(btn, event_cb_menu1, LV_EVENT_PRESSED, NULL);// 加载页面2lv_scr_load(sr2);// 删除页面1（如果存在）if (sr1) {lv_obj_del(sr1);sr1 = NULL;}
}// 加载第一层页面
void lvgl_jump(void) {// 创建页面1sr1 = lv_obj_create(lv_scr_act()); // 屏幕作为父对象lv_obj_set_size(sr1, 800, 480); // 设置页面大小// 创建按钮lv_obj_t *btn = lv_btn_create(sr1);lv_obj_set_size(btn, 100, 80); // 设置按钮大小lv_obj_set_pos(btn, 300, 200); // 设置按钮位置// 在按钮上显示标签lv_obj_t *label1 = lv_label_create(btn);lv_label_set_text(label1, "JUMP");lv_obj_set_align(label1, LV_ALIGN_CENTER); // 标签居中// 设置按钮点击事件lv_obj_add_event_cb(btn, event_cb_menu2, LV_EVENT_PRESSED, NULL);
}

觉得有帮助的话，打赏一下呗。。

           

需要商务合作（定制程序）的欢迎私信！！