使用 SquareLine Studio 1.5.0 导出ui文件,在 lvgl windows模拟器运行

1. 关于如何下载和使用,网上有很多教程,不再叙述。注册为个人账号工具就给免费使用。

2. UI设计完成后,点击 export 找个文件夹导出

3. 将文件夹(例如my_demo)放进 LVGL.Simulator\lvgl\demos\my_demo

4. 修改 my_demo/ui.h 

#include "lvgl.h"  修改为 #include "../../lvgl.h"

5. 修改 ui.c init函数名

ui_init  例如修改为  my_ui_init

6. 修改demo入口

LVGL.Simulator\lvgl\demos\widgets\lv_demo_widgets.c

修改  void lv_demo_widgets(void) 为 void lv_demo_widgets_000(void)

重写 void lv_demo_widgets(void)

extern void my_ui_init(void);

void lv_demo_widgets(void)

{

    my_ui_init();

}

7. 把 my_demo 放入工程

点击解决方案上方的“显示所有文件”图标。

然后在放入的文件夹上右键,选择“包含在项目中”,就可以把my_demo加入工程参与编译。

8. 运行一下

这个screen上有个label 每秒定时更新数字,有个Back按钮,有张image图片。

最后写一下定时更新,大概如下,在需要的地方调用 my_setup_events :

void timer_callback(lv_timer_t* timer) {
    counter++;
    lv_label_set_text_fmt(ui_Label1, "counter: %d", counter); // 更新标签内容
}

void my_setup_events(void)
{
    if (timer_inited == 0)
    {
        timer_inited = 1;
        lv_timer_t* timer = lv_timer_create(timer_callback, 1000, NULL); // 每秒更新一次
    }
}

### SquareLine Studio 1.5.0 中聊天界面设计指南 #### 创建基础项目结构 为了在SquareLine Studio中构建一个功能性的聊天界面,首先需要创建一个新的Arduino工程项目。通过SquareLine Studio的图形化界面可以快速完成这一过程[^1]。 ```cpp // 初始化LVGL库并设置显示驱动程序 lv_init(); tft.init(); tft.setRotation(1); disp_buf = lv_disp_draw_buf_create(width * 10, NULL, NULL); // 设置缓冲区大小 ``` #### 配置开发环境 对于特定硬件平台的选择,在SquareLine Studio内调整`Board Group`选项来匹配所使用的设备。例如,如果目标是ESP8266,则应相应地选择支持该芯片的开发环境配置[^2]。 #### 构建聊天窗口组件 定义聊天消息区域以及输入框等核心UI元素: - **消息列表容器**:用于展示历史对话记录。 ```cpp lv_obj_t* chat_list = lv_list_create(lv_scr_act(), NULL); lv_obj_set_size(chat_list, 300, 400); ``` - **输入文本框**:允许用户键入新的消息内容 ```cpp lv_obj_t* txt_area = lv_textarea_create(lv_scr_act(), NULL); lv_textarea_set_one_line(txt_area, true); lv_obj_align(txt_area, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, -10); ``` - **发送按钮**:触发向服务器提交当前编辑的消息 ```cpp static void send_message_event_cb(lv_obj_t * obj, lv_event_t event){ if(event == LV_EVENT_CLICKED){ const char * msg = lv_textarea_get_text(txt_area); // 发送msg到服务器逻辑... } } lv_obj_t* btn_send = lv_btn_create(lv_scr_act(), NULL); lv_obj_add_event_cb(btn_send, send_message_event_cb, LV_EVENT_ALL, NULL); lv_label_set_text(lv_label_create(btn_send, NULL), "Send"); ``` #### 实现动态更新机制 为了让聊天界面上能够实时反映最新收到的信息,需建立周期性轮询或事件监听器模式下的数据同步处理函数。这通常涉及到网络通信协议(如WebSocket)的应用编程接口调用,并将接收到的新消息追加至已有的消息列表之中。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值