lvgl7.11怎么做出文字被选中的效果

Question

就我想要使用lvgl 7.11做出这样的效果，选定的字体颜色和其他的不一样，并且我传入的文字不是固定的，字体需要居中，如果字体过多，还要考虑到左右选择的时候会往左边和右边

Answer 1

提示： 本回答参考 AIGC，由本人审核整理提供。若问题解决，望采纳；如仍有疑问，请评论回复。

要在LVGL 7.11中实现文字被选中的效果，包括选定字体颜色与其他字体不同、字体居中显示以及处理文字过多时的左右选择功能，可以按照以下步骤进行：

1. 创建一个标签（Label）用于显示文字

首先，创建一个标签对象来显示你的文字。标签对象是LVGL中用于显示文本的基本控件。

lv_obj_t * label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label, "Your Text Here");
lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);  // 居中对齐

2. 设置选中的文字颜色

为了实现选中的文字颜色与其他文字不同，你可以使用LVGL的文本样式功能。通过创建一个自定义样式并应用到标签上，可以改变选中文本的颜色。

static lv_style_t style_selected;
lv_style_init(&style_selected);
lv_style_set_text_color(&style_selected, LV_STATE_DEFAULT, LV_COLOR_RED);  // 设置选中文本颜色为红色

// 应用样式到标签
lv_obj_add_style(label, LV_LABEL_PART_MAIN, &style_selected);

3. 处理文字过多时的左右选择

如果文字过多，可以通过创建一个滚动条（Scrollbar）来实现左右选择功能。LVGL提供了滚动条控件，可以轻松实现这一功能。

lv_obj_t * scrollbar = lv_scrollbar_create(lv_scr_act(), NULL);
lv_obj_set_size(scrollbar, lv_obj_get_width(label), lv_obj_get_height(label));
lv_obj_align(scrollbar, label, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
lv_obj_set_scrollbar_mode(label, LV_SCROLLBAR_MODE_AUTO);

4. 实现左右选择功能

为了实现左右选择功能，你可以监听滚动条的事件，并在滚动时更新标签的显示位置。

lv_obj_set_event_cb(scrollbar, scroll_event_cb);

void scroll_event_cb(lv_obj_t * obj, lv_event_t event) {
    if(event == LV_EVENT_SCROLL) {
        lv_coord_t x = lv_obj_get_scroll_x(obj);
        lv_obj_set_x(label, -x);  // 更新标签的X坐标以实现滚动效果
    }
}

5. 完整代码示例

以下是一个完整的代码示例，展示了如何在LVGL 7.11中实现上述功能：

#include "lvgl/lvgl.h"

static lv_style_t style_selected;

void scroll_event_cb(lv_obj_t * obj, lv_event_t event) {
    if(event == LV_EVENT_SCROLL) {
        lv_coord_t x = lv_obj_get_scroll_x(obj);
        lv_obj_set_x(label, -x);
    }
}

void setup_label(void) {
    lv_obj_t * label = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label, "Your Text Here");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_style_init(&style_selected);
    lv_style_set_text_color(&style_selected, LV_STATE_DEFAULT, LV_COLOR_RED);
    lv_obj_add_style(label, LV_LABEL_PART_MAIN, &style_selected);

    lv_obj_t * scrollbar = lv_scrollbar_create(lv_scr_act(), NULL);
    lv_obj_set_size(scrollbar, lv_obj_get_width(label), lv_obj_get_height(label));
    lv_obj_align(scrollbar, label, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
    lv_obj_set_scrollbar_mode(label, LV_SCROLLBAR_MODE_AUTO);
    lv_obj_set_event_cb(scrollbar, scroll_event_cb);
}

int main(void) {
    lv_init();
    // 初始化显示和输入设备
    // lv_disp_drv_t disp_drv;
    // lv_indev_drv_t indev_drv;
    // lv_disp_drv_init(&disp_drv);
    // lv_indev_drv_init(&indev_drv);

    setup_label();

    while(1) {
        lv_task_handler();
        lv_tick_inc(5);
    }

    return 0;
}

总结

通过以上步骤，你可以在LVGL 7.11中实现文字被选中的效果，包括选定字体颜色与其他字体不同、字体居中显示以及处理文字过多时的左右选择功能。希望这些步骤对你有所帮助！