【花雕学编程】Arduino动手做（249）--GC9A01菜单导航的列表

  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之九十二：GC9A01园屏之带图标的菜单导航选项列表

实验开源代码

/*
  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之九十二：GC9A01园屏之带图标的菜单导航选项列表
*/

//       GC9A01---------- ESP32
//       RST ------------ NC（复位引脚，此处未连接）
//       CS ------------- D4（片选引脚，连接到ESP32的D4引脚）
//       DC ------------- D2（数据/命令选择引脚，连接到ESP32的D2引脚）
//       SDA ------------ D23 (green)（主数据输出引脚，连接到ESP32的D23引脚，绿色线）
//       SCL ------------ D18 (yellow)（时钟信号引脚，连接到ESP32的D18引脚，黄色线）
//       GND ------------ GND（接地引脚，连接到ESP32的接地端）
//       VCC -------------3V3（电源引脚，连接到ESP32的3.3V电源）

#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"

#define TFT_CS 4
#define TFT_DC 2
#define TFT_RST -1

Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
#define MENU_ITEMS 4  // **菜单项数量**
#define MENU_WIDTH 180  // **菜单宽度**
#define MENU_HEIGHT 30  // **菜单高度**
#define MENU_X 30  // **菜单起始 X 位置**
#define MENU_Y 60  // **菜单起始 Y 位置**
#define ICON_SIZE 20  // **图标大小**
int selectedItem = 0;  // **当前选中的菜单项**

void drawMenuItem(int index, const char* text, uint16_t color) {
    int yPos = MENU_Y + index * (MENU_HEIGHT + 10);
    
    // **绘制菜单背景**
    tft.fillRect(MENU_X, yPos, MENU_WIDTH, MENU_HEIGHT, color);
    
    // **绘制图标**
    tft.fillCircle(MENU_X + ICON_SIZE, yPos + MENU_HEIGHT / 2, ICON_SIZE / 2, tft.color565(255, 255, 0));

    // **显示文本**
    tft.setTextColor(tft.color565(255, 255, 255));
    tft.setTextSize(2);
    tft.setCursor(MENU_X + ICON_SIZE * 2 + 10, yPos + 10);
    tft.print(text);
}

void setup() {
    Serial.begin(115200);
    tft.begin();
    tft.setRotation(2);
}

void loop() {
    tft.fillScreen(tft.color565(0, 0, 0));

    // **绘制菜单选项**
    drawMenuItem(0, "选项 1", selectedItem == 0 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
    drawMenuItem(1, "选项 2", selectedItem == 1 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
    drawMenuItem(2, "选项 3", selectedItem == 2 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));
    drawMenuItem(3, "选项 4", selectedItem == 3 ? tft.color565(0, 255, 0) : tft.color565(50, 50, 50));

    // **模拟选项切换**
    selectedItem = (selectedItem + 1) % MENU_ITEMS;
    
    delay(1000);
}
复制代码

这段代码的核心功能是 菜单导航界面，它在屏幕上显示 多个选项，并为每个选项 附带图标，同时让选中的选项 高亮显示，形成动态导航效果。
代码结构

1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏，设定黑色背景。
2️⃣ 绘制菜单选项
• fillRect() 创建 菜单矩形背景，显示在屏幕上。
• fillCircle() 生成 黄色图标，提高视觉清晰度。
• print() 方法显示 对应选项的文字，增强信息可读性。
3️⃣ 选项高亮
• selectedItem 变量控制 当前选中的菜单项。
• 选中的选项以 绿色背景显示，未选中的选项以 深色背景显示，形成对比效果。
4️⃣ 模拟选项切换
• selectedItem = (selectedItem + 1) % MENU_ITEMS; 让选项 每秒自动切换，模拟导航动画。
• delay(1000); 控制切换节奏，使动画流畅。


最终效果

屏幕上显示多个菜单选项，每个选项都有图标
菜单项自动循环切换，模拟导航功能
黑色背景 + 绿色高亮选项 + 白色文字，提高可视化效果

实验场景图  动态图