当前位置： 首页 > news >正文

LVGL Arc控件和Roller控件详解

news 来源：原创 2025/6/20 18:33:48

LVGL Arc控件和Roller控件详解

  • 一、Arc控件详解
    • LVGL Arc 控件概述
    • 创建 Arc 控件
    • 事件处理
    • 样式定制
  • 二、Roller控件详解
    • 1. 概述
    • 2. 基本属性
    • 3. 创建 Roller 控件
    • 4. 设置选项
    • 5. 获取和设置选中项
    • 6. 自定义样式
    • 7. 事件处理
    • 8. 示例代码
  • 三、效果展示
  • 四、源码分享

一、Arc控件详解

LVGL Arc 控件概述

1. 介绍

  • Arc 控件 是 LVGL 库中的一个基本图形控件，用于显示圆形或弧形。
  • 常用于进度条、仪表盘等场景。

2. 主要属性

  • 角度范围 (start_angle, end_angle)
    • 定义弧的起始和结束角度。
  • 旋转方向 (dir)
    • 指定弧的绘制方向（顺时针或逆时针）。
  • 宽度 (width)
    • 设置弧线的宽度。
  • 背景 (bg_color, bg_opa)
    • 设置背景颜色和透明度。
  • 线条颜色 (color, opa)
    • 设置弧线的颜色和透明度。

创建 Arc 控件

1. 初始化

lv_obj_t * arc = lv_arc_create(lv_scr_act());

2. 设置属性

  • 设置角度范围
    lv_arc_set_range(arc, 0, 360);
  • 设置当前值
    lv_arc_set_value(arc, 90);
  • 设置旋转方向
    lv_arc_set_rotation(arc, LV_ARC_DIR_CW); // 顺时针
lv_arc_set_rotation(arc, LV_ARC_DIR_CCW); // 逆时针
  • 设置宽度
    lv_arc_set_width(arc, 10);
  • 设置颜色
    lv_arc_set_bg_color(arc, lv_color_hex(0x00FF00));
lv_arc_set_color(arc, lv_color_hex(0xFF0000));

事件处理

1. 注册事件回调

lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_ALL, NULL);

2. 事件回调函数示例

static void arc_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);

    if(code == LV_EVENT_VALUE_CHANGED) {
        int value = lv_arc_get_value(obj);
        LV_LOG_USER("Arc value: %d", value);
    }
}

样式定制

1. 创建样式

static lv_style_t style;
lv_style_init(&style);

2. 设置样式属性

  • 背景
    lv_style_set_bg_color(&style, lv_color_hex(0x00FF00));
lv_style_set_bg_opa(&style, LV_OPA_50);
  • 线条
    lv_style_set_line_color(&style, lv_color_hex(0xFF0000));
lv_style_set_line_opa(&style, LV_OPA_80);
lv_style_set_line_width(&style, 10);

3. 应用样式

lv_obj_add_style(arc, &style, 0);

二、Roller控件详解

1. 概述

  • Roller 是 LVGL 中的一种控件，用于显示一个滚动选择列表。
  • 用户可以通过上下滑动来选择列表中的项。

2. 基本属性

  • 选项列表：通过 lv_roller_set_options 函数设置。
  • 当前选中项：通过 lv_roller_get_selected 和 lv_roller_set_selected 函数获取和设置。
  • 动画效果：支持滚动动画，可以通过 lv_roller_set_anim_time 设置动画时间。

3. 创建 Roller 控件

lv_obj_t * roller = lv_roller_create(parent);

4. 设置选项

const char * options = "Option 1\nOption 2\nOption 3";
lv_roller_set_options(roller, options, LV_ROLLER_MODE_INFINITE);
  • 模式：
    • LV_ROLLER_MODE_INFINITE：无限循环模式。
    • LV_ROLLER_MODE_NORMAL：正常模式。

5. 获取和设置选中项

int selected = lv_roller_get_selected(roller);
lv_roller_set_selected(roller, 1, LV_ANIM_ON); // 选择第2个选项，开启动画

