第二十二章 加载器部件(lv_spinner)

       加载器在UI设计中很常见，它可用于提示用户，当前任务正在加载中。

       本章节将分为以下几个小节：

       22.1 加载器部件的组成

       22.2 加载器部件的相关知识

       22.4 加载器部件API函数

       22.5 加载器部件实验

        22.1 加载器部件的组成

       加载器部件是由主体背景和指示器组成的，示意图如下所示：

图22.1.1 加载器部件的组成部分

       关于部件样式设置的内容，请大家参考6.4.4章节。

        22.2 加载器部件的相关知识

       1. 创建加载器部件

       用户需要创建加载器部件，可调用lv_spinner_create(parent, time, arc_length)函数，该函数有三个形参，parent形参表示部件的父类，time形参表示指示器旋转一圈的时间（以毫秒为单位）， arc_length形参表示指示器的长度。

        22.3 加载器部件API函数

       加载器部件相关的函数只有一个，如下所示：

       lv_spinner_create函数

       创建加载器部件，其函数原型如下所示：

lv_obj_t *lv_spinner_create(lv_obj_t *parent,uint32_t time,uint32_t arc_length);

       该函数的形参描述如下表所示：

表22.3.2 lv_spinner_create函数形参描述

       返回值：指向加载器的指针。

       22.4 加载器部件实验

       22.4.1 硬件设计

       1. 例程功能

       本实验主要测试加载器部件API函数的使用，实验现象：开机后，屏幕上显示一个加载器和提示文本（LOADING...）。与此同时，LED0闪烁，提示系统正在运行。

       该实验的完整源码，请参考《LVGL例程19 lv_spinner(加载器)》例程，路径：A盘→4，程序源码 →3，扩展例程 →3，LVGL例程。

       22.4.2 软件设计

       22.4.2.1 程序流程图

       本实验的程序流程图，如下图所示：

图22.4.2.1.1 加载器部件实验流程图

       22.4.2.2 程序解析

       关于LVGL的用户代码，我们都是在lv_mainstart.c文件中编写的，本实验的源码如下所示：

/**************************** 第一部分 开始 ****************************/
/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_label();            /* 加载提示标签 */
    lv_example_spinner();          /* 加载器显示 */
}
/**************************** 第一部分 结束 ****************************/
 
/**************************** 第二部分 开始 ****************************/
/**
 * @brief  加载提示标签
 * @param  无
 * @return 无
 */
static void lv_example_label(void)
{
    label_load = lv_label_create(lv_scr_act());
    lv_label_set_text(label_load, "LOADING...");
    lv_obj_set_style_text_font(label_load, &lv_font_montserrat_22, 0);
    lv_obj_align(label_load, LV_ALIGN_CENTER, 5, scr_act_height() / 8 );
}
 
/**
 * @brief  加载器显示
 * @param  无
 * @return 无
 */
static void lv_example_spinner(void)
{
/* 创建加载器 */
spinner = lv_spinner_create(lv_scr_act(), 1000, 60);  
/* 设置位置 */
lv_obj_align(spinner, LV_ALIGN_CENTER, 0, -scr_act_height() / 15 ); 
/* 设置大小 */
lv_obj_set_size(spinner, 50, 50);     
/* 设置主体圆弧宽度 */                     
lv_obj_set_style_arc_width(spinner, 8, LV_PART_MAIN);  
/* 设置指示器圆弧宽度 */
    lv_obj_set_style_arc_width(spinner, 8, LV_PART_INDICATOR);   
}
/**************************** 第二部分 结束 ****************************/

       上述源码可分为以下两个部分：

       ① lv_mainstart接口函数。在该函数中，我们调用了标签、加载器部件相关的示例函数；

       ② 加载页面的实现。我们创建标签部件和加载器部件，并为加载器部件设置样式。

       22 .4.3 下载验证

       把工程编译并下载到开发板中， 运行效果如下图所示：

图22.4.3.1 加载器部件实验