ESP32 开发笔记(四）LVGL控件学习 Tileview 网格切换视图布局控件 X

系统管理员 2022-12-27 01:17 320阅读 0赞

先看效果，创建四个页面视图循环环形切换每个页面创建不同控件

此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行

![20201206184327850.gif][]

开发板购买链接[https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674][https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]

### 一、[开发板简介][Link 1]   二、[开发环境搭建 windows][windows] ###

ESP32例程为C语言开发，并非Python/Arduino/AT指令开发，基于ESP-IDF\_V4.2框架库，采用纯C语言开发，开发工具为Visual Studio Code  
Android(安卓)例程全部为原生Android开发，例程全部支持到SDK版本29  Android 10.0(Q) 开发工具为Andirod Studio 4.0  
PC源码例程为Visual Studio 2013开发，C++语言，基于MFC  
送的MQTT账号，仅用于同学们开发测试，大家不要用到实际产品上，不定期更换密码，会在QQ群公布  
以下列出的例程源码均编写完成（不断增加中），开发教程正在编写

### **三、基础示例** ###

[0\_Hello Bug （ESP\_LOGX与printf）][0_Hello Bug _ESP_LOGX_printf]    工程模板/打印调试输出  
    [1\_LED][1_LED]                                                    LED亮灭控制         
   [ 2\_LED\_Task][2_LED_Task]                                          使用任务方式控制LED  
    [3\_LEDC\_PWM ][3_LEDC_PWM]                                     使用LEDC来控制LED实现呼吸灯效果  
    [4\_ADC\_LightR][4_ADC_LightR]                                      使用ADC读取光敏电阻实现光照传感  
    [5\_KEY\_Short\_Long][5_KEY_Short_Long]                              按钮长按短按实现  
    [6\_TouchPad\_Interrupt ][6_TouchPad_Interrupt]                         电容触摸中断实现  
    [7\_WS2812\_RMT][7_WS2812_RMT]                                  使用RMT实现RGB\_LED彩虹变色示例  
    [8\_DHT11\_RMT][8_DHT11_RMT]                                    使用RMT实现读取DHT11温湿度传感器  
    [9\_SPI\_SDCard][9_SPI_SDCard]                                    使用SPI总线实现TF卡文件系统示例  
    [10\_IIC\_ADXL345][10_IIC_ADXL345]                                使用IIC总线实现读取ADXL345角度加速度传感器  
    [11\_IIC\_AT24C02][11_IIC_AT24C02]                                 使用IIC总线实现小容量数据储存测试  
    [12\_IR\_Rev\_RMT][12_IR_Rev_RMT]                                使用RMT实现红外遥控接收解码（NEC编码）  
    [13\_IR\_Send\_RMT][13_IR_Send_RMT]                              使用RMT实现红外数据发送（NEC编码）  
    [14\_WIFI\_Scan][14_WIFI_Scan]                                    附近WIFI信号扫描示例      
    [15\_WIFI\_AP][15_WIFI_AP]                                        创建软AP示例  
    [16\_WIFI\_AP\_TCP\_Server][16_WIFI_AP_TCP_Server]                  在软AP模式下实现TCP服务端  
    [17\_WIFI\_AP\_TCP\_Client][17_WIFI_AP_TCP_Client]                   在软AP模式下实现TCP客户端  
    [18\_WIFI\_AP\_UDP][18_WIFI_AP_UDP]                              在软AP模式下实现UDP通讯  
    [19\_WIFI\_STA][19_WIFI_STA]                                      创建STA站模连接路由器  
    [20\_WIFI\_STA\_TCP\_Server][20_WIFI_STA_TCP_Server]                在站模式STA下实现TCP服务端  
    [21\_WIFI\_STA\_TCP\_Client ][21_WIFI_STA_TCP_Client]                在站模式STA下实现TCP客户端  
    [22\_WIFI\_STA\_UDP][22_WIFI_STA_UDP]                            在站模式STA下实现UDP通讯  
    [23\_LCD\_Test][23_LCD_Test]                                      LCD液晶触摸屏显示测试  
    [24\_XPT2046\_Touch\_Test][24_XPT2046_Touch_Test]                   电阻触摸XPT2046驱动测试触摸校正

### 四、**LVGL控件使用示例** ###

LVGL\_Full\_Test                                  LVGL官方例程（使用到了大分部控件）  
    [LVGL\_Arc\_Test                                  圆弧指示器通过触摸动态改变值][LVGL_Arc_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Bar\_Test                                  通过动画方式动态演示Bar进度条的使用方法][LVGL_Bar_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Bar]  
    [LVGL\_Button\_Test                             通过5种不同动态效果的按钮学习按钮的创建与使用][LVGL_Button_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _5]  
    [LVGL\_ButtonMatrix\_Test                   创建一个计算器布局来演示矩阵按钮控件的使用][LVGL_ButtonMatrix_Test_ _ _ _ _ _ _ _ _]  
    [LVGL\_Calendar\_Test                         日历控件的创建和使用][LVGL_Calendar_Test_ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Canvas\_Test                           透明画布和画一个圆角过渡色矩形并旋转角度学习画布的使用][LVGL_Canvas_Test_ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Chart\_Test                               通过创建三个不同风格的图表来学习图表控件的使用][LVGL_Chart_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Checkbox\_Test                        学习复选框控件的创建和使用][LVGL_Checkbox_Test_ _ _ _ _ _ _ _ _ _ _ _]  
   [ LVGL\_ColorPicker\_Test                     创建一个颜色选择器并动态显示当前颜色的RGB值][LVGL_ColorPicker_Test_ _ _ _ _ _ _ _ _ _ _RGB]  
    [LVGL\_Container\_Test                        在内容控件上动态创建三个文本标签学习内容控件的自适应布局][LVGL_Container_Test_ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Drop\_down\_List\_Test              创建三个不同类型的下拉选择控件][LVGL_Drop_down_List_Test_ _ _ _ _ _ _]  
    [LVGL\_Gauge\_Test                             创建一个动态仪表和静态多指针仪表][LVGL_Gauge_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Image\_Test                              通过四个滑动条控件控制图片颜色的变化来学习图像控件的使用][LVGL_Image_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_ImageButton\_Test                  创建一个图片背景的图像按钮][LVGL_ImageButton_Test_ _ _ _ _ _ _ _]  
    [LVGL\_Keyboard\_Test                       通过一个文本输入框控件还学习键盘控件的调用关闭设置][LVGL_Keyboard_Test_ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Label\_Test                              创建内容颜色可变，长文本滚动展示，带阴影3D效果三个标签控件][LVGL_Label_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _3D]  
    [LVGL\_LED\_Test                                创建三个LED，学习LED控件的调光，颜色，开关的设置][LVGL_LED_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _LED_LED]  
    [LVGL\_Line\_Test                                通过二维数组创建一段折线来演示线控件的使用][LVGL_Line_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_LineMeter\_Test                      创建两个不同的线段弧形指示器动态展示数据][LVGL_LineMeter_Test_ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_List\_Test                                 创建一个带图标的列表控件][LVGL_List_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_MessageBox\_Test                  创建一个带按钮的消息框控件][LVGL_MessageBox_Test_ _ _ _ _ _ _ _ _]  
    [LVGL\_ObjectMask\_Test                    创建一个变幻色的文本学习蒙版遮罩效果][LVGL_ObjectMask_Test_ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Page\_Test                            学习页面控件的使用][LVGL_Page_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Roller\_Test                           通过示例学习滑动列表选择器控件][LVGL_Roller_Test_ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Slider\_Test                           创建一个单向和一个双向滑动条控件][LVGL_Slider_Test_ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Spinbox\_Test                        学习微调控件的使用][LVGL_Spinbox_Test_ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Spinner\_Test                        创建三个不同的环形加载器][LVGL_Spinner_Test_ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Switch\_Test                          创建两个不同的开关控件][LVGL_Switch_Test_ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Table\_Test                            创建一个简单的表格][LVGL_Table_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _]  
    [LVGL\_Tabview\_Test                       实现三页的页面切换学习Tabview控件][LVGL_Tabview_Test_ _ _ _ _ _ _ _ _ _ _ _Tabview]  
    [LVGL\_Textarea\_Test                       长按实现打字机效果的Textarea控件][LVGL_Textarea_Test_ _ _ _ _ _ _ _ _ _ _ _Textarea]  
    LVGL\_Tileview\_Test                        实现四面环形触摸切换的Tileview控件  
    LVGL\_Window\_Test                        创建一个窗口，带设置子窗口学习窗口控件的使用

**ESP32应用例程**  
    Bluetooth\_RGBLight                          Android手机通过蓝牙控制RGB灯变色  
    Bluetooth\_Sensor                              Android手机通过蓝牙读取开发板姿态和温度湿度参数  
    Bluetooth\_Test                                   Android手机通过蓝牙与开发板通讯  
    Encryption\_MD5                                MD5加密  
    Encryption\_SHA1                              SHA1加密  
    Encryption\_SHA256                          SHA256加密  
    EncryptionDecrypt\_AES\_CBC          AES\_CBC加密  
    EncryptionDecrypt\_AES\_ECB          AES\_ECB加密  
    ESP32\_SmartConfig                         通过Android手机配置WIFI连网  
    HTTP\_GET\_Request\_Weather        HTTP Get请求天气预报  
    JSON\_Package                                创建JSON数据包  
    JSON\_Parsing                                  解析JSON数据包  
    LCD JPEG\_Effect                             解码JGEG图片特效显示  
    MQTT                                                MQTT通讯测试  
**Android（安卓）工具源码  
  **  ESP32\_Bluetooth\_Chat                   Android通过蓝牙与开发板通讯测试  
    ESP32\_Bluetooth\_RGBLight           Android通过蓝牙控制开发板RGB灯  
    ESP32\_Bluetooth\_Sensor               Android通过蓝牙读取开发板3D姿态和温度湿度数据  
    ESP32\_SmartConfig                       Android手机配置WIFI配网  
    MQTT\_Test                                     Android与开发板通过MQTT协议通讯  
    TCP\_Client                                     Android作为TCP客户端与开发板通讯   
    UDP\_Client                                     Android通过UDP协议与开发板通讯  
**PC(Visual Studio 2013 C++ MFC)工具源码**  
    MQTT\_调试助手                                 PC通过MQTT与开发板通讯  
    TCP 调试助手                                     PC通过TCP服务器/客户端与开发板通讯  
    UDP 调试助手                                     PC通过UDP与开发板通讯

[20201206184327850.gif]: /images/20221120/e6a425c6c3164fc9adececbbcd3542be.png
[https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674
[Link 1]: https://blog.csdn.net/cnicfhnui/article/details/108343442
[windows]: https://blog.csdn.net/cnicfhnui/article/details/108405073
[0_Hello Bug _ESP_LOGX_printf]: https://blog.csdn.net/cnicfhnui/article/details/108372259
[1_LED]: https://blog.csdn.net/cnicfhnui/article/details/108407571
[2_LED_Task]: https://blog.csdn.net/cnicfhnui/article/details/108444839
[3_LEDC_PWM]: https://blog.csdn.net/cnicfhnui/article/details/108445470
[4_ADC_LightR]: https://blog.csdn.net/cnicfhnui/article/details/108465952
[5_KEY_Short_Long]: https://blog.csdn.net/cnicfhnui/article/details/108483871
[6_TouchPad_Interrupt]: https://blog.csdn.net/cnicfhnui/article/details/108489470
[7_WS2812_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108490311
[8_DHT11_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108492118
[9_SPI_SDCard]: https://blog.csdn.net/cnicfhnui/article/details/108493320
[10_IIC_ADXL345]: https://blog.csdn.net/cnicfhnui/article/details/108507326
[11_IIC_AT24C02]: https://blog.csdn.net/cnicfhnui/article/details/108507982
[12_IR_Rev_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108508379
[13_IR_Send_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108510733
[14_WIFI_Scan]: https://blog.csdn.net/cnicfhnui/article/details/108511289
[15_WIFI_AP]: https://blog.csdn.net/cnicfhnui/article/details/108517633
[16_WIFI_AP_TCP_Server]: https://blog.csdn.net/cnicfhnui/article/details/108588735
[17_WIFI_AP_TCP_Client]: https://blog.csdn.net/cnicfhnui/article/details/108590279
[18_WIFI_AP_UDP]: https://blog.csdn.net/cnicfhnui/article/details/108590638
[19_WIFI_STA]: https://blog.csdn.net/cnicfhnui/article/details/108591462
[20_WIFI_STA_TCP_Server]: https://blog.csdn.net/cnicfhnui/article/details/108594214
[21_WIFI_STA_TCP_Client]: https://blog.csdn.net/cnicfhnui/article/details/108594746
[22_WIFI_STA_UDP]: https://blog.csdn.net/cnicfhnui/article/details/108595529
[23_LCD_Test]: https://blog.csdn.net/cnicfhnui/article/details/108612147
[24_XPT2046_Touch_Test]: https://blog.csdn.net/cnicfhnui/article/details/108655354
[LVGL_Arc_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110482844
[LVGL_Bar_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Bar]: https://blog.csdn.net/cnicfhnui/article/details/110491549
[LVGL_Button_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _5]: https://blog.csdn.net/cnicfhnui/article/details/110517584
[LVGL_ButtonMatrix_Test_ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110517800
[LVGL_Calendar_Test_ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110517929
[LVGL_Canvas_Test_ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110518259
[LVGL_Chart_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110518446
[LVGL_Checkbox_Test_ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110519322
[LVGL_ColorPicker_Test_ _ _ _ _ _ _ _ _ _ _RGB]: https://blog.csdn.net/cnicfhnui/article/details/110520096
[LVGL_Container_Test_ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110520315
[LVGL_Drop_down_List_Test_ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110520647
[LVGL_Gauge_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110521116
[LVGL_Image_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110522070
[LVGL_ImageButton_Test_ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110676992
[LVGL_Keyboard_Test_ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110677116
[LVGL_Label_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _3D]: https://blog.csdn.net/cnicfhnui/article/details/110677205
[LVGL_LED_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _LED_LED]: https://blog.csdn.net/cnicfhnui/article/details/110677396
[LVGL_Line_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110677476
[LVGL_LineMeter_Test_ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110677548
[LVGL_List_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110677678
[LVGL_MessageBox_Test_ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110677779
[LVGL_ObjectMask_Test_ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110677973
[LVGL_Page_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110678070
[LVGL_Roller_Test_ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110749194
[LVGL_Slider_Test_ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110749234
[LVGL_Spinbox_Test_ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110749277
[LVGL_Spinner_Test_ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110749298
[LVGL_Switch_Test_ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110749336
[LVGL_Table_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110749371
[LVGL_Tabview_Test_ _ _ _ _ _ _ _ _ _ _ _Tabview]: https://blog.csdn.net/cnicfhnui/article/details/110749398
[LVGL_Textarea_Test_ _ _ _ _ _ _ _ _ _ _ _Textarea]: https://blog.csdn.net/cnicfhnui/article/details/110749437