6. 自定义样式

  • 可以通过 lv_obj_add_style 添加自定义样式。
  • 样式属性包括文本颜色、背景颜色、边框等。

7. 事件处理

  • 可以为 Roller 控件添加事件回调函数。
lv_obj_add_event_cb(roller, roller_event_cb, LV_EVENT_ALL, NULL);
  • 常用事件类型：
    • LV_EVENT_VALUE_CHANGED：当选中项改变时触发。

8. 示例代码

static void roller_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * roller = lv_event_get_target(e);

    if(code == LV_EVENT_VALUE_CHANGED) {
        const char * txt = lv_roller_get_selected_str(roller);
        LV_LOG_USER("Selected: %s", txt);
    }
}

void create_roller(lv_obj_t * parent) {
    lv_obj_t * roller = lv_roller_create(parent);
    const char * options = "Option 1\nOption 2\nOption 3";
    lv_roller_set_options(roller, options, LV_ROLLER_MODE_NORMAL);
    lv_roller_set_selected(roller, 0, LV_ANIM_ON);
    lv_obj_add_event_cb(roller, roller_event_cb, LV_EVENT_ALL, NULL);
}

三、效果展示

在这里插入图片描述

四、源码分享

ui.h


typedef struct
{
  
	lv_obj_t *screen;
	bool screen_del;
	lv_obj_t *screen_roller;
	lv_obj_t *screen_arc;
}lv_ui;

ui.c

