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

文章目录

- 前言
- 主体
- - [1. **控件概述**](#1. 控件概述)
  - [2. **控件的样式和组成部分**](#2. 控件的样式和组成部分)
  - [3. **使用场景**](#3. 使用场景)
  - [4. **控件的基本使用**](#4. 控件的基本使用)
  - [5. **键盘和事件支持**](#5. 键盘和事件支持)
  - - 键盘支持
    - 事件支持
  - [6. **示例代码**](#6. 示例代码)
- 总结

前言

标尺控件（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 是实现数据直观展示的重要工具之一。