LVGL9 标尺控件 (lv_scale) 使用指南

文章目录


前言

标尺控件(lv_scale)是 LittlevGL 提供的一种线性标尺显示组件,用于展示范围、分段和刻度。它支持灵活的样式定制,能够满足多种数据可视化需求,例如显示刻度范围、分段区间等。本文将详细介绍 lv_scale 的功能特点、应用场景及实现方式,帮助开发者轻松掌握这一控件。


主体

1. 控件概述

lv_scale 是一个线性标尺控件,支持以下主要功能:

  • 范围和刻度:通过设置主范围和次范围,定义控件的数值范围。
  • 分段显示:支持将标尺划分为多个区间,每个区间可独立设置样式。
  • 标签和样式:主刻度支持数字或自定义文本标签,且可自由设置文字、颜色等样式。

通过这些功能,lv_scale 可以被广泛应用于仪表盘、范围选择器、进度指示器等场景。


2. 控件的样式和组成部分

lv_scale 包含以下三个主要部分,每部分均可单独设置样式:

  • LV_PART_MAIN

    • 控制标尺主线的样式。
    • 示例图中对应蓝色线条。
  • LV_PART_ITEMS

    • 控制次刻度线的样式。
    • 示例图中对应红色刻度线。
  • LV_PART_INDICATOR

    • 控制主刻度线和标签的样式。
    • 示例图中对应绿色主刻度线和粉色标签。

通过调整各部分的样式属性,可以实现高度自定义的标尺外观。


3. 使用场景

lv_scale 在以下场景中非常适用:

  • 数据可视化:展示数据范围或趋势。
  • 进度指示:用于展示当前进度或完成度。
  • 仪表盘设计:用于显示分段信息,例如速度、温度或其他测量值。
  • 范围选择器:结合交互组件,用户可通过拖拽在标尺上选择区间。

4. 控件的基本使用

设置范围

使用 lv_scale_set_range(scale, minor_range, major_range) 方法设置标尺的主范围和次范围。

  • minor_range :次范围的值,例如 0
  • major_range :主范围的值,例如 100

示例代码:

c 复制代码
lv_obj_t *scale = lv_scale_create(lv_scr_act());
lv_scale_set_range(scale, 0, 100); // 设置范围为 0 到 100
配置刻度

通过以下函数设置刻度:

  • 设置总刻度数量:lv_scale_set_total_tick_count(scale, total_tick_count)
  • 设置主刻度间隔:lv_scale_set_major_tick_every(scale, nth_tick)
  • 设置主刻度标签显示:lv_scale_set_label_show(scale, show_label)
    • 若需显示标签,将 show_label 设置为 true
    • 如果希望自定义文本标签,使用 lv_scale_set_text_src(scale, custom_labels)

示例代码:

c 复制代码
lv_scale_set_total_tick_count(scale, 10);  // 设置总刻度数为 10
lv_scale_set_major_tick_every(scale, 2);  // 每隔 2 个刻度为一个主刻度
lv_scale_set_label_show(scale, true);     // 显示主刻度的标签

自定义文本标签示例:

c 复制代码
static char *custom_labels[] = {"Low", "Medium", "High", NULL};
lv_scale_set_text_src(scale, custom_labels); // 设置自定义标签
设置刻度长度

次刻度和主刻度的长度可以通过以下方法分别设置:

  • 次刻度lv_obj_set_style_length(scale, length, LV_PART_ITEMS)
  • 主刻度lv_obj_set_style_length(scale, length, LV_PART_INDICATOR)

示例代码:

c 复制代码
lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);       // 次刻度长度 5
lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);  // 主刻度长度 10
添加分段

通过 lv_scale_add_section(scale) 创建一个分段,并使用 lv_scale_section_set_range(section, minor_range, major_range) 设置分段范围。

每个分段可独立设置样式,具体如下:

  • 主线样式:lv_style_set_line_color()lv_style_set_line_width()
  • 标签样式:lv_style_set_text_font()lv_style_set_text_color()

示例代码:

c 复制代码
lv_scale_section_t *section = lv_scale_add_section(scale);
lv_scale_section_set_range(section, 20, 40); // 分段范围为 20 到 40

// 设置分段样式
static lv_style_t section_style;
lv_style_init(&section_style);
lv_style_set_line_color(&section_style, lv_color_hex(0xFF0000)); // 红色主线
lv_scale_section_set_style(section, LV_PART_MAIN, &section_style);

5. 键盘和事件支持

键盘支持

lv_scale 当前不支持键盘交互,但可以结合其他控件通过事件回调模拟交互行为。

事件支持

lv_scale 当前未提供内置事件支持,但可以使用基础对象的事件机制扩展功能。


6. 示例代码

以下示例展示了如何创建一个简单的标尺控件,配置范围、刻度和分段样式:

c 复制代码
void create_scale() {
    // 创建标尺控件
    lv_obj_t *scale = lv_scale_create(lv_scr_act());

    // 设置范围和刻度
    lv_scale_set_range(scale, 0, 100); // 范围 0-100
    lv_scale_set_total_tick_count(scale, 11); // 11 个刻度
    lv_scale_set_major_tick_every(scale, 2); // 每隔 2 个刻度为主刻度
    lv_scale_set_label_show(scale, true); // 显示主刻度标签

    // 设置刻度长度
    lv_obj_set_style_length(scale, 5, LV_PART_ITEMS); // 次刻度长度
    lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR); // 主刻度长度

    // 添加分段
    lv_scale_section_t *section = lv_scale_add_section(scale);
    lv_scale_section_set_range(section, 20, 40);

    // 配置分段样式
    static lv_style_t section_style;
    lv_style_init(&section_style);
    lv_style_set_line_color(&section_style, lv_color_hex(0x00FF00)); // 绿色主线
    lv_scale_section_set_style(section, LV_PART_MAIN, &section_style);

    // 居中显示
    lv_obj_center(scale);
}

总结

lv_scale 是一个功能强大且灵活的标尺控件,适用于各种场景中的范围和分段显示需求。通过精细的样式调整和灵活的分段机制,开发者可以轻松构建美观且实用的用户界面。在嵌入式设备的显示设计中,lv_scale 是实现数据直观展示的重要工具之一。

相关推荐
塞尔维亚大汉1 分钟前
【鸿蒙南向开发】OpenHarmony小型系统内核(LiteOS-A)【文件系统】下
物联网·嵌入式·harmonyos
云小逸4 分钟前
【C++】继承
开发语言·c++
鸿蒙布道师13 分钟前
AI硬件遭遇“关税风暴“:中国科技企业如何破局?
人工智能·科技·嵌入式硬件·深度学习·神经网络·opencv·机器人
二块烧肉23 分钟前
STM32 串口USART
stm32·单片机·嵌入式硬件
Bardb24 分钟前
04-stm32的标准外设库
stm32·c#
努力学习的小廉28 分钟前
【C++】 —— 笔试刷题day_21
开发语言·c++·算法
YuforiaCode29 分钟前
第十四届蓝桥杯 2023 C/C++组 冶炼金属
c语言·c++·蓝桥杯
愚润求学1 小时前
【专题刷题】二分查找(一):深度解刨二分思想和二分模板
开发语言·c++·笔记·leetcode·刷题
tanyongxi661 小时前
手撕C++STL list:深入理解双向链表的实现
开发语言·c++·链表
岩中竹1 小时前
力扣热题100题解(c++)—矩阵
数据结构·c++·程序人生·算法·leetcode·矩阵