实现滚动列表时,每块区域的标签自动吸附在顶部

目录

前言

原理

如何实现

效果展现


前言

之前比方说做通讯录,要实现页面往下滚动时,始终要在滚动区域的顶部固定显示该区域属于什么字母开头的标签,然后滚动到下一个字母区域,切换显示下一个字母。我都是用js来判断并实现的,特别麻烦。今天刷抖音时看到实现这一个效果的视频,发现只要css就能实现,遂测试并记录下来

原理

以下摘自菜鸟教程:

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

本人理解:

给需要置顶的div设置:position: sticky;top:0;   那么当列表滚动时,它就会实现置顶效果;而当它的父元素即将滚动出祖先元素的范围时,它会取消置顶效果,跟随父元素向上滚动。

当然它的祖先元素就需要设置overflow、overflow-y:auto、scroll,否则无法实现该效果

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

如何实现

HTML:

<div class="main">
      <dl>
        <dt>这是标签A</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签B</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签C</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签D</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签E</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签F</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
    </div>

css:

.main{
        position: fixed;
        width: 80%;
        height: 70vh;
        top: 50px;
        left: 50%;
        transform: translate(-50%,0);
        overflow-y: scroll;
      }
      dl{
        border: 1px solid #ccc;
      }
      dt{
        position: sticky;
        top: 0;
        color: white;
        background-color: rgb(53, 50, 50);
      }
      dd,dt{
        padding: 0 10px;
        border-bottom: 1px solid #ccc;
      }

效果展现

开始滚动前:

 滚动后:

 

A标签即将离开区域:

 

 