/*
* Copyright 2025 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"



void setup_scr_screen(lv_ui *ui)
{
	//Write codes screen
	ui->screen = lv_obj_create(NULL);
	lv_obj_set_size(ui->screen, 800, 480);
	lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0x21d0e3), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_roller
	ui->screen_roller = lv_roller_create(ui->screen);
	lv_roller_set_options(ui->screen_roller, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10", LV_ROLLER_MODE_INFINITE);
	lv_obj_set_pos(ui->screen_roller, 327, 139);
	lv_obj_set_width(ui->screen_roller, 147);

	//Write style for screen_roller, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_radius(ui->screen_roller, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_roller, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_roller, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_roller, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_roller, lv_color_hex(0x333333), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_roller, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_roller, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_roller, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_width(ui->screen_roller, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_opa(ui->screen_roller, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_color(ui->screen_roller, lv_color_hex(0xe6e6e6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_side(ui->screen_roller, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_roller, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_roller, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_roller, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_roller, Part: LV_PART_SELECTED, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_roller, 255, LV_PART_SELECTED|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_roller, lv_color_hex(0x2195f6), LV_PART_SELECTED|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_roller, LV_GRAD_DIR_NONE, LV_PART_SELECTED|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_roller, lv_color_hex(0xFFFFFF), LV_PART_SELECTED|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_roller, &lv_font_montserratMedium_12, LV_PART_SELECTED|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_roller, 255, LV_PART_SELECTED|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_roller, LV_TEXT_ALIGN_CENTER, LV_PART_SELECTED|LV_STATE_DEFAULT);

	lv_roller_set_visible_row_count(ui->screen_roller, 5);
	//Write codes screen_arc
	ui->screen_arc = lv_arc_create(ui->screen);
	lv_arc_set_mode(ui->screen_arc, LV_ARC_MODE_NORMAL);
	lv_arc_set_range(ui->screen_arc, 0, 100);
	lv_arc_set_bg_angles(ui->screen_arc, 135, 45);
	lv_arc_set_value(ui->screen_arc, 10);
	lv_arc_set_rotation(ui->screen_arc, 0);
	lv_obj_set_style_arc_rounded(ui->screen_arc, 0,  LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_rounded(ui->screen_arc, 0, LV_STATE_DEFAULT);
	lv_obj_set_pos(ui->screen_arc, 65, 94);
	lv_obj_set_size(ui->screen_arc, 194, 192);

	//Write style for screen_arc, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_arc, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_arc, lv_color_hex(0xf6f6f6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_arc, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_width(ui->screen_arc, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui->screen_arc, 12, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_opa(ui->screen_arc, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_color(ui->screen_arc, lv_color_hex(0xe6e6e6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_arc, 6, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_arc, 20, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_arc, 20, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_arc, 20, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_arc, 20, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_arc, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_arc, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
	lv_obj_set_style_arc_width(ui->screen_arc, 12, LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_opa(ui->screen_arc, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
	lv_obj_set_style_arc_color(ui->screen_arc, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_DEFAULT);

	//Write style for screen_arc, Part: LV_PART_KNOB, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_arc, 255, LV_PART_KNOB|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_arc, lv_color_hex(0x2195f6), LV_PART_KNOB|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_arc, LV_GRAD_DIR_NONE, LV_PART_KNOB|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_all(ui->screen_arc, 5, LV_PART_KNOB|LV_STATE_DEFAULT);

	//The custom code of screen.
	

	//Update current screen layout.
	lv_obj_update_layout(ui->screen);

	//Init events for screen.
	events_init_screen(ui);
}

event.c

/*
* Copyright 2025 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/

#include "events_init.h"
#include <stdio.h>
#include "lvgl.h"

#if LV_USE_FREEMASTER
#include "freemaster_client.h"
#endif


#include <string.h>
static void screen_roller_event_handler (lv_event_t *e)
{
	lv_event_code_t code = lv_event_get_code(e);

	switch (code) {
	case LV_EVENT_SCROLL_END:
	{
		char buf[32];
	int i=0;
	for(i=0;i<sizeof(buf);i++)
	  buf[i] = 0;
	lv_roller_get_selected_str(guider_ui.screen_roller, buf, sizeof(buf));
	int val = atoi(buf);
	lv_arc_set_value(guider_ui.screen_arc, val*10);
	printf("%d\r\n",val);
		break;
	}
	case LV_EVENT_VALUE_CHANGED:
	{
		char buf[32];
	int i=0;
	for(i=0;i<sizeof(buf);i++)
	  buf[i] = 0;
	lv_roller_get_selected_str(guider_ui.screen_roller, buf, sizeof(buf));
	int val = atoi(buf);
	lv_arc_set_value(guider_ui.screen_arc, val*10);
		break;
	}
	default:
		break;
	}
}
void events_init_screen(lv_ui *ui)
{
	lv_obj_add_event_cb(ui->screen_roller, screen_roller_event_handler, LV_EVENT_ALL, ui);
}

void events_init(lv_ui *ui)
{

}

在这里插入图片描述

觉得整理的好的话点个赞呗！

相关文章：

  • 【Java多线程】告别线程混乱！深度解析Java多线程4大实现方式（附实战案例）
  • Spring Boot 3.4.3 和 Spring Security 6.4.2 结合 JWT 实现用户登录
  • 青少年编程考试 CCF GESP图形化编程 四级认证真题 2025年3月
  • 基于SpringBoot的家教管理系统【附源码】
  • 拖拽实现3
  • Docker 安装redis
  • Docker--利用dockerfile搭建mysql主从集群和redis集群
  • 在MATLAB中使用MPI进行并行编程
  • 特殊定制版，太给力了！
  • MySQL进阶-存储引擎索引
  • 设计模式 Day 9：命令模式（Command Pattern）完整讲解与实战应用
  • MaxPooling层的作用（通俗解释）
  • PyTorch 深度学习实战（36）：混合精度训练与梯度缩放
  • python爬取歌曲宝周排行音乐
  • Docker 镜像 的常用命令介绍
  • TCP 如何在网络 “江湖” 立威建交？
  • 【家政平台开发(38)】解锁家政平台国际化密码：多语言支持开发实战
  • 基于AOP+Log4Net+AutoFac日志框架
  • 【AI提示词】金融信息抽取工程师工作流程
  • Python itertools模块的combinations函数介绍
  • 泰安网络网站/找相似图片 识别
  • 二级域名网站建设/自己建网站
  • 网上商城项目设计方案/seo外包公司需要什么
  • 做游戏的php网站有哪些/怎么样推广自己的产品
  • 网站建设项目分析报告/免费发布友链
  • 怎样做网站的优化/泉州百度推广咨询