我想在 vscode APP中写代码，在虚拟机ubuntu中运行代码（写一个计算器）要用的lvgl 想要详细操作步骤及设计的文件代码

### 搭建开发环境 为了在 VSCode 中编写 LVGL 项目并将其部署到 Ubuntu 虚拟机中运行，需要完成以下几部分工作：安装必要的工具链、配置远程开发插件以及设置虚拟机中的依赖项。 #### 安装必要软件 在 Ubuntu 虚拟机中执行如下命令来安装所需的编译器及相关工具[^1]： ```bash sudo apt-get update && sudo apt-get upgrade -y sudo apt-get install git wget flex bison gperf python3 python3-pip python3-venv cmake ninja-build ccache libffi-dev libssl-dev dfu-util libusb-1.0-0 -y ``` 此外，在主机端需安装 Visual Studio Code 和 Remote Development 插件包。Remote Development 插件允许通过 SSH 连接到虚拟机，并直接在其环境中编辑和构建代码。 --- ### 配置 VSCode 和虚拟机连接 #### 设置 Virtual Machine (VM) 确保已启动 Ubuntu VM 并启用了 SSH 服务。如果未启用，则可以通过以下命令开启： ```bash sudo systemctl start ssh sudo systemctl enable ssh ``` 记录下虚拟机的 IP 地址以便后续使用 `ssh` 命令访问它。 #### 在 VSCode 上配置 Remote Connection 打开 VSCode 后加载 **Remote - SSH** 扩展。创建一个新的 SSH 配置文件 (`~/.ssh/config`) 或者手动填写目标地址作为参数传入。例如： ```plaintext Host ubuntu-lvgl HostName <your_vm_ip> User your_username ``` 替换 `<your_vm_ip>` 和 `your_username` 成实际值之后保存更改。接着点击左侧活动栏上的绿色图标切换至该会话即可进入远端模式下的编辑界面。 --- ### 创建 LVGL 计算器示例工程 假设已经克隆了一个支持嵌入式图形库的基础框架仓库（比如 lv_examples），可以按照下面的方式组织目录结构： #### 文件夹布局 ``` calculator/ ├── CMakeLists.txt ├── main.c └── assets/ └── style.css ``` #### 主程序逻辑实现 以下是简单的四则运算功能模拟器的核心片段——位于 `main.c` 当中: ```c #include "lvgl/lvgl.h" static void btn_event_cb(lv_obj_t *obj, lv_event_t event) { if(event == LV_EVENT_CLICKED){ const char* txt = lv_btn_get_text(obj); printf("Button '%s' clicked\n",txt); } } void setup_ui() { /* Initialize the display and input devices */ lv_init(); static lv_disp_buf_t disp_buf; static uint8_t buf[LV_HOR_RES_MAX * 10]; lv_disp_buf_init(&disp_buf,buf,NULL,LV_HOR_RES_MAX * 10); lv_color_t color_def = { .ch={0xFF,0xA5,0x00} }; lv_obj_set_style_local_bg_color(ui_Screen,LV_OBJ_PART_MAIN,LV_STATE_DEFAULT,&color_def); // Add buttons here... } ``` 此脚本定义了一些基本组件样式及其交互行为处理函数原型；具体按钮绘制过程省略简化展示效果而已。 #### 构建与调试 回到终端窗口内定位到项目根路径后调用标准流程生成可执行二进制文件: ```bash mkdir build && cd build cmake .. make ./calculator_app ``` 以上即完成了整个从零起步直至成功渲染 GUI 的全过程概述[^2]. ---