#include "hmi_coffee_main_page.h" #include <src/core/lv_obj.h> #include <src/core/lv_obj_pos.h> #include <src/core/lv_obj_style_gen.h> #include <src/display/lv_display.h> #include <src/misc/lv_area.h> #include <src/misc/lv_palette.h> #include <src/widgets/image/lv_image.h> #include <string.h> #include "hmi_make_coffee_page.h" #include "stdio.h" #include "main/src/image/image.h" #include "main/src/fonts/font.h" HMI_REGISTER_PAGE(hmi_coffee_main_page,COFFE_MAIN_PAGE) // 声明 DECLARE_PAGE(hmi_make_coffee_page); extern hmi_coffee_main_page_t hmi_coffee_main_page; extern const lv_img_dsc_t *hot_coffe_types_big_image[]; extern const char *hot_coffe_types_name[]; extern const lv_img_dsc_t *cold_coffe_types_big_image[]; extern const char *cold_coffe_types_name[]; int hot_drink_count(void); int cold_drink_count(void); static void hot_drink_selected_cb(lv_event_t *e); #define LIST_ITEM_HEIGHT 303 // 定义列表项高度 #define LIST_ITEM_WIDTH 230 // 定义列表项宽度 #define LIST_NUM 14 // 定义列表项数量(与图片数组长度一致) #define LIST_HEIGHT 303 // 定义列表高度 #define LIST_WIDTH 1280 // 定义列表宽度 typedef struct { const lv_img_dsc_t* img; const char* name; } coffee_transfer_info_t; /**************************************************/ // 页面独有的方法 /**************************************************/ // 用于跟踪当前是热饮还是冷饮列表 static bool hot_lable_event = true; // 饮品点击事件处理函数 static void drink_item_click_handler(lv_event_t *e) { coffee_transfer_info_t *data = lv_event_get_user_data(e); // 跳转到制作咖啡页面并传递数据 page_manager_go_to(INSTANCE_PAGE(hmi_make_coffee_page), data); } static lv_obj_t *create_hot_list_item(lv_obj_t *list, const lv_img_dsc_t *img_src, const char *text, int index) { // 创建列表项 lv_obj_t *item = lv_obj_create(list); // 设置列表项的宽度和高度 lv_obj_set_size(item, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT); // 设置列表项的样式 lv_obj_set_style_bg_opa(item, 0, 0);// 设置背景透明 lv_obj_set_style_bg_color(item, lv_color_hex(0xff0000), 0); // 设置背景颜色为红色 lv_obj_set_style_border_width(item, 0, 0); // 设置边框宽度为0 //lv_obj_align(item,LV_ALIGN_TOP_MID, 0, 0); lv_obj_set_scroll_dir(item, LV_DIR_NONE);// 设置列表项的滚动方向为无 lv_obj_remove_style(item, NULL, LV_PART_SCROLLBAR);// 移除列表滚动条样式 if (img_src != NULL) { // 创建图片对象 lv_obj_t *image = lv_image_create(item); // 设置图片源 lv_image_set_src(image, img_src); // 设置图片对齐方式为底部中间 lv_obj_align(image, LV_ALIGN_BOTTOM_MID, 0, -40); // 创建按钮对象 lv_obj_t *button = lv_obj_create(item); // 设置按钮的大小和位置 lv_obj_set_size(button, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT); // 设置按钮背景透明 lv_obj_set_style_bg_opa(button, 0, 0); // 设置按钮边框宽度为0 lv_obj_set_style_border_width(button, 0, 0); // 设置按钮圆角为0 lv_obj_set_style_radius(button, 0, 0); // 设置按钮对齐方式为底部中间 lv_obj_align(button, LV_ALIGN_BOTTOM_MID, 0, -40); // 为按钮添加用户数据 /*coffee_transfer_info_t *data = lv_mem_alloc(sizeof(coffee_transfer_info_t)); data->img = img_src; data->name = text; lv_obj_add_event_cb(button, drink_item_click_handler, LV_EVENT_CLICKED, data);*/ // 创建标签文本 lv_obj_t *name = lv_label_create(item); // 设置标签的字体 lv_obj_set_style_text_font(name, &SourceHan_Sans_SC_regular_26, 0); // 设置标签的颜色 lv_obj_set_style_text_color(name, lv_color_hex(0xffffff), 0); // 设置标签文本 lv_label_set_text(name, text); // 设置标签对齐方式为底部中间 lv_obj_align(name, LV_ALIGN_BOTTOM_MID, 0, 0); } return item; } static void hot_drink_selected_cb(lv_event_t *e) { // 获取用户传递的索引(通过user_data) int *index_ptr = lv_event_get_user_data(e); int index = *index_ptr; /*/ 构造传递给制作页面的参数 coffee_transfer_info_t info = { .coffee_image = hot_coffe_types_big_image[index], // 当前热饮的图片 .coffee_name = hot_coffe_types_name[index] // 当前热饮的名称 }; // 跳转到咖啡制作页面,并传递参数 page_manager_go_to(INSTANCE_PAGE(hmi_make_coffee_page), &info);*/ } static lv_obj_t *create_cold_list_item(lv_obj_t *list, const lv_img_dsc_t *img_src, const char *text) { // 创建列表项 lv_obj_t *item = lv_obj_create(list); // 设置列表项的宽度和高度 lv_obj_set_size(item, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT); // 设置列表项的样式 lv_obj_set_style_bg_opa(item, 0, 0);// 设置背景透明 lv_obj_set_style_bg_color(item, lv_color_hex(0xff0000), 0); // 设置背景颜色为红色 lv_obj_set_style_border_width(item, 0, 0); // 设置边框宽度为0 //lv_obj_align(item,LV_ALIGN_TOP_MID, 0, 0); lv_obj_set_scroll_dir(item, LV_DIR_NONE);// 设置列表项的滚动方向为无 lv_obj_remove_style(item, NULL, LV_PART_SCROLLBAR);// 移除列表滚动条样式 if (img_src != NULL) { // 创建图片对象 lv_obj_t *image = lv_image_create(item); // 设置图片源 lv_image_set_src(image, img_src); // 设置图片对齐方式为底部中间 lv_obj_align(image, LV_ALIGN_BOTTOM_MID, 0, -40); // 创建按钮对象 lv_obj_t *button = lv_obj_create(item); // 设置按钮的大小和位置 lv_obj_set_size(button, LIST_ITEM_WIDTH, LIST_ITEM_HEIGHT); // 设置按钮背景透明 lv_obj_set_style_bg_opa(button, 0, 0); // 设置按钮边框宽度为0 lv_obj_set_style_border_width(button, 0, 0); // 设置按钮圆角为0 lv_obj_set_style_radius(button, 0, 0); // 设置按钮对齐方式为底部中间 lv_obj_align(button, LV_ALIGN_BOTTOM_MID, 0, -40); // 创建标签文本 lv_obj_t *name = lv_label_create(item); // 设置标签的字体 lv_obj_set_style_text_font(name, &SourceHan_Sans_SC_regular_26, 0); // 设置标签的颜色 lv_obj_set_style_text_color(name, lv_color_hex(0xffffff), 0); // 设置标签文本 lv_label_set_text(name, text); // 设置标签对齐方式为底部中间 lv_obj_align(name, LV_ALIGN_BOTTOM_MID, 0, 0); } return item; } static void create_hot_drinks() { // 添加列表项,显示图片 for (int i = 0; i < hot_drink_count(); i++) { if (hot_coffe_types_big_image[i] != NULL) { create_hot_list_item(hmi_coffee_main_page.coffee_main_list, hot_coffe_types_big_image[i], hot_coffe_types_name[i],i); } } } static void create_cold_drinks() { // 添加列表项,显示图片 for (int i = 0; i < cold_drink_count(); i++) { if (cold_coffe_types_big_image[i] != NULL) { create_cold_list_item(hmi_coffee_main_page.coffee_main_list, cold_coffe_types_big_image[i], cold_coffe_types_name[i]); } } } static void hmi_coffee_main_page_hot_or_cold_label_event(lv_event_t *e) { lv_obj_t *obj = lv_event_get_target(e); // 重置文本颜色 lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_hot_text, lv_color_hex(0xFFFFFF), 0); lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_cold_text, lv_color_hex(0xFFFFFF), 0); if (obj == hmi_coffee_main_page.coffee_main_cold_text) { lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_cold_text, lv_color_hex(0xE9BD85), 0); } else if (obj == hmi_coffee_main_page.coffee_main_hot_text) { lv_obj_set_style_text_color(hmi_coffee_main_page.coffee_main_hot_text, lv_color_hex(0xE9BD85), 0); } if (obj == hmi_coffee_main_page.coffee_main_hot_text) { // 删除冷饮项并创建热饮项 if (!hot_lable_event) { // 删除所有子对象 lv_obj_clean(hmi_coffee_main_page.coffee_main_list); create_hot_drinks(); hot_lable_event = true; } } else if (obj == hmi_coffee_main_page.coffee_main_cold_text) { // 删除热饮项并创建冷饮项 if (hot_lable_event) { // 删除所有子对象 lv_obj_clean(hmi_coffee_main_page.coffee_main_list); create_cold_drinks(); hot_lable_event = false; } } } // 滚动结束事件回调函数,实现吸附功能 static void list_scroll_end_event_cb(lv_event_t * e) { lv_obj_t * list = lv_event_get_target(e); lv_coord_t scroll_x = lv_obj_get_scroll_x(list); // 水平滚动,获取 x 轴滚动位置 lv_obj_t * first_item = lv_obj_get_child(list, 0); // 获取第一个列表项 if (!first_item) return; lv_coord_t item_width = lv_obj_get_width(first_item); // 获取列表项宽度 lv_coord_t pad_column = lv_obj_get_style_pad_column(list, 0); // 获取列间距 // 计算吸附位置 int new_scroll_x = ((scroll_x + item_width / 2 + pad_column / 2) / (item_width + pad_column)) * (item_width + pad_column); // 设置新的滚动位置 lv_obj_scroll_to_x(list, new_scroll_x, LV_ANIM_ON); } /**************************************************/ // 下面是通用方法的实现 /**************************************************/ /* 页面初始化 通用*/ static void page_init() { hmi_coffee_main_page_t *page = &hmi_coffee_main_page; // 创建屏幕 page->base.screen = lv_obj_create(NULL); // 移除列表滚动条样式 lv_obj_remove_style(page->base.screen, NULL, LV_PART_SCROLLBAR); // 禁用列表滚动功能 lv_obj_clear_flag(page->base.screen, LV_OBJ_FLAG_SCROLLABLE); // 设置背景图片 page->hmi_coffee_main_page_bg = lv_image_create(page->base.screen); lv_image_set_src(page->hmi_coffee_main_page_bg, &hmi_coffee_main_page_bg); lv_obj_align(page->hmi_coffee_main_page_bg, LV_ALIGN_CENTER, 0,0); // 创建列表 page->coffee_main_list = lv_obj_create(page->base.screen); // 设置列表的宽度和高度 lv_obj_set_size(page->coffee_main_list, LIST_WIDTH, LIST_HEIGHT); // 设置列表背景透明 lv_obj_set_style_bg_opa(page->coffee_main_list, 0, 0); // 设置列表边框宽度为 0 lv_obj_set_style_border_width(page->coffee_main_list, 0, 0); // 设置列表对齐方式 lv_obj_align(page->coffee_main_list, LV_ALIGN_TOP_LEFT, 0, 54); // 移除列表滚动条样式 lv_obj_remove_style(page->coffee_main_list, NULL, LV_PART_SCROLLBAR); // 禁用列表弹性滚动 lv_obj_clear_flag(page->coffee_main_list, LV_OBJ_FLAG_SCROLL_ELASTIC); // 设置列表滚动方向为水平 lv_obj_set_scroll_dir(page->coffee_main_list, LV_DIR_HOR); // 设置列表的布局方式为水平布局 lv_obj_set_flex_flow(page->coffee_main_list, LV_FLEX_FLOW_ROW); // 设置列表的间距 lv_obj_set_style_pad_column(page->coffee_main_list, 20, 0); // 添加滚动结束事件回调 lv_obj_add_event_cb(page->coffee_main_list, list_scroll_end_event_cb, LV_EVENT_SCROLL_END, NULL); page->coffee_main_hot_text = lv_label_create(page->base.screen); lv_label_set_text(page->coffee_main_hot_text, "热饮"); lv_obj_add_flag(page->coffee_main_hot_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->coffee_main_hot_text, lv_color_hex(0xE9BD85), 0); lv_obj_set_style_text_font(page->coffee_main_hot_text, &SourceHan_Sans_SC_regular_26, 0); lv_obj_set_size(page->coffee_main_hot_text, 52, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->coffee_main_hot_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->coffee_main_hot_text, LV_ALIGN_TOP_LEFT, 516, 34); lv_obj_add_event_cb(page->coffee_main_hot_text, hmi_coffee_main_page_hot_or_cold_label_event,LV_EVENT_CLICKED, NULL); create_hot_drinks(); page->coffee_main_cold_text = lv_label_create(page->base.screen); lv_label_set_text(page->coffee_main_cold_text, "冷饮"); lv_obj_add_flag(page->coffee_main_cold_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->coffee_main_cold_text, lv_color_hex(0xffffff), 0); //设置字体颜色 lv_obj_set_style_text_font(page->coffee_main_cold_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体 lv_obj_set_size(page->coffee_main_cold_text, 52, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->coffee_main_cold_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->coffee_main_cold_text, LV_ALIGN_TOP_LEFT, 712, 34); lv_obj_add_event_cb(page->coffee_main_cold_text, hmi_coffee_main_page_hot_or_cold_label_event,LV_EVENT_CLICKED, NULL); //锁屏 page->hmi_coffee_main_page_lock_icon = lv_image_create(page->base.screen); lv_image_set_src(page->hmi_coffee_main_page_lock_icon, &hmi_coffee_main_page_lock); lv_obj_align(page->hmi_coffee_main_page_lock_icon, LV_ALIGN_TOP_LEFT, 78, 417); page->hmi_coffee_main_page_lock_text = lv_label_create(page->base.screen); lv_label_set_text(page->hmi_coffee_main_page_lock_text, "童锁"); lv_obj_add_flag(page->hmi_coffee_main_page_lock_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->hmi_coffee_main_page_lock_text, lv_color_hex(0xffffff), 0); //设置字体颜色 lv_obj_set_style_text_font(page->hmi_coffee_main_page_lock_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体 lv_obj_set_size(page->hmi_coffee_main_page_lock_text, 52, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->hmi_coffee_main_page_lock_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->hmi_coffee_main_page_lock_text, LV_ALIGN_TOP_LEFT, 126, 417); //用户 page->hmi_coffee_main_page_user_icon = lv_image_create(page->base.screen); lv_image_set_src(page->hmi_coffee_main_page_user_icon, &hmi_coffee_main_page_user); lv_obj_align(page->hmi_coffee_main_page_user_icon, LV_ALIGN_TOP_LEFT, 330, 417); page->hmi_coffee_main_page_user_text = lv_label_create(page->base.screen); lv_label_set_text(page->hmi_coffee_main_page_user_text, "用户"); lv_obj_add_flag(page->hmi_coffee_main_page_user_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->hmi_coffee_main_page_user_text, lv_color_hex(0xffffff), 0); //设置字体颜色 lv_obj_set_style_text_font(page->hmi_coffee_main_page_user_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体 lv_obj_set_size(page->hmi_coffee_main_page_user_text, 52, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->hmi_coffee_main_page_user_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->hmi_coffee_main_page_user_text, LV_ALIGN_TOP_LEFT, 385, 417); //设置 page->hmi_coffee_main_page_setting_icon = lv_image_create(page->base.screen); lv_image_set_src(page->hmi_coffee_main_page_setting_icon, &hmi_coffee_main_page_setting); lv_obj_align(page->hmi_coffee_main_page_setting_icon, LV_ALIGN_TOP_LEFT, 588, 417); page->hmi_coffee_main_page_setting_text = lv_label_create(page->base.screen); lv_label_set_text(page->hmi_coffee_main_page_setting_text, "设置"); lv_obj_add_flag(page->hmi_coffee_main_page_setting_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->hmi_coffee_main_page_setting_text, lv_color_hex(0xffffff), 0); //设置字体颜色 lv_obj_set_style_text_font(page->hmi_coffee_main_page_setting_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体 lv_obj_set_size(page->hmi_coffee_main_page_setting_text, 52, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->hmi_coffee_main_page_setting_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->hmi_coffee_main_page_setting_text, LV_ALIGN_TOP_LEFT, 640, 417); //收藏 page->hmi_coffee_main_page_collection_icon = lv_image_create(page->base.screen); lv_image_set_src(page->hmi_coffee_main_page_collection_icon, &hmi_coffee_main_page_collection); lv_obj_align(page->hmi_coffee_main_page_collection_icon, LV_ALIGN_TOP_LEFT, 842, 417); page->hmi_coffee_main_page_collection_text = lv_label_create(page->base.screen); lv_label_set_text(page->hmi_coffee_main_page_collection_text, "收藏"); lv_obj_add_flag(page->hmi_coffee_main_page_collection_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->hmi_coffee_main_page_collection_text, lv_color_hex(0xffffff), 0); //设置字体颜色 lv_obj_set_style_text_font(page->hmi_coffee_main_page_collection_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体 lv_obj_set_size(page->hmi_coffee_main_page_collection_text, 52, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->hmi_coffee_main_page_collection_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->hmi_coffee_main_page_collection_text, LV_ALIGN_TOP_LEFT, 898, 417); //快速冲洗 page->hmi_coffee_main_page_fast_rinse_icon = lv_image_create(page->base.screen); lv_image_set_src(page->hmi_coffee_main_page_fast_rinse_icon, &hmi_coffee_main_page_fast_rinse); lv_obj_align(page->hmi_coffee_main_page_fast_rinse_icon, LV_ALIGN_TOP_LEFT, 1072, 417); page->hmi_coffee_main_page_fast_rinse_text = lv_label_create(page->base.screen); lv_label_set_text(page->hmi_coffee_main_page_fast_rinse_text, "快速冲洗"); lv_obj_add_flag(page->hmi_coffee_main_page_fast_rinse_text, LV_OBJ_FLAG_CLICKABLE); // 确保能点击到,不然点不到文字 lv_obj_set_style_text_color(page->hmi_coffee_main_page_fast_rinse_text, lv_color_hex(0xffffff), 0); //设置字体颜色 lv_obj_set_style_text_font(page->hmi_coffee_main_page_fast_rinse_text, &SourceHan_Sans_SC_regular_26, 0);//设置字体 lv_obj_set_size(page->hmi_coffee_main_page_fast_rinse_text, 104, 33); // 设置标签宽度和高度 lv_obj_set_style_text_align(page->hmi_coffee_main_page_fast_rinse_text, LV_TEXT_ALIGN_CENTER, 0); // 添加文字居中对齐 lv_obj_align(page->hmi_coffee_main_page_fast_rinse_text, LV_ALIGN_TOP_LEFT, 1127, 417); } /* 页面进入 通用*/ static void page_enter(void *args) {} /* 页面退出 通用*/ static void page_exit() {} /* 页面销毁 通用*/ static void page_destroy(void) {} /* 主页面update实现 */ static void page_update(const hmi_global_data_t *data) {}
最新发布
07-04
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值