01 airui
作者：陈媛媛 | 最后修改：2026-04-27
一、概述
airui 核心库 是基于 LVGL 9.4 版本进行图形层封装的 LuatOS 核心库，把常用组件、事件管理、输入和基础视觉主题封装为更易上手的 Lua 接口，便于在支持 LuatOS 的设备和 PC 上统一开发。
本章节将使用 Air1601 开发板搭配 RGB888 触摸屏，演示 AirUI 的使用方法。
二、演示功能概述
1、核心核心驱动模块
1. main.lua - 主程序入口，负责系统初始化和任务调度
- 项目初始化和版本定义
- 系统任务调度和看门狗配置
- 演示模块的选择和加载
2. lcd_drv -LCD 显示驱动模块，基于 lcd 核心库
- 初始化 LCD 屏幕及背光
- 配置显示参数和缓冲区
- 初始化 AirUI 框架
3. tp_drv - 触摸面板驱动模块，基于 tp 核心库
- 初始化 GT911 触摸控制器
- 配置 I2C 通信和触摸回调
- 绑定触摸设备到 AirUI 输入系统
2、基础组件演示
- airui_home.lua AirUI 演示系统主页
- airui_label.lua -标签组件演示页面
- airui_button.lua - 按钮组件演示页面
- airui_image.lua - 图片组件演示页面
- airui_container.lua- 容器组件演示页面
- airui_bar.lua - （动态）进度条组件演示页面
- airui_qrcode.lua- 二维码组件演示页面
3、交互组件演示
- airui_switch.lua -开关组件演示页面
- airui_dropdown.lua - 下拉框组件演示页面
- airui_input.lua - 输入框组件演示页面
- airui_msgbox.lua - 消息框组件演示页面
4、布局与高级组件演示
- airui_table_page.lua - 表格组件演示页面
- airui_tabview.lua - 选项卡组件演示页面
- airui_win.lua - 窗口组件演示页面
- airui_switch_page.lua -多页面切换功能演示
- airui_all_component.lua - 所有组件演示页面
5、字体渲染演示
- hzfont.lua - 矢量字体演示页面
三、准备硬件环境
1、Air1601 开发板
2、1024*600 分辨率 RGB888 屏
3、TYPE-C 数据线 × 1
注意：调试RGB 屏时，需要修改以下几个拨动开关
四、准备软件环境
4.1 软件环境
在开始实践本示例之前，先筹备一下软件环境：
1、烧录工具：Luatools 下载调试工具
2、内核固件：本demo开发测试时使用的固件为Air6101 V1010 版本固件，(使用 AirUI 需要使用 V1004 版本及以上的 固件)，所以你如果要测试本demo时，可以直接使用最新版本的内核固件；如果发现最新版本的内核固件测试有问题，可以使用我们开发本demo时使用的内核固件版本来对比测试。
3、脚本文件：https://gitee.com/openLuat/LuatOS/tree/master/module/Air1601_Air1602/demo/ui/airui
4、lib 脚本文件：使用 Luatools 烧录时，勾选 添加默认 lib 选项，使用默认 lib 脚本文件
准备好软件环境之后，接下来查看如何烧录项目文件到Air1601开发板，将本篇文章中演示使用的项目文件烧录到Air1601开发板中。
4.2 API 介绍
aiui 核心库：https://docs.openluat.com/osapi/core/airui/
五、代码详解
5.1 main.lua
主程序文件 main.lua 是整个项目的入口点。它负责初始化系统环境。
--[[
@module main
@summary exEasyUI组件演示主程序入口
@version 1.0.0
@date 2026.01.27
@author 江访
@usage
本文件是exEasyUI演示程序的主入口，用于选择加载不同的UI组件演示模块。
通过注释/取消注释require语句来运行不同的演示。
]]
--[[
必须定义PROJECT和VERSION变量，Luatools工具会用到这两个变量，远程升级功能也会用到这两个变量
PROJECT：项目名，ascii string类型
可以随便定义，只要不使用,就行
VERSION：项目版本号，ascii string类型
如果使用合宙iot.openluat.com进行远程升级，必须按照"XXX.YYY.ZZZ"三段格式定义：
X、Y、Z各表示1位数字，三个X表示的数字可以相同，也可以不同，同理三个Y和三个Z表示的数字也是可以相同，可以不同
因为历史原因，YYY这三位数字必须存在，但是没有任何用处，可以一直写为000
如果不使用合宙iot.openluat.com进行远程升级，根据自己项目的需求，自定义格式即可
]]
-- main.lua - 程序入口文件
-- 项目名称和版本定义
PROJECT = "AirUI_demo" -- 项目名称，用于标识当前工程
VERSION = "1.0.0" -- 项目版本号
-- 在日志中打印项目名和项目版本号
log.info("ui_demo", PROJECT, VERSION)
-- 设置日志输出风格为样式2（建议调试时开启）
-- log.style(2)
-- 如果内核固件支持wdt看门狗功能，此处对看门狗进行初始化和定时喂狗处理
-- 如果脚本程序死循环卡死，就会无法及时喂狗，最终会自动重启
if wdt then
--配置喂狗超时时间为9秒钟
wdt.init(9000)
--启动一个循环定时器，每隔3秒钟喂一次狗
sys.timerLoopStart(wdt.feed, 3000)
end
-- 如果内核固件支持errDump功能，此处进行配置，【强烈建议打开此处的注释】
-- 因为此功能模块可以记录并且上传脚本在运行过程中出现的语法错误或者其他自定义的错误信息，可以初步分析一些设备运行异常的问题
-- 以下代码是最基本的用法，更复杂的用法可以详细阅读API说明文档
-- 启动errDump日志存储并且上传功能，600秒上传一次
-- if errDump then
-- errDump.config(true, 600)
-- end
-- 使用LuatOS开发的任何一个项目，都强烈建议使用远程升级FOTA功能
-- 可以使用合宙的iot.openluat.com平台进行远程升级
-- 也可以使用客户自己搭建的平台进行远程升级
-- 远程升级的详细用法，可以参考fota的demo进行使用
-- 启动一个循环定时器
-- 每隔3秒钟打印一次总内存，实时的已使用内存，历史最高的已使用内存情况
-- 方便分析内存使用是否有异常
-- sys.timerLoopStart(function()
-- log.info("mem.lua", rtos.meminfo())
-- log.info("mem.sys", rtos.meminfo("sys"))
-- end, 3000)
-- 加载显示驱动
lcd_drv = require("lcd_drv")
-- 加载触摸驱动
tp_drv = require("tp_drv")
-- 引入演示模块（每次只选择一个运行）
require("ui_main") --动态更新标签演示
-- 用户代码已结束
-- 结尾总是这一句
sys.run()
-- sys.run()之后不要加任何语句!!!!!因为添加的任何语句都不会被执行
5.2 airui_home.lua AirUI 演示系统主页
本文件是 AirUI 演示系统的主页，提供所有功能演示的入口。
--[[
@module airui_home
@summary AirUI演示系统主页
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是AirUI演示系统的主页，提供所有功能演示的入口。
]]
local airui_home = {}
-- 页面UI元素
local main_container = nil
local scroll_container = nil
-- 演示模块列表
local demos = {
-- AirUI组件演示
{name = "所有组件演示", icon = airui.SYMBOL_OK, page = "all_component", color = 0x007AFF},
{name = "标签组件", icon = airui.SYMBOL_REFRESH, page = "label", color = 0x4CAF50},
{name = "按钮组件", icon = airui.SYMBOL_LOOP, page = "button", color = 0xF44336},
{name = "容器组件", icon = airui.SYMBOL_SD_CARD, page = "container", color = 0xFF9800},
{name = "进度条组件", icon = airui.SYMBOL_SHUFFLE, page = "bar", color = 0x9C27B0},
{name = "开关组件", icon = airui.SYMBOL_COPY, page = "switch", color = 0x00BCD4},
{name = "下拉框组件", icon = airui.SYMBOL_DOWN, page = "dropdown", color = 0x795548},
{name = "表格组件", icon = airui.SYMBOL_LIST, page = "table", color = 0x607D8B},
{name = "输入框组件", icon = airui.SYMBOL_EDIT, page = "input", color = 0x3F51B5},
{name = "消息框组件", icon = airui.SYMBOL_CALL, page = "msgbox", color = 0xE91E63},
{name = "图片组件", icon = airui.SYMBOL_IMAGE, page = "image", color = 0x8BC34A},
{name = "选项卡组件", icon = airui.SYMBOL_PASTE, page = "tabview", color = 0xFF5722},
{name = "窗口组件", icon = airui.SYMBOL_BELL, page = "win", color = 0x009688},
{name = "页面切换演示", icon = airui.SYMBOL_LEFT, page = "airui_switch_page", color = 0x673AB7},
{name = "矢量字体演示", icon = airui.SYMBOL_EYE_OPEN, page = "hzfont", color = 0x2196F3},
{name = "二维码组件演示", icon = airui.SYMBOL_LOOP, page = "qrcode", color = 0xFF4081},
}
-- 创建主页UI
function airui_home.create_ui()
-- 创建主容器（1024x600）
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF8F9FA,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x007AFF,
})
airui.label({
parent = title_bar,
text = "AirUI演示系统",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 滚动容器
scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF8F9FA,
})
-- 创建网格布局的演示按钮
local button_width = 240 -- 增加按钮宽度
local button_height = 100 -- 增加按钮高度
local columns = 4 -- 增加列数以适应更宽的屏幕
local padding = 15 -- 增加内边距
local y_offset = 0
for i, demo in ipairs(demos) do
local col = (i - 1) % columns
local row = math.floor((i - 1) / columns)
local x = padding + col * (button_width + padding)
local y = y_offset + row * (button_height + padding)
-- 创建按钮容器（卡片样式）
local card = airui.container({
parent = scroll_container,
x = x,
y = y,
w = button_width,
h = button_height,
color = demo.color,
radius = 12,
})
-- 图标标签
airui.label({
parent = card,
text = demo.icon,
x = 15,
y = 20,
w = 40,
h = 40,
size = 30,
})
-- 演示名称标签
airui.label({
parent = card,
text = demo.name,
x = 65,
y = 25,
w = button_width - 75,
h = 50,
size = 16,
on_click = function()
_G.show_page(demo.page)
end
})
end
-- 底部状态栏
local status_bar = airui.container({
parent = main_container,
x = 0,
y = 550,
w = 1024,
h = 50,
color = 0xCFCFCF,
})
airui.label({
parent = status_bar,
text = string.format("共%d个演示 - AirUI %s - 分辨率: 1024x600", #demos, airui.version()),
x = 20,
y = 15,
w = 600,
h = 20,
size = 14,
})
end
-- 初始化页面
function airui_home.init(params)
airui_home.create_ui()
end
-- 清理页面
function airui_home.cleanup()
-- 清理UI元素
main_container = nil
scroll_container = nil
end
return airui_home
5.3 airui_all_component.lua 所有组件演示页面
本文件是所有组件的综合演示页面，展示 AirUI 所有组件的用法。
--[[
@module airui_all_component
@summary 所有组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是所有组件的综合演示页面，展示AirUI所有组件的用法。
]]
local airui_all_component = {}
-- 页面UI元素
local main_container = nil
-- 创建UI
function airui_all_component.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x007AFF,
})
airui.label({
parent = title_bar,
text = "所有组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 组件展示区域 - 使用两列布局
local left_column_x = 20
local right_column_x = 522 -- 1024/2 + 10
local y_offset = 10
local section_height = 100
local column_width = 480
-- 1. 标签组件（左列）
airui.label({
parent = scroll_container,
text = "1. 标签组件 (Label)",
x = left_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_label = airui.label({
parent = scroll_container,
text = "这是一个标签 - 点击我",
x = left_column_x + 10,
y = y_offset + 35,
w = 200,
h = 40,
size = 16,
on_click = function()
demo_label:set_text("标签被点击")
end
})
-- 2. 按钮组件（右列）
airui.label({
parent = scroll_container,
text = "2. 按钮组件 (Button)",
x = right_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_button = airui.button({
parent = scroll_container,
x = right_column_x + 10,
y = y_offset + 35,
w = 150,
h = 45,
text = "点击我",
size = 16,
on_click = function()
log.info("all_component", "按钮被点击")
end
})
y_offset = y_offset + section_height
-- 3. 容器组件（左列）
airui.label({
parent = scroll_container,
text = "3. 容器组件 (Container)",
x = left_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_container = airui.container({
parent = scroll_container,
x = left_column_x + 10,
y = y_offset + 35,
w = 450,
h = 80,
color = 0xE3F2FD,
radius = 10,
})
airui.label({
parent = demo_container,
text = "容器内的标签",
x = 20,
y = 25,
w = 200,
h = 30,
size = 16,
})
-- 4. 进度条组件（右列）
airui.label({
parent = scroll_container,
text = "4. 进度条组件 (Progress Bar)",
x = right_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_bar = airui.bar({
parent = scroll_container,
x = right_column_x + 10,
y = y_offset + 35,
w = 300,
h = 30,
value = 65,
radius = 15,
indicator_color = 0x4CAF50,
})
y_offset = y_offset + section_height + 50
-- 5. 开关组件（左列）
airui.label({
parent = scroll_container,
text = "5. 开关组件 (Switch)",
x = left_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_switch = airui.switch({
parent = scroll_container,
x = left_column_x + 10,
y = y_offset + 35,
w = 80,
h = 40,
checked = true,
on_change = function(state)
log.info("all_component", "开关状态: " .. tostring(state))
end
})
-- 6. 下拉框组件（右列）
airui.label({
parent = scroll_container,
text = "6. 下拉框组件 (Dropdown)",
x = right_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_dropdown = airui.dropdown({
parent = scroll_container,
x = right_column_x + 10,
y = y_offset + 35,
w = 250,
h = 45,
options = { "选项1", "选项2", "选项3", "选项4" },
default_index = 0,
on_change = function(idx)
log.info("all_component", "选择了选项: " .. (idx + 1))
end
})
y_offset = y_offset + section_height
-- 7. 表格组件（左列）
airui.label({
parent = scroll_container,
text = "7. 表格组件 (Table)",
x = left_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_table = airui.table({
parent = scroll_container,
x = left_column_x + 10,
y = y_offset + 35,
w = 450,
h = 120,
rows = 4,
cols = 4,
col_width = { 100, 100, 100, 100 },
border_color = 0x607D8B,
})
demo_table:set_cell_text(0, 0, "姓名")
demo_table:set_cell_text(0, 1, "年龄")
demo_table:set_cell_text(0, 2, "城市")
demo_table:set_cell_text(0, 3, "职业")
demo_table:set_cell_text(1, 0, "张三")
demo_table:set_cell_text(1, 1, "25")
demo_table:set_cell_text(1, 2, "北京")
demo_table:set_cell_text(1, 3, "工程师")
-- 8. 输入框组件（右列）
airui.label({
parent = scroll_container,
text = "8. 输入框组件 (Textarea)",
x = right_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_textarea = airui.textarea({
parent = scroll_container,
x = right_column_x + 10,
y = y_offset + 35,
w = 300,
h = 80,
placeholder = "请输入文本...",
max_len = 100,
size = 16,
keyboard = keyboard1,
})
-- 创建键盘
local keyboard1 = airui.keyboard({
x = 0,
y = 0,
w = 600,
h = 200,
mode = "text",
target = demo_textarea,
auto_hide = true,
})
y_offset = y_offset + 200
-- 9. 消息框组件（左列）
airui.label({
parent = scroll_container,
text = "9. 消息框组件 (Msgbox)",
x = left_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_msgbox_btn = airui.button({
parent = scroll_container,
x = left_column_x + 10,
y = y_offset + 35,
w = 180,
h = 50,
text = "显示消息框",
size = 16,
on_click = function()
local msg = airui.msgbox({
text = "这是一个消息框演示",
buttons = { "确定", "取消" },
on_action = function(self, label)
if label == "确定" then
self:hide()
else
self:hide()
end
end
})
msg:show()
end
})
-- 10. 图片组件（右列）
airui.label({
parent = scroll_container,
text = "10. 图片组件 (Image)",
x = right_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_image = airui.image({
parent = scroll_container,
x = right_column_x + 10,
y = y_offset + 35,
w = 120,
h = 120,
src = "/luadb/logo.jpg",
on_click = function()
log.info("all_component", "图片被点击")
end
})
y_offset = y_offset + 180
-- 11. 选项卡组件（左列）
airui.label({
parent = scroll_container,
text = "11. 选项卡组件 (Tabview)",
x = left_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_tabview = airui.tabview({
parent = scroll_container,
x = left_column_x + 10,
y = y_offset + 35,
w = 450,
h = 200,
tabs = { "标签页1", "标签页2", "标签页3" },
active = 0,
})
-- 获取页面内容并添加标签
local tab1_content = demo_tabview:get_content(0)
if tab1_content then
airui.label({
parent = tab1_content,
text = "标签页1的内容区域",
x = 30,
y = 30,
w = 390,
h = 40,
size = 16,
})
end
-- 12. 窗口组件（右列）
airui.label({
parent = scroll_container,
text = "12. 窗口组件 (Window)",
x = right_column_x,
y = y_offset,
w = column_width,
h = 25,
size = 16,
})
local demo_window_btn = airui.button({
parent = scroll_container,
x = right_column_x + 10,
y = y_offset + 35,
w = 180,
h = 50,
text = "打开窗口",
size = 16,
on_click = function()
local win = airui.win({
parent = airui.screen,
title = "演示窗口",
x = 300,
y = 150,
w = 400,
h = 300,
close_btn = true,
on_close = function(self)
log.info("all_component", "窗口关闭")
end
})
win:add_content(airui.label({
text = "这是一个窗口内容演示",
x = 30,
y = 30,
w = 340,
h = 40,
size = 16,
}))
win:add_content(airui.button({
text = "关闭窗口",
x = 130,
y = 100,
w = 140,
h = 50,
size = 16,
on_click = function()
win:close()
end
}))
end
})
-- 底部信息
airui.label({
parent = main_container,
text = "AirUI组件综合演示 - 1024x600分辨率 共展示12个AirUI组件",
x = 20,
y = 570,
w = 500,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_all_component.init(params)
airui_all_component.create_ui()
end
-- 清理页面
function airui_all_component.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_all_component
5.4 airui_bar.lua 进度条组件演示页面
本文件是进度条组件的演示页面，展示进度条的各种用法。
--[[
@module airui_bar
@summary 进度条组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是进度条组件的演示页面，展示进度条的各种用法。
]]
local airui_bar = {}
-- 页面UI元素
local main_container = nil
local progress_value = 0
local value_label
local update_timer
local animated_bar
-- 创建UI
function airui_bar.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x9C27B0,
})
airui.label({
parent = title_bar,
text = "进度条组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local section_height = 100
-- 示例1: 基本进度条（左列）
airui.label({
parent = scroll_container,
text = "示例1: 基本进度条",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local basic_bar = airui.bar({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 400,
h = 30,
value = 30,
min = 0,
max = 100,
radius = 15,
indicator_color = 0x4CAF50,
})
airui.label({
parent = scroll_container,
text = "30%",
x = left_column_x + 430,
y = y_offset + 40,
w = 50,
h = 30,
size = 16,
})
-- 示例2: 带边框的进度条（右列）
airui.label({
parent = scroll_container,
text = "示例2: 带边框进度条",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local bordered_bar = airui.bar({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 400,
h = 35,
value = 50,
min = 0,
max = 100,
radius = 17,
border_width = 3,
border_color = 0x9C27B0,
indicator_color = 0x9C27B0,
bg_color = 0xF3E5F5,
})
airui.label({
parent = scroll_container,
text = "50%",
x = right_column_x + 430,
y = y_offset + 40,
w = 50,
h = 30,
size = 16,
})
y_offset = y_offset + section_height
-- 示例3: 动画进度条（左列）
airui.label({
parent = scroll_container,
text = "示例3: 动画进度条",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
-- 显示当前值
value_label = airui.label({
parent = scroll_container,
text = "当前值: 0%",
x = left_column_x + 360,
y = y_offset + 45,
w = 120,
h = 30,
size = 16,
})
animated_bar = airui.bar({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 320,
h = 35,
value = 0,
min = 0,
max = 100,
radius = 17,
indicator_color = 0x2196F3,
})
-- 控制按钮
local start_btn = airui.button({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 85,
w = 120,
h = 50,
text = "开始/暂停",
size = 16,
on_click = function(self)
if update_timer then
sys.timerStop(update_timer)
update_timer = nil
else
update_timer = sys.timerLoopStart(function()
local current = animated_bar:get_value()
if current >= 100 then
current = 0
else
current = current + 5
end
animated_bar:set_value(current, true) -- 启用动画
value_label:set_text("当前值: "..current.."%") -- 更新显示
progress_value = current
if current >= 100 then
sys.timerStop(update_timer)
update_timer = nil
end
end, 200)
end
end
})
local reset_btn = airui.button({
parent = scroll_container,
x = left_column_x + 160,
y = y_offset + 85,
w = 120,
h = 50,
text = "重置",
size = 16,
on_click = function()
if update_timer then
sys.timerStop(update_timer)
update_timer = nil
start_btn:set_text("开始动画")
end
animated_bar:set_value(0, true)
value_label:set_text("当前值: 0%")
end
})
local set_btn = airui.button({
parent = scroll_container,
x = left_column_x + 300,
y = y_offset + 85,
w = 120,
h = 50,
text = "设为75%",
size = 16,
on_click = function()
if update_timer then
sys.timerStop(update_timer)
update_timer = nil
start_btn:set_text("开始动画")
end
animated_bar:set_value(75, true)
value_label:set_text("当前值: 75%")
end
})
-- 示例4: 不同颜色进度条（右列）
airui.label({
parent = scroll_container,
text = "示例4: 不同颜色进度条",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local color_bar = airui.bar({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 400,
h = 35,
value = 75,
min = 0,
max = 100,
radius = 17,
indicator_color = 0xFF5722,
})
airui.label({
parent = scroll_container,
text = "75%",
x = right_column_x + 430,
y = y_offset + 40,
w = 50,
h = 30,
size = 16,
})
-- 颜色选择按钮
local color_btn1 = airui.button({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 85,
w = 100,
h = 40,
text = "红色",
size = 14,
on_click = function()
color_bar:set_indicator_color(0xF44336)
end
})
local color_btn2 = airui.button({
parent = scroll_container,
x = right_column_x + 130,
y = y_offset + 85,
w = 100,
h = 40,
text = "绿色",
size = 14,
on_click = function()
color_bar:set_indicator_color(0x4CAF50)
end
})
local color_btn3 = airui.button({
parent = scroll_container,
x = right_column_x + 240,
y = y_offset + 85,
w = 100,
h = 40,
text = "蓝色",
size = 14,
on_click = function()
color_bar:set_indicator_color(0x2196F3)
end
})
local color_btn4 = airui.button({
parent = scroll_container,
x = right_column_x + 350,
y = y_offset + 85,
w = 100,
h = 40,
text = "紫色",
size = 14,
on_click = function()
color_bar:set_indicator_color(0x9C27B0)
end
})
y_offset = y_offset + section_height + 70
-- 示例5: 不同进度的进度条（左列）
airui.label({
parent = scroll_container,
text = "示例5: 不同进度示例",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local bar1 = airui.bar({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 320,
h = 25,
value = 25,
indicator_color = 0xF44336,
})
airui.label({
parent = scroll_container,
text = "25% - 低进度",
x = left_column_x + 350,
y = y_offset + 40,
w = 120,
h = 25,
size = 14,
})
local bar2 = airui.bar({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 75,
w = 320,
h = 25,
value = 50,
indicator_color = 0xFF9800,
})
airui.label({
parent = scroll_container,
text = "50% - 中等进度",
x = left_column_x + 350,
y = y_offset + 75,
w = 120,
h = 25,
size = 14,
})
local bar3 = airui.bar({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 110,
w = 320,
h = 25,
value = 90,
indicator_color = 0x4CAF50,
})
airui.label({
parent = scroll_container,
text = "90% - 高进度",
x = left_column_x + 350,
y = y_offset + 110,
w = 120,
h = 25,
size = 14,
})
-- 示例6: 自定义背景色（右列）
airui.label({
parent = scroll_container,
text = "示例6: 自定义背景色",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local custom_bar = airui.bar({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 400,
h = 35,
value = 65,
radius = 17,
indicator_color = 0xFF4081,
bg_color = 0xFCE4EC,
border_width = 2,
border_color = 0xFF4081,
})
airui.label({
parent = scroll_container,
text = "65% - 粉色主题",
x = right_column_x + 20,
y = y_offset + 85,
w = 120,
h = 35,
size = 14,
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 进度条支持动画、颜色自定义和边框样式",
x = 20,
y = 560,
w = 500,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_bar.init(params)
progress_value = 0
airui_bar.create_ui()
end
-- 清理页面
function airui_bar.cleanup()
sys.timerStop(update_timer)
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_bar
5.5 airui_button.lua 按钮组件演示页面
本文件是按钮组件的演示页面，展示按钮的各种用法。
--[[
@module airui_button
@summary 按钮组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是按钮组件的演示页面，展示按钮的各种用法。
]]
local airui_button = {}
-- 页面UI元素
local main_container = nil
local click_count = 0
-- 创建UI
function airui_button.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0xF44336,
})
airui.label({
parent = title_bar,
text = "按钮组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列网格布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local card_width = 480
local card_height = 200
local card_gap_y = 20
-- 示例1: 基本按钮（左列）
local card1 = airui.container({
parent = scroll_container,
x = left_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card1,
text = "示例1: 基本按钮",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card1,
text = "点击按钮触发事件，支持不同大小",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local basic_btn = airui.button({
parent = card1,
x = 50,
y = 85,
w = 180,
h = 55,
text = "点击我",
size = 18,
on_click = function()
log.info("button", "基本按钮被点击")
click_count = click_count + 1
local msg = airui.msgbox({
text = "按钮被点击 " .. click_count .. " 次",
buttons = { "确定" },
timeout = 1500
})
msg:show()
end
})
local small_btn = airui.button({
parent = card1,
x = 250,
y = 85,
w = 120,
h = 40,
text = "小按钮",
size = 14,
on_click = function()
log.info("button", "小按钮被点击")
end
})
local large_btn = airui.button({
parent = card1,
x = 380,
y = 85,
w = 80,
h = 80,
text = "大",
size = 20,
on_click = function()
log.info("button", "大按钮被点击")
end
})
-- 示例2: 不同样式的按钮（右列）
local card2 = airui.container({
parent = scroll_container,
x = right_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card2,
text = "示例2: 不同样式的按钮",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card2,
text = "支持圆角、直角和不同颜色的按钮",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local round_btn = airui.button({
parent = card2,
x = 50,
y = 85,
w = 150,
h = 55,
text = "圆角按钮",
size = 16,
radius = 30,
on_click = function()
log.info("button", "圆角按钮被点击")
end
})
local square_btn = airui.button({
parent = card2,
x = 220,
y = 85,
w = 150,
h = 55,
text = "直角按钮",
size = 16,
radius = 0,
on_click = function()
log.info("button", "直角按钮被点击")
end
})
local colorful_btn = airui.button({
parent = card2,
x = 390,
y = 85,
w = 150,
h = 55,
text = "彩色按钮",
size = 16,
color = 0x2196F3,
on_click = function()
log.info("button", "彩色按钮被点击")
end
})
y_offset = y_offset + card_height + card_gap_y
-- 示例3: 动态更新文本（左列）
local card3 = airui.container({
parent = scroll_container,
x = left_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card3,
text = "示例3: 动态更新文本",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card3,
text = "按钮文本可以动态更新，显示点击次数",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local dynamic_count = 0
local dynamic_label = airui.label({
parent = card3,
text = "点击次数: 0",
x = 300,
y = 105,
w = 160,
h = 30,
size = 16,
})
local dynamic_btn = airui.button({
parent = card3,
x = 50,
y = 85,
w = 200,
h = 55,
text = "点击计数",
size = 18,
on_click = function()
dynamic_count = dynamic_count + 1
dynamic_label:set_text("点击次数: " .. dynamic_count)
log.info("button", "点击计数: " .. dynamic_count)
end
})
local update_text_btn = airui.button({
parent = card3,
x = 50,
y = 155,
w = 200,
h = 45,
text = "更新文本",
size = 16,
on_click = function(self)
local texts = {"新文本1", "新文本2", "新文本3", "恢复原文本"}
local random_text = texts[math.random(1, #texts)]
self:set_text(random_text)
log.info("button", "按钮文本更新为: " .. random_text)
end
})
math.randomseed(os.time())
-- 示例4: 按钮组（右列）
local card4 = airui.container({
parent = scroll_container,
x = right_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card4,
text = "示例4: 按钮组",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card4,
text = "多个按钮组合使用，形成功能组",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local btn_group_container = airui.container({
parent = card4,
x = 50,
y = 85,
w = 380,
h = 100,
color = 0xE0E0E0,
radius = 10,
})
local btn1 = airui.button({
parent = btn_group_container,
x = 20,
y = 20,
w = 100,
h = 45,
text = "选项1",
size = 14,
on_click = function()
log.info("button", "选项1被选中")
end
})
local btn2 = airui.button({
parent = btn_group_container,
x = 140,
y = 20,
w = 100,
h = 45,
text = "选项2",
size = 14,
on_click = function()
log.info("button", "选项2被选中")
end
})
local btn3 = airui.button({
parent = btn_group_container,
x = 260,
y = 20,
w = 100,
h = 45,
text = "选项3",
size = 14,
on_click = function()
log.info("button", "选项3被选中")
end
})
y_offset = y_offset + card_height + card_gap_y
-- 示例5: 图标按钮（左列）
local card5 = airui.container({
parent = scroll_container,
x = left_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card5,
text = "示例5: 图标按钮",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card5,
text = "按钮可以包含图标和文本",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local icon_btn1 = airui.button({
parent = card5,
x = 50,
y = 85,
w = 200,
h = 60,
symbol = airui.SYMBOL_SETTINGS,
text = " 设置",
size = 16,
on_click = function()
log.info("button", "设置按钮被点击")
end
})
local icon_btn2 = airui.button({
parent = card5,
x = 280,
y = 85,
w = 200,
h = 60,
symbol = airui.SYMBOL_REFRESH,
text = " 刷新",
size = 16,
on_click = function()
log.info("button", "刷新按钮被点击")
end
})
local icon_btn3 = airui.button({
parent = card5,
x = 50,
y = 160,
w = 200,
h = 60,
symbol = airui.SYMBOL_DOWNLOAD,
text = " 下载",
size = 16,
on_click = function()
log.info("button", "下载按钮被点击")
end
})
local icon_btn4 = airui.button({
parent = card5,
x = 280,
y = 160,
w = 200,
h = 60,
symbol = airui.SYMBOL_UPLOAD,
text = " 上传",
size = 16,
on_click = function()
log.info("button", "上传按钮被点击")
end
})
-- 示例6: 按钮控制（右列）
local card6 = airui.container({
parent = scroll_container,
x = right_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card6,
text = "示例6: 按钮控制",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card6,
text = "动态控制按钮的启用、禁用和销毁",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local control_btn = airui.button({
parent = card6,
x = 50,
y = 85,
w = 180,
h = 55,
text = "可控制按钮",
size = 18,
on_click = function(self)
log.info("button", "控制按钮被点击")
end
})
local disable_btn = airui.button({
parent = card6,
x = 250,
y = 85,
w = 180,
h = 55,
text = "禁用按钮",
size = 16,
on_click = function()
-- 这里需要根据AirUI的API来实现禁用功能
log.info("button", "禁用控制按钮")
local msg = airui.msgbox({
text = "禁用按钮功能需要API支持",
buttons = { "确定" },
timeout = 1500
})
msg:show()
end
})
local destroy_btn = airui.button({
parent = card6,
x = 50,
y = 155,
w = 180,
h = 55,
text = "销毁按钮",
size = 16,
on_click = function()
control_btn:destroy()
log.info("button", "已销毁控制按钮")
local msg = airui.msgbox({
text = "控制按钮已被销毁",
buttons = { "确定" },
timeout = 1500
})
msg:show()
end
})
local create_btn = airui.button({
parent = card6,
x = 250,
y = 155,
w = 180,
h = 55,
text = "创建新按钮",
size = 16,
on_click = function()
log.info("button", "创建新按钮")
local new_btn = airui.button({
parent = card6,
x = 50,
y = 85,
w = 180,
h = 55,
text = "新按钮",
size = 18,
on_click = function()
log.info("button", "新按钮被点击")
end
})
control_btn = new_btn
end
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 按钮支持点击事件、动态更新、多种样式和图标显示",
x = 20,
y = 560,
w = 600,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_button.init(params)
click_count = 0
airui_button.create_ui()
end
-- 清理页面
function airui_button.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_button
5.6 airui_container.lua 容器组件演示页面
本文件是容器组件的演示页面，展示容器的各种用法。
--[[
@module airui_container
@summary 容器组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是容器组件的演示页面，展示容器的各种用法。
]]
local airui_container = {}
-- 页面UI元素
local main_container = nil
-- 创建UI
function airui_container.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0xFF9800,
})
airui.label({
parent = title_bar,
text = "容器组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local section_height = 130
-- 示例1: 基本容器（左列）
airui.label({
parent = scroll_container,
text = "示例1: 基本容器",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local basic_container = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 100,
color = 0xE3F2FD,
radius = 12,
})
airui.label({
parent = basic_container,
text = "这是一个基本容器",
x = 20,
y = 15,
w = 400,
h = 30,
size = 16,
})
airui.label({
parent = basic_container,
text = "容器可以作为其他组件的父容器",
x = 20,
y = 55,
w = 400,
h = 30,
size = 14,
})
-- 示例2: 圆角容器（右列）
airui.label({
parent = scroll_container,
text = "示例2: 圆角容器",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local rounded_container = airui.container({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 440,
h = 100,
color = 0xFFEBEE,
radius = 30,
})
airui.label({
parent = rounded_container,
text = "圆角半径: 30",
x = 20,
y = 35,
w = 400,
h = 30,
size = 16,
})
y_offset = y_offset + section_height + 20
-- 示例3: 嵌套容器（左列）
airui.label({
parent = scroll_container,
text = "示例3: 嵌套容器",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local parent_container = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 150,
color = 0xE8F5E8,
radius = 12,
})
local child1 = airui.container({
parent = parent_container,
x = 20,
y = 20,
w = 180,
h = 60,
color = 0xC8E6C9,
radius = 8,
})
airui.label({
parent = child1,
text = "子容器1",
x = 20,
y = 20,
w = 140,
h = 20,
size = 14,
})
local child2 = airui.container({
parent = parent_container,
x = 240,
y = 20,
w = 180,
h = 60,
color = 0xA5D6A7,
radius = 8,
})
airui.label({
parent = child2,
text = "子容器2",
x = 20,
y = 20,
w = 140,
h = 20,
size = 14,
})
local child3 = airui.container({
parent = parent_container,
x = 20,
y = 90,
w = 400,
h = 40,
color = 0x81C784,
radius = 6,
})
airui.label({
parent = child3,
text = "另一个子容器",
x = 20,
y = 10,
w = 360,
h = 20,
size = 14,
})
-- 示例4: 不同颜色的容器（右列）
airui.label({
parent = scroll_container,
text = "示例4: 不同颜色的容器",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local color_container1 = airui.container({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 130,
h = 70,
color = 0xF44336,
radius = 10,
})
airui.label({
parent = color_container1,
text = "红色",
x = 20,
y = 25,
w = 90,
h = 20,
size = 14,
})
local color_container2 = airui.container({
parent = scroll_container,
x = right_column_x + 165,
y = y_offset + 40,
w = 130,
h = 70,
color = 0x4CAF50,
radius = 10,
})
airui.label({
parent = color_container2,
text = "绿色",
x = 20,
y = 25,
w = 90,
h = 20,
size = 14,
})
local color_container3 = airui.container({
parent = scroll_container,
x = right_column_x + 310,
y = y_offset + 40,
w = 130,
h = 70,
color = 0x2196F3,
radius = 10,
})
airui.label({
parent = color_container3,
text = "蓝色",
x = 20,
y = 25,
w = 90,
h = 20,
size = 14,
})
y_offset = y_offset + 200
-- 示例5: 动态显示/隐藏容器（左列）
airui.label({
parent = scroll_container,
text = "示例5: 显示/隐藏容器",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local toggle_container = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 250,
h = 80,
color = 0xE1BEE7,
radius = 12,
})
airui.label({
parent = toggle_container,
text = "可隐藏的容器",
x = 20,
y = 30,
w = 210,
h = 20,
size = 16,
})
local hide_btn = airui.button({
parent = scroll_container,
x = left_column_x + 290,
y = y_offset + 40,
w = 120,
h = 35,
text = "隐藏",
size = 16,
on_click = function(self)
if toggle_container then
toggle_container:hide()
end
end
})
local show_btn = airui.button({
parent = scroll_container,
x = left_column_x + 290,
y = y_offset + 80,
w = 120,
h = 35,
text = "显示",
size = 16,
on_click = function(self)
if toggle_container then
toggle_container:show()
end
end
})
-- 示例6: 动态改变颜色（右列）
airui.label({
parent = scroll_container,
text = "示例6: 动态改变颜色",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local color_container = airui.container({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 300,
h = 80,
color = 0x2196F3,
radius = 12,
})
airui.label({
parent = color_container,
text = "点击按钮改变颜色",
x = 20,
y = 30,
w = 260,
h = 20,
size = 16,
})
local color_btn = airui.button({
parent = scroll_container,
x = right_column_x + 340,
y = y_offset + 40,
w = 120,
h = 35,
text = "随机颜色",
size = 16,
on_click = function()
local colors = {0xFF5722, 0x4CAF50, 0x9C27B0, 0xFF9800, 0x00BCD4, 0x795548, 0x607D8B}
local random_color = colors[math.random(1, #colors)]
color_container:set_color(random_color)
end
})
local reset_btn = airui.button({
parent = scroll_container,
x = right_column_x + 340,
y = y_offset + 80,
w = 120,
h = 35,
text = "重置颜色",
size = 16,
on_click = function()
color_container:set_color(0x2196F3)
end
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 容器是布局的基础组件，支持嵌套和动态样式",
x = 20,
y = 560,
w = 500,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_container.init(params)
math.randomseed(os.time())
airui_container.create_ui()
end
-- 清理页面
function airui_container.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_container
5.7 airui_dropdown.lua 下拉框组件演示页面
本文件是下拉框组件的演示页面，展示下拉框的各种用法。
--[[
@module airui_dropdown
@summary 下拉框组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是下拉框组件的演示页面，展示下拉框的各种用法。
]]
local airui_dropdown = {}
-- 页面UI元素
local main_container = nil
-- 创建UI
function airui_dropdown.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x795548,
})
airui.label({
parent = title_bar,
text = "下拉框组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local section_height = 100
-- 示例1: 基本下拉框（左列）
airui.label({
parent = scroll_container,
text = "示例1: 基本下拉框",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
-- 显示选中项
local selected_label1 = airui.label({
parent = scroll_container,
text = "当前选中: 选项1",
x = left_column_x + 350,
y = y_offset + 50,
w = 150,
h = 30,
size = 14,
})
local basic_dropdown = airui.dropdown({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 45,
w = 300,
h = 45,
options = {"选项1", "选项2", "选项3", "选项4", "选项5", "选项6"},
default_index = 0,
on_change = function(self, index)
-- 更新标签显示选择结果
local texts = {"选项1", "选项2", "选项3", "选项4", "选项5", "选项6"}
selected_label1:set_text("当前选中: " .. texts[index + 1])
end
})
-- 示例2: 不同大小的下拉框（右列）
airui.label({
parent = scroll_container,
text = "示例2: 不同大小的下拉框",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local small_dropdown = airui.dropdown({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 45,
w = 120,
h = 35,
options = {"小号选项1", "小号选项2"},
default_index = 0,
})
local large_dropdown = airui.dropdown({
parent = scroll_container,
x = right_column_x + 170,
y = y_offset + 45,
w = 200,
h = 50,
options = {"大号下拉框选项1", "大号下拉框选项2", "大号下拉框选项3"},
default_index = 0,
})
y_offset = y_offset + section_height + 20
-- 示例3: 联动下拉框（左列）
airui.label({
parent = scroll_container,
text = "示例3: 联动下拉框",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local dropdown_container = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 460,
h = 200,
color = 0xEFEBE9,
radius = 12,
})
-- 省份选择
airui.label({
parent = dropdown_container,
text = "省份:",
x = 30,
y = 30,
w = 80,
h = 30,
size = 16,
})
local province_dropdown = airui.dropdown({
parent = dropdown_container,
x = 120,
y = 25,
w = 300,
h = 40,
options = {"北京市", "上海市", "广东省", "江苏省", "浙江省", "四川省"},
default_index = 0,
})
-- 城市选择
airui.label({
parent = dropdown_container,
text = "城市:",
x = 30,
y = 85,
w = 80,
h = 30,
size = 16,
})
local city_dropdown = airui.dropdown({
parent = dropdown_container,
x = 120,
y = 80,
w = 300,
h = 40,
options = {"请先选择省份"},
default_index = 0,
})
-- 联动选择按钮
local select_btn = airui.button({
parent = dropdown_container,
x = 120,
y = 140,
w = 300,
h = 45,
text = "确认选择",
size = 16,
on_click = function()
local province_idx = province_dropdown:get_selected()
local city_idx = city_dropdown:get_selected()
local provinces = {"北京市", "上海市", "广东省", "江苏省", "浙江省", "四川省"}
log.info("dropdown", "选择了省份: " .. provinces[province_idx + 1])
end
})
-- 示例4: 获取和设置选中值（右列）
airui.label({
parent = scroll_container,
text = "示例4: 获取和设置选中值",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local value_container = airui.container({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 460,
h = 200,
color = 0xE8EAF6,
radius = 12,
})
local value_dropdown = airui.dropdown({
parent = value_container,
x = 30,
y = 30,
w = 300,
h = 45,
options = {"红色", "绿色", "蓝色", "黄色", "紫色", "橙色", "青色"},
default_index = 2,
})
-- 获取选中值按钮
local get_btn = airui.button({
parent = value_container,
x = 30,
y = 90,
w = 140,
h = 45,
text = "获取选中值",
size = 16,
on_click = function()
local idx = value_dropdown:get_selected()
local colors = {"红色", "绿色", "蓝色", "黄色", "紫色", "橙色", "青色"}
local msg = airui.msgbox({
text = "当前选中: " .. colors[idx + 1],
buttons = {"确定"},
timeout = 2000
})
msg:show()
end
})
-- 设置选中项按钮
local set_btn = airui.button({
parent = value_container,
x = 190,
y = 90,
w = 140,
h = 45,
text = "设为黄色",
size = 16,
on_click = function()
value_dropdown:set_selected(3) -- 黄色是第4项，索引为3
end
})
-- 重置按钮
local reset_btn = airui.button({
parent = value_container,
x = 30,
y = 145,
w = 300,
h = 40,
text = "重置为默认（蓝色）",
size = 16,
on_click = function()
value_dropdown:set_selected(2)
end
})
y_offset = y_offset + 250
-- 示例5: 下拉框组（左列）
airui.label({
parent = scroll_container,
text = "示例5: 下拉框组",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local group_container = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 460,
h = 180,
color = 0xF5F5F5,
radius = 12,
})
-- 日期选择
airui.label({
parent = group_container,
text = "年:",
x = 20,
y = 20,
w = 50,
h = 30,
size = 14,
})
local year_dropdown = airui.dropdown({
parent = group_container,
x = 80,
y = 15,
w = 120,
h = 35,
options = {"2024", "2025", "2026", "2027", "2028"},
default_index = 1,
})
airui.label({
parent = group_container,
text = "月:",
x = 220,
y = 20,
w = 50,
h = 30,
size = 14,
})
local month_dropdown = airui.dropdown({
parent = group_container,
x = 280,
y = 15,
w = 120,
h = 35,
options = {"1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"},
default_index = 0,
})
-- 时间选择
airui.label({
parent = group_container,
text = "时:",
x = 20,
y = 70,
w = 50,
h = 30,
size = 14,
})
local hour_dropdown = airui.dropdown({
parent = group_container,
x = 80,
y = 65,
w = 120,
h = 35,
options = {"00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"},
default_index = 8,
})
airui.label({
parent = group_container,
text = "分:",
x = 220,
y = 70,
w = 50,
h = 30,
size = 14,
})
local minute_dropdown = airui.dropdown({
parent = group_container,
x = 280,
y = 65,
w = 120,
h = 35,
options = {"00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"},
default_index = 0,
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 下拉框支持选项选择、联动和动态控制",
x = 20,
y = 560,
w = 500,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_dropdown.init(params)
airui_dropdown.create_ui()
end
-- 清理页面
function airui_dropdown.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_dropdown
5.8 airui_qrcode.lua 二维码组件演示页面
本文件演示airui.qrcode组件的用法，展示二维码生成。
--[[
@module qrcode_page
@summary 二维码组件演示
@version 1.0
@date 2026.03.09
@author 江访
@usage
本文件演示airui.qrcode组件的用法，展示二维码生成。
]]
local airui_qecode = {}
-- 页面UI元素
local main_container = nil
-- 创建UI
function airui_qecode.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x4CAF50,
})
airui.label({
parent = title_bar,
text = "二维码组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 创建二维码
local qrcode = airui.qrcode({
x = 330,
y = 100,
size = 360, -- 正方形尺寸
data = "https://docs.openluat.com/", -- 二维码内容
dark_color = 0x000000, -- 深色模块颜色
light_color = 0xFFFFFF, -- 浅色模块颜色
quiet_zone = true -- 四周留白
})
if not qrcode then
log.error("qrcode", "创建二维码失败")
return
end
-- 添加一个标签说明
airui.label({
x = 300,
y = 468,
w = 720,
h = 40,
text = "扫描上方二维码访问 LuatOS 官网",
font_size = 28,
color = 0x333333
})
end
-- 初始化页面
function airui_qecode.init(params)
airui_qecode.create_ui()
end
-- 清理页面
function airui_qecode.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_qecode
5.9 airui_hzfont.lua 矢量字体演示页面
本文件是矢量字体的演示页面，展示中文字体的各种用法。
--[[
@module airui_hzfont
@summary 矢量字体演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage 本文件是矢量字体的演示页面，展示中文字体的各种用法。
]]
local airui_hzfont = {}
----------------------------------------------------------------
-- 页面UI元素
----------------------------------------------------------------
local main_container = nil
local current_font = nil
----------------------------------------------------------------
-- 辅助函数：创建带标题的容器
----------------------------------------------------------------
local function create_demo_container(parent, title, x, y, width, height)
local container = airui.container({
parent = parent,
x = x,
y = y,
w = width,
h = height,
color = 0xFFFFFF,
radius = 8,
})
airui.label({
parent = container,
text = title,
x = 15,
y = 10,
w = width - 30,
h = 30,
color = 0x333333,
size = 16,
})
return container
end
----------------------------------------------------------------
-- 创建UI
----------------------------------------------------------------
function airui_hzfont.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x2196F3,
})
airui.label({
parent = title_bar,
text = "矢量字体演示",
x = 20,
y = 15,
w = 300,
h = 30,
color = 0xFFFFFF,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列网格布局
local left_column_x = 20
local right_column_x = 522
local current_y = 10
local container_width = 480
local container_height = 120
local container_gap_y = 15
--------------------------------------------------------------------
-- 示例1: 基本中文显示（左列）
--------------------------------------------------------------------
local demo1_container = create_demo_container(scroll_container, "示例1: 基本中文显示", left_column_x, current_y, container_width, container_height)
airui.label({
parent = demo1_container,
text = "你好，世界！",
x = 30,
y = 50,
w = 420,
h = 50,
color = 0x333333,
size = 24,
})
-- 示例2: 长文本中文显示（右列）
local demo2_container = create_demo_container(scroll_container, "示例2: 长文本中文", right_column_x, current_y, container_width, container_height)
local long_text = "矢量字体支持高质量的中文显示，可以在不同分辨率下保持清晰，提供更好的视觉体验。"
airui.label({
parent = demo2_container,
text = long_text,
x = 30,
y = 50,
w = 420,
h = 60,
color = 0x333333,
size = 16,
})
current_y = current_y + container_height + container_gap_y
--------------------------------------------------------------------
-- 示例3: 中英文混合（左列）
--------------------------------------------------------------------
local demo3_container = create_demo_container(scroll_container, "示例3: 中英文混合", left_column_x, current_y, container_width, container_height)
airui.label({
parent = demo3_container,
text = "中文 Chinese 混合 Mixed 文本 Text 演示 Demo",
x = 30,
y = 50,
w = 420,
h = 50,
color = 0x333333,
size = 20,
})
-- 示例4: 常用汉字显示（右列）
local demo4_container = create_demo_container(scroll_container, "示例4: 常用汉字", right_column_x, current_y, container_width, container_height)
airui.label({
parent = demo4_container,
text = "天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏",
x = 30,
y = 50,
w = 420,
h = 50,
color = 0x333333,
size = 18,
})
current_y = current_y + container_height + container_gap_y
--------------------------------------------------------------------
-- 示例5: 数字和标点（左列）
--------------------------------------------------------------------
local demo5_container = create_demo_container(scroll_container, "示例5: 数字标点", left_column_x, current_y, container_width, container_height)
airui.label({
parent = demo5_container,
text = "数字: 1234567890 标点: ，。！？；：\"'（）【】《》",
x = 30,
y = 40,
w = 420,
h = 60,
color = 0x333333,
size = 16,
})
-- 示例6: 字体大小对比（右列）
local demo6_container = create_demo_container(scroll_container, "示例6: 字体大小对比", right_column_x, current_y, container_width, container_height)
-- 不同大小的字体示例
airui.label({
parent = demo6_container,
text = "12px - 小号字体",
x = 30,
y = 40,
w = 200,
h = 30,
color = 0x333333,
size = 12,
})
airui.label({
parent = demo6_container,
text = "16px - 标准字体",
x = 30,
y = 70,
w = 200,
h = 30,
color = 0x333333,
size = 16,
})
airui.label({
parent = demo6_container,
text = "24px - 大号字体",
x = 250,
y = 40,
w = 200,
h = 30,
color = 0x333333,
size = 24,
})
airui.label({
parent = demo6_container,
text = "32px - 特大字体",
x = 250,
y = 70,
w = 200,
h = 30,
color = 0x333333,
size = 32,
})
current_y = current_y + container_height + container_gap_y
--------------------------------------------------------------------
-- 示例7: 字体颜色对比（左列）
--------------------------------------------------------------------
local demo7_container = create_demo_container(scroll_container, "示例7: 字体颜色对比", left_column_x, current_y, container_width, container_height)
-- 不同颜色的字体示例
airui.label({
parent = demo7_container,
text = "红色字体",
x = 30,
y = 40,
w = 200,
h = 30,
color = 0xFF0000,
size = 18,
})
airui.label({
parent = demo7_container,
text = "绿色字体",
x = 30,
y = 75,
w = 200,
h = 30,
color = 0x00FF00,
size = 18,
})
airui.label({
parent = demo7_container,
text = "蓝色字体",
x = 240,
y = 40,
w = 200,
h = 30,
color = 0x0000FF,
size = 18,
})
airui.label({
parent = demo7_container,
text = "紫色字体",
x = 240,
y = 75,
w = 200,
h = 30,
color = 0x800080,
size = 18,
})
-- 示例8: 诗词展示（右列）
local demo8_container = create_demo_container(scroll_container, "示例8: 诗词展示", right_column_x, current_y, container_width, container_height)
airui.label({
parent = demo8_container,
text = "静夜思 - 李白",
x = 30,
y = 40,
w = 420,
h = 30,
color = 0x333333,
size = 18,
})
airui.label({
parent = demo8_container,
text = "床前明月光，疑是地上霜。",
x = 30,
y = 70,
w = 420,
h = 25,
color = 0x666666,
size = 16,
})
airui.label({
parent = demo8_container,
text = "举头望明月，低头思故乡。",
x = 30,
y = 95,
w = 420,
h = 25,
color = 0x666666,
size = 16,
})
current_y = current_y + container_height + container_gap_y
--------------------------------------------------------------------
-- 示例9: 字体对齐演示（左列）
--------------------------------------------------------------------
local demo9_container = create_demo_container(scroll_container, "示例9: 字体对齐演示", left_column_x, current_y, container_width, container_height + 40)
airui.label({
parent = demo9_container,
text = "左对齐文本",
x = 30,
y = 40,
w = 420,
h = 30,
color = 0x333333,
size = 16,
})
airui.label({
parent = demo9_container,
text = "居中对齐文本",
x = 30,
y = 80,
w = 420,
h = 30,
color = 0x333333,
size = 16,
align = "center",
})
airui.label({
parent = demo9_container,
text = "右对齐文本",
x = 30,
y = 120,
w = 420,
h = 30,
color = 0x333333,
size = 16,
align = "right",
})
-- 示例10: 特殊字符演示（右列）
local demo10_container = create_demo_container(scroll_container, "示例10: 特殊字符", right_column_x, current_y, container_width, container_height + 40)
airui.label({
parent = demo10_container,
text = "特殊字符和符号:",
x = 30,
y = 40,
w = 420,
h = 30,
color = 0x333333,
size = 16,
})
airui.label({
parent = demo10_container,
text = "① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩",
x = 30,
y = 75,
w = 420,
h = 30,
color = 0x333333,
size = 16,
})
airui.label({
parent = demo10_container,
text = "☆ ★ ○ ● △ ▲ □ ■ ◇ ◆",
x = 30,
y = 105,
w = 420,
h = 30,
color = 0x333333,
size = 16,
})
airui.label({
parent = demo10_container,
text = "← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙",
x = 30,
y = 135,
w = 420,
h = 30,
color = 0x333333,
size = 16,
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 矢量字体支持高质量中文显示，支持多种大小、颜色和对齐方式",
x = 20,
y = 560,
w = 600,
h = 25,
color = 0x666666,
size = 14,
})
end
----------------------------------------------------------------
-- 初始化页面
----------------------------------------------------------------
function airui_hzfont.init(params)
airui_hzfont.create_ui()
end
----------------------------------------------------------------
-- 清理页面
----------------------------------------------------------------
function airui_hzfont.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
current_font = nil
end
return airui_hzfont
5.10 airui_image.lua 图片组件演示页面
本文件是图片组件的演示页面，展示图片的各种用法。
注意：需要确保图片文件存在于设备中。
--[[
@module airui_image
@summary 图片组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage 本文件是图片组件的演示页面，展示图片的各种用法。
注意：需要确保图片文件存在于设备中。
]]
local airui_image = {}
----------------------------------------------------------------
-- 页面UI元素
----------------------------------------------------------------
local main_container = nil
local scroll_container = nil
----------------------------------------------------------------
-- 辅助函数：创建带标题的卡片
----------------------------------------------------------------
local function create_demo_card(parent, title, x, y, width, height)
local card = airui.container({
parent = parent,
x = x,
y = y,
w = width,
h = height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card,
text = title,
x = 15,
y = 10,
w = width - 30,
h = 30,
color = 0x333333,
size = 16,
})
return card
end
----------------------------------------------------------------
-- 辅助函数：创建控制面板
----------------------------------------------------------------
local function create_control_panel(parent, title, x, y, width, height)
local panel = airui.container({
parent = parent,
x = x,
y = y,
w = width,
h = height,
color = 0xF8F9FA,
radius = 8,
})
airui.label({
parent = panel,
text = title,
x = 10,
y = 8,
w = width - 20,
h = 25,
color = 0x666666,
size = 14,
})
return panel
end
----------------------------------------------------------------
-- 创建UI
----------------------------------------------------------------
function airui_image.create_ui()
-- 创建主容器
main_container = airui.container({
parent = airui.screen,
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x8BC34A,
})
airui.label({
parent = title_bar,
text = "图片组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
color = 0xFFFFFF,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列网格布局
local card_width = 480
local card_height = 200
local card_gap_x = 30
local card_gap_y = 20
local current_y = 10
--------------------------------------------------------------------
-- 卡片1: 基本图片显示
--------------------------------------------------------------------
local card1 = create_demo_card(scroll_container, "示例1: 基本图片显示", 20, current_y, card_width, card_height)
airui.label({
parent = card1,
text = "显示静态图片，支持JPG和PNG格式",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local basic_image = airui.image({
parent = card1,
x = 30,
y = 80,
w = 180,
h = 100,
src = "/luadb/test1.png",
on_click = function()
log.info("image", "基本图片被点击")
local msg = airui.msgbox({
text = "基本图片被点击",
buttons = { "确定" },
timeout = 1500
})
msg:show()
end
})
-- 图片信息
airui.label({
parent = card1,
text = "尺寸: 180x100",
x = 230,
y = 85,
w = 220,
h = 25,
color = 0x333333,
size = 14,
})
airui.label({
parent = card1,
text = "格式: PNG",
x = 230,
y = 115,
w = 220,
h = 25,
color = 0x333333,
size = 14,
})
airui.label({
parent = card1,
text = "支持点击事件",
x = 230,
y = 145,
w = 220,
h = 25,
color = 0x333333,
size = 14,
})
--------------------------------------------------------------------
-- 卡片2: 图片透明度控制
--------------------------------------------------------------------
local card2 = create_demo_card(scroll_container, "示例2: 图片透明度控制", 530, current_y, card_width, card_height)
local png_image = airui.image({
parent = card2,
x = 30,
y = 80,
w = 150,
h = 100,
src = "/luadb/test2.png",
zoom = 256,
opacity = 255,
})
local opacity_panel = create_control_panel(card2, "透明度控制", 200, 30, 250, 140)
local opacity_label = airui.label({
parent = opacity_panel,
text = "当前透明度: 100%",
x = 15,
y = 35,
w = 220,
h = 25,
color = 0x333333,
size = 14,
})
local opacity_buttons = {
{ text = "100%", value = 255, percent = 100 },
{ text = "75%", value = 191, percent = 75 },
{ text = "50%", value = 127, percent = 50 },
{ text = "25%", value = 64, percent = 25 },
}
for i, btn_info in ipairs(opacity_buttons) do
airui.button({
parent = opacity_panel,
x = 15 + ((i - 1) % 2) * 110,
y = 65 + math.floor((i - 1) / 2) * 35,
w = 100,
h = 30,
text = btn_info.text,
size = 14,
on_click = function()
local opacity_value = btn_info.value
png_image:set_opacity(opacity_value)
opacity_label:set_text("当前透明度: " .. btn_info.percent .. "%")
log.info("image", "透明度设置为: " .. btn_info.percent .. "%")
end
})
end
current_y = current_y + card_height + card_gap_y
--------------------------------------------------------------------
-- 卡片3: 图片缩放控制
--------------------------------------------------------------------
local card3 = create_demo_card(scroll_container, "示例3: 图片缩放控制", 20, current_y, card_width, card_height)
local zoom_image = airui.image({
parent = card3,
x = 30,
y = 60,
w = 150,
h = 100,
src = "/luadb/test1.png",
zoom = 256,
})
local zoom_panel = create_control_panel(card3, "缩放控制", 200, 30, 250, 140)
local zoom_label = airui.label({
parent = zoom_panel,
text = "当前缩放: 100%",
x = 15,
y = 35,
w = 220,
h = 25,
color = 0x333333,
size = 14,
})
local zoom_buttons = {
{ text = "50%", value = 128, percent = 50 },
{ text = "100%", value = 256, percent = 100 },
{ text = "150%", value = 384, percent = 150 },
{ text = "200%", value = 512, percent = 200 },
}
for i, btn_info in ipairs(zoom_buttons) do
airui.button({
parent = zoom_panel,
x = 15 + ((i - 1) % 2) * 110,
y = 65 + math.floor((i - 1) / 2) * 35,
w = 100,
h = 30,
text = btn_info.text,
size = 14,
on_click = function()
local zoom_value = btn_info.value
zoom_image:set_zoom(zoom_value)
zoom_label:set_text("当前缩放: " .. btn_info.percent .. "%")
log.info("image", "缩放设置为: " .. btn_info.percent .. "%")
end
})
end
--------------------------------------------------------------------
-- 卡片4: 图片切换演示
--------------------------------------------------------------------
local card4 = create_demo_card(scroll_container, "示例4: 图片切换演示", 530, current_y, card_width, card_height)
local image_index = 1
local image_paths = { "/luadb/test1.png", "/luadb/test2.png" }
local image_names = { "测试图片1", "测试图片2" }
local switch_image = airui.image({
parent = card4,
x = 30,
y = 60,
w = 150,
h = 100,
src = image_paths[1],
})
local image_info_label = airui.label({
parent = card4,
text = "当前图片: " .. image_names[1],
x = 200,
y = 65,
w = 250,
h = 30,
color = 0x333333,
size = 14,
})
local switch_btn = airui.button({
parent = card4,
x = 200,
y = 105,
w = 150,
h = 45,
text = "切换图片",
size = 16,
on_click = function()
image_index = image_index % #image_paths + 1
switch_image:set_src(image_paths[image_index])
image_info_label:set_text("当前图片: " .. image_names[image_index])
log.info("image", "切换到图片: " .. image_names[image_index])
local msg = airui.msgbox({
text = "已切换到: " .. image_names[image_index],
buttons = { "确定" },
timeout = 1000
})
msg:show()
end
})
current_y = current_y + card_height + 20
--------------------------------------------------------------------
-- 卡片5: 动态创建图片
--------------------------------------------------------------------
local card5 = create_demo_card(scroll_container, "示例5: 动态创建图片", 20, current_y, card_width, card_height + 100)
airui.label({
parent = card5,
text = "动态创建和销毁图片",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local dynamic_images = {}
local img_positions = {
{ x = 30, y = 80 },
{ x = 110, y = 80 },
{ x = 190, y = 80 },
{ x = 270, y = 80 },
{ x = 30, y = 160 },
{ x = 110, y = 160 },
{ x = 190, y = 160 },
{ x = 270, y = 160 }
}
local create_btn = airui.button({
parent = card5,
x = 40,
y = 240,
w = 120,
h = 45,
text = "创建图片",
size = 14,
on_click = function()
local count = #dynamic_images + 1
if count <= 8 then
local pos = img_positions[count]
local img = airui.image({
parent = card5,
x = pos.x,
y = pos.y,
w = 60,
h = 60,
src = "/luadb/test1.png",
})
table.insert(dynamic_images, img)
log.info("image", "创建第 " .. count .. " 张图片")
else
local msg = airui.msgbox({
text = "最多只能创建8张图片",
buttons = { "确定" },
timeout = 1500
})
msg:show()
end
end
})
local clear_btn = airui.button({
parent = card5,
x = 200,
y = 240,
w = 120,
h = 45,
text = "清除图片",
size = 14,
on_click = function()
for _, img in ipairs(dynamic_images) do
img:destroy()
end
dynamic_images = {}
log.info("image", "清除所有动态图片")
end
})
--------------------------------------------------------------------
-- 卡片6: 图片网格展示
--------------------------------------------------------------------
local card6 = create_demo_card(scroll_container, "示例6: 图片网格展示", 530, current_y, card_width, card_height + 100)
airui.label({
parent = card6,
text = "可点击图标布局",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
-- 创建3x3图片网格
local grid_images = {}
for row = 0, 2 do
for col = 0, 2 do
local img = airui.image({
parent = card6,
x = 30 + col * 110,
y = 80 + row * 70,
w = 90,
h = 60,
src = "/luadb/test1.png",
on_click = function()
log.info("image", "网格图片(" .. (row + 1) .. "," .. (col + 1) .. ")被点击")
local msg = airui.msgbox({
text = "点击了第" .. (row * 3 + col + 1) .. "个图片",
buttons = { "确定" },
timeout = 1500
})
msg:show()
end
})
table.insert(grid_images, img)
end
end
-- 底部提示
airui.label({
parent = main_container,
text = "提示: 支持PNG透明度、图片缩放、点击事件和动态管理",
x = 20,
y = 560,
w = 600,
h = 25,
color = 0x666666,
size = 14,
})
end
----------------------------------------------------------------
-- 初始化页面
----------------------------------------------------------------
function airui_image.init(params)
airui_image.create_ui()
end
----------------------------------------------------------------
-- 清理页面
----------------------------------------------------------------
function airui_image.cleanup()
if main_container then
main_container:destroy()
main_container = nil
scroll_container = nil
end
end
return airui_image
5.11 airui_input.lua 输入框组件演示页面
本文件是输入框组件的演示页面，展示输入框的各种用法。
--[[
@module airui_input
@summary 输入框组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是输入框组件的演示页面，展示输入框的各种用法。
]]
local airui_input = {}
-- 页面UI元素
local main_container = nil
local keyboards = {}
-- 创建UI
function airui_input.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x3F51B5,
})
airui.label({
parent = title_bar,
text = "输入框组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local section_height = 120
-- 创建键盘
local keyboard = airui.keyboard({
x = 0,
y = 0,
w = 724,
h = 220,
mode = "text",
-- target = number_input,
auto_hide = true,
})
-- 示例1: 基本输入框（左列）
airui.label({
parent = scroll_container,
text = "示例1: 基本输入框",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local basic_input = airui.textarea({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 80,
text = "",
placeholder = "请输入文本内容...",
max_len = 100,
size = 16,
keyboard = keyboard,
})
-- 示例2: 带默认值的输入框（右列）
airui.label({
parent = scroll_container,
text = "示例2: 带默认值的输入框",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local default_input = airui.textarea({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 440,
h = 80,
text = "这是默认文本",
placeholder = "请输入...",
max_len = 80,
size = 16,
keyboard = keyboard,
})
y_offset = y_offset + section_height
-- 示例3: 多行输入框（左列）
airui.label({
parent = scroll_container,
text = "示例3: 多行输入框",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local multiline_input = airui.textarea({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 120,
text = "",
placeholder = "请输入多行文本内容...\n支持换行输入",
max_len = 200,
size = 16,
keyboard = keyboard,
})
-- 示例4: 数字输入框（右列）
airui.label({
parent = scroll_container,
text = "示例4: 数字输入框",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local number_input = airui.textarea({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 440,
h = 80,
text = "",
placeholder = "请输入数字...",
max_len = 20,
size = 16,
keyboard = keyboard,
})
y_offset = y_offset + 160
-- 示例5: 表单输入（左列）
airui.label({
parent = scroll_container,
text = "示例5: 表单输入",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local form_container = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 250,
color = 0xE8EAF6,
radius = 12,
})
-- 姓名输入
airui.label({
parent = form_container,
text = "姓名:",
x = 30,
y = 30,
w = 80,
h = 35,
size = 16,
})
local name_input = airui.textarea({
parent = form_container,
x = 120,
y = 25,
w = 280,
h = 40,
text = "",
placeholder = "请输入姓名",
max_len = 20,
size = 16,
keyboard = keyboard,
})
-- 邮箱输入
airui.label({
parent = form_container,
text = "邮箱:",
x = 30,
y = 85,
w = 80,
h = 35,
size = 16,
})
local email_input = airui.textarea({
parent = form_container,
x = 120,
y = 80,
w = 280,
h = 40,
text = "",
placeholder = "请输入邮箱地址",
max_len = 50,
size = 16,
keyboard = keyboard,
})
-- 电话输入
airui.label({
parent = form_container,
text = "电话:",
x = 30,
y = 140,
w = 80,
h = 35,
size = 16,
})
local phone_input = airui.textarea({
parent = form_container,
x = 120,
y = 135,
w = 280,
h = 40,
text = "",
placeholder = "请输入电话号码",
keyboard = keyboard,
max_len = 20,
size = 16,
})
-- 提交按钮
local submit_btn = airui.button({
parent = form_container,
x = 120,
y = 195,
w = 280,
h = 45,
text = "提交表单",
size = 16,
on_click = function()
local name = name_input:get_text()
local email = email_input:get_text()
local phone = phone_input:get_text()
if name == "" or email == "" or phone == "" then
local msg = airui.msgbox({
text = "请填写完整信息",
buttons = { "确定" },
on_action = function(self, label)
if label == "确定" then
self:hide()
end
end
})
msg:show()
else
local msg = airui.msgbox({
text = "提交成功!\n姓名: " .. name .. "\n邮箱: " .. email .. "\n电话: " .. phone,
buttons = { "确定" },
on_action = function(self, label)
if label == "确定" then
self:hide()
end
end
})
msg:show()
end
end
})
-- 示例6: 输入框控制（右列）
airui.label({
parent = scroll_container,
text = "示例6: 输入框控制",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local control_container = airui.container({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 440,
h = 250,
color = 0xF3E5F5,
radius = 12,
})
local control_input = airui.textarea({
parent = control_container,
x = 30,
y = 30,
w = 380,
h = 80,
text = "这是一个可控制的输入框",
placeholder = "请输入...",
max_len = 100,
size = 16,
keyboard = keyboard,
})
-- 控制按钮区域
local control_btn_y = 130
local control_btn_width = 120
-- 清空按钮
local clear_btn = airui.button({
parent = control_container,
x = 30,
y = control_btn_y,
w = control_btn_width,
h = 40,
text = "清空内容",
size = 14,
on_click = function()
control_input:set_text("")
end
})
-- 获取按钮
local get_btn = airui.button({
parent = control_container,
x = 170,
y = control_btn_y,
w = control_btn_width,
h = 40,
text = "获取内容",
size = 14,
on_click = function()
local text = control_input:get_text()
local msg = airui.msgbox({
text = "当前内容: " .. text,
buttons = { "确定" },
timeout = 2000
})
msg:show()
end
})
-- 设置内容按钮
local set_btn = airui.button({
parent = control_container,
x = 310,
y = control_btn_y,
w = control_btn_width,
h = 40,
text = "设置内容",
size = 14,
on_click = function()
control_input:set_text("这是新设置的内容 " .. os.date("%H:%M:%S"))
end
})
-- 第二行控制按钮
control_btn_y = control_btn_y + 50
-- 禁用按钮
local disable_btn = airui.button({
parent = control_container,
x = 30,
y = control_btn_y,
w = control_btn_width,
h = 40,
text = "禁用输入",
size = 14,
on_click = function()
-- 这里需要根据AirUI的API来实现禁用功能
log.info("input", "禁用输入框")
end
})
-- 启用按钮
local enable_btn = airui.button({
parent = control_container,
x = 170,
y = control_btn_y,
w = control_btn_width,
h = 40,
text = "启用输入",
size = 14,
on_click = function()
-- 这里需要根据AirUI的API来实现启用功能
log.info("input", "启用输入框")
end
})
-- 隐藏按钮
local hide_btn = airui.button({
parent = control_container,
x = 310,
y = control_btn_y,
w = control_btn_width,
h = 40,
text = "隐藏键盘",
size = 14,
on_click = function()
for _, kb in ipairs(keyboards) do
if kb then
kb:hide()
end
end
end
})
-- 初始化页面
function airui_input.init(params)
keyboards = {}
airui_input.create_ui()
end
-- 清理页面
function airui_input.cleanup()
-- 清理所有键盘
for _, kb in ipairs(keyboards) do
if kb then
kb:hide()
end
end
keyboards = {}
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_input
5.12 airui_label.lua 标签组件演示页面
本文件是标签组件的演示页面，展示标签的各种用法。
--[[
@module airui_label
@summary 标签组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是标签组件的演示页面，展示标签的各种用法。
]]
local airui_label = {}
-- 页面UI元素
local main_container = nil
-- 创建UI
function airui_label.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x4CAF50,
})
airui.label({
parent = title_bar,
text = "标签组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local section_height = 100
-- 示例1: 基本文本标签（左列）
airui.label({
parent = scroll_container,
text = "示例1: 基本文本标签",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local label1 = airui.label({
parent = scroll_container,
text = "这是一个基本的文本标签",
x = left_column_x + 20,
y = y_offset + 40,
w = 300,
h = 40,
size = 18,
})
-- 示例2: 图标标签（右列）
airui.label({
parent = scroll_container,
text = "示例2: 图标标签",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local icon_label = airui.label({
parent = scroll_container,
symbol = airui.SYMBOL_SETTINGS,
x = right_column_x + 20,
y = y_offset + 40,
w = 50,
h = 50,
size = 30,
on_click = function(self)
log.info("label", "图标标签被点击")
end
})
airui.label({
parent = scroll_container,
text = "点击图标（此图标可点击）",
x = right_column_x + 90,
y = y_offset + 50,
w = 200,
h = 30,
size = 16,
})
y_offset = y_offset + section_height
-- 示例3: 动态更新文本（左列）
airui.label({
parent = scroll_container,
text = "示例3: 动态更新文本",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local dynamic_label = airui.label({
parent = scroll_container,
text = "初始文本内容",
x = left_column_x + 20,
y = y_offset + 40,
w = 300,
h = 40,
size = 18,
})
local update_btn = airui.button({
parent = scroll_container,
x = left_column_x + 340,
y = y_offset + 35,
w = 120,
h = 50,
text = "更新时间",
size = 16,
on_click = function()
local current_time = os.date("%H:%M:%S")
dynamic_label:set_text("当前时间: " .. current_time)
end
})
-- 示例4: 多行文本（右列）
airui.label({
parent = scroll_container,
text = "示例4: 多行文本标签",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local multiline_label = airui.label({
parent = scroll_container,
text = "这是一个多行文本标签，可以显示较长的文本内容。标签支持自动换行功能。多行文本非常适合展示说明性内容或较长的描述信息。",
x = right_column_x + 20,
y = y_offset + 40,
w = 400,
h = 120,
size = 16,
})
y_offset = y_offset + 150
-- 示例5: 不同字体大小（左列）
airui.label({
parent = scroll_container,
text = "示例5: 不同字体大小",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
airui.label({
parent = scroll_container,
text = "12号字体 - 小号文字",
x = left_column_x + 20,
y = y_offset + 40,
w = 300,
h = 30,
size = 12,
})
airui.label({
parent = scroll_container,
text = "16号字体 - 标准文字",
x = left_column_x + 20,
y = y_offset + 75,
w = 300,
h = 30,
size = 16,
})
airui.label({
parent = scroll_container,
text = "20号字体 - 大号文字",
x = left_column_x + 20,
y = y_offset + 110,
w = 300,
h = 30,
size = 20,
})
airui.label({
parent = scroll_container,
text = "24号字体 - 标题文字",
x = left_column_x + 20,
y = y_offset + 145,
w = 300,
h = 30,
size = 24,
})
-- 示例6: 不同字体颜色（右列）
airui.label({
parent = scroll_container,
text = "示例6: 不同字体颜色",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
airui.label({
parent = scroll_container,
text = "红色文字",
x = right_column_x + 20,
y = y_offset + 40,
w = 200,
h = 30,
color = 0xFF0000,
size = 16,
})
airui.label({
parent = scroll_container,
text = "绿色文字",
x = right_column_x + 20,
y = y_offset + 75,
w = 200,
h = 30,
color = 0x00FF00,
size = 16,
})
airui.label({
parent = scroll_container,
text = "蓝色文字",
x = right_column_x + 20,
y = y_offset + 110,
w = 200,
h = 30,
color = 0x0000FF,
size = 16,
})
airui.label({
parent = scroll_container,
text = "紫色文字",
x = right_column_x + 20,
y = y_offset + 145,
w = 200,
h = 30,
color = 0x800080,
size = 16,
})
y_offset = y_offset + 180
-- 示例7: 带背景的标签（左列）
airui.label({
parent = scroll_container,
text = "示例7: 带背景的标签",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local bg_container1 = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 350,
h = 50,
color = 0xE3F2FD,
radius = 10,
})
airui.label({
parent = bg_container1,
text = "蓝色背景的标签",
x = 20,
y = 15,
w = 310,
h = 20,
size = 16,
})
local bg_container2 = airui.container({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 100,
w = 350,
h = 50,
color = 0xFFEBEE,
radius = 10,
})
airui.label({
parent = bg_container2,
text = "红色背景的标签",
x = 20,
y = 15,
w = 310,
h = 20,
color = 0xD32F2F,
size = 16,
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 标签支持文本、图标、多行显示和动态更新",
x = 20,
y = 560,
w = 500,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_label.init(params)
airui_label.create_ui()
end
-- 清理页面
function airui_label.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_label
5.13 airui_msgbox.lua 消息框组件演示页面
本文件是消息框组件的演示页面，展示消息框的各种用法。
--[[
@module airui_msgbox
@summary 消息框组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage 本文件是消息框组件的演示页面，展示消息框的各种用法。
]]
local airui_msgbox = {}
----------------------------------------------------------------
-- 页面UI元素
----------------------------------------------------------------
local main_container = nil
----------------------------------------------------------------
-- 辅助函数：创建演示卡片
----------------------------------------------------------------
local function create_demo_card(parent, title, x, y, width, height)
local card = airui.container({
parent = parent,
x = x,
y = y,
w = width,
h = height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card,
text = title,
x = 15,
y = 10,
w = width - 30,
h = 30,
color = 0x333333,
size = 16,
})
return card
end
----------------------------------------------------------------
-- 创建UI
----------------------------------------------------------------
function airui_msgbox.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0xE91E63,
})
airui.label({
parent = title_bar,
text = "消息框组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
color = 0xFFFFFF,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 当前y坐标，使用两列网格布局
local current_y = 10
local card_width = 480
local card_height = 140
local card_gap_x = 30
local card_gap_y = 20
--------------------------------------------------------------------
-- 第一行：基本消息框
--------------------------------------------------------------------
-- 卡片1: 基本消息框
local card1 = create_demo_card(scroll_container, "示例1: 基本消息框", 20, current_y, card_width, card_height)
airui.label({
parent = card1,
text = "显示一个简单的消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local basic_msg_btn = airui.button({
parent = card1,
x = 150,
y = 75,
w = 180,
h = 45,
text = "显示基本消息",
size = 16,
on_click = function()
local msg = airui.msgbox({
text = "这是一个基本消息框",
buttons = { "确定" },
on_action = function(self, label)
log.info("msgbox", "点击了: " .. label)
self:hide() -- 点击按钮后关闭消息框
end
})
msg:show()
end
})
-- 卡片2: 带标题的消息框
local card2 = create_demo_card(scroll_container, "示例2: 带标题消息框", 530, current_y, card_width, card_height)
airui.label({
parent = card2,
text = "显示带标题的消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local title_msg_btn = airui.button({
parent = card2,
x = 150,
y = 75,
w = 180,
h = 45,
text = "带标题消息",
size = 16,
on_click = function()
local msg = airui.msgbox({
title = "系统提示",
text = "操作成功完成!",
buttons = { "确定" },
on_action = function(self, label)
log.info("msgbox", "点击了: " .. label)
self:hide()
end
})
msg:show()
end
})
current_y = current_y + card_height + card_gap_y
--------------------------------------------------------------------
-- 第二行：多个按钮的消息框
--------------------------------------------------------------------
-- 卡片3: 多个按钮的消息框
local card3 = create_demo_card(scroll_container, "示例3: 多个按钮消息框", 20, current_y, card_width, 140)
airui.label({
parent = card3,
text = "显示带有确认和取消按钮的消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local multi_msg_btn = airui.button({
parent = card3,
x = 150,
y = 80,
w = 180,
h = 45,
text = "确认对话框",
size = 16,
on_click = function()
local msg = airui.msgbox({
title = "确认操作",
text = "确定要删除这个文件吗？",
buttons = { "取消", "确定" },
on_action = function(self, label)
log.info("msgbox", "点击了: " .. label)
if label == "确定" then
log.info("msgbox", "执行删除操作")
local confirm_msg = airui.msgbox({
text = "文件已删除",
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
confirm_msg:show()
else
log.info("msgbox", "操作已取消")
end
self:hide()
end
})
msg:show()
end
})
-- 卡片4: 三个按钮的消息框
local card4 = create_demo_card(scroll_container, "示例4: 三个按钮消息框", 530, current_y, card_width, 140)
airui.label({
parent = card4,
text = "显示带有三个按钮的消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local three_btn_msg = airui.button({
parent = card4,
x = 150,
y = 80,
w = 180,
h = 45,
text = "三个按钮",
size = 16,
on_click = function()
local msg = airui.msgbox({
title = "选择操作",
text = "请选择要执行的操作:",
buttons = { "保存", "另存为", "取消" },
on_action = function(self, label)
local action_msg = airui.msgbox({
text = "选择了: " .. label,
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
action_msg:show()
log.info("msgbox", "选择了操作: " .. label)
self:hide()
end
})
msg:show()
end
})
current_y = current_y + 150
--------------------------------------------------------------------
-- 第三行：自动关闭的消息框
--------------------------------------------------------------------
-- 卡片5: 自动关闭的消息框
local card5 = create_demo_card(scroll_container, "示例5: 自动关闭消息框", 20, current_y, card_width, 130)
airui.label({
parent = card5,
text = "显示3秒后自动关闭的消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local auto_msg_btn = airui.button({
parent = card5,
x = 150,
y = 75,
w = 180,
h = 45,
text = "显示3秒",
size = 16,
on_click = function()
local msg = airui.msgbox({
text = "这条消息将在3秒后自动关闭",
buttons = { "确定" },
timeout = 3000,
on_action = function(self, label)
log.info("msgbox", "消息框被点击: " .. label)
self:hide()
end
})
msg:show()
end
})
-- 卡片6: 长消息自动关闭
local card6 = create_demo_card(scroll_container, "示例6: 长消息自动关闭", 530, current_y, card_width, 130)
airui.label({
parent = card6,
text = "显示5秒后自动关闭的长消息",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local long_auto_msg = airui.button({
parent = card6,
x = 150,
y = 75,
w = 180,
h = 45,
text = "显示5秒",
size = 16,
on_click = function()
local msg = airui.msgbox({
title = "通知",
text = "这是一条较长的消息内容，将在5秒后自动关闭。您也可以点击按钮立即关闭。",
buttons = { "立即关闭" },
timeout = 5000,
on_action = function(self, label)
log.info("msgbox", "点击了立即关闭")
self:hide()
end
})
msg:show()
end
})
current_y = current_y + 140
--------------------------------------------------------------------
-- 第四行：自定义按钮的消息框
--------------------------------------------------------------------
-- 卡片7: 消息框链式调用
local card9 = create_demo_card(scroll_container, "示例7: 链式调用", 20, current_y, card_width, 150)
airui.label({
parent = card9,
text = "显示链式调用的消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local chain_msg_btn = airui.button({
parent = card9,
x = 150,
y = 85,
w = 180,
h = 45,
text = "链式消息",
size = 16,
on_click = function()
local msg1 = airui.msgbox({
title = "第一步",
text = "这是第一步操作",
buttons = { "下一步" },
on_action = function(self, label)
self:hide()
local msg2 = airui.msgbox({
title = "第二步",
text = "这是第二步操作",
buttons = { "下一步" },
on_action = function(self, label)
self:hide()
local msg3 = airui.msgbox({
title = "完成",
text = "所有步骤已完成",
buttons = { "确定" },
timeout = 2000,
on_action = function(self, label)
self:hide()
end
})
msg3:show()
end
})
msg2:show()
end
})
msg1:show()
end
})
-- 卡片8: 多行文本消息框
local card8 = create_demo_card(scroll_container, "示例8: 多行文本消息", 530, current_y, card_width, 140)
airui.label({
parent = card8,
text = "显示多行文本消息框",
x = 15,
y = 45,
w = card_width - 30,
h = 25,
color = 0x666666,
size = 14,
})
local multiline_msg_btn = airui.button({
parent = card8,
x = 150,
y = 80,
w = 180,
h = 45,
text = "多行消息",
size = 16,
on_click = function()
local msg = airui.msgbox({
title = "详细信息",
text = "这是第一行文本\n这是第二行文本\n这是第三行文本\n消息框支持多行显示\n可以显示更多内容",
buttons = { "确定" },
on_action = function(self, label)
log.info("msgbox", "多行消息被确认")
self:hide()
end
})
msg:show()
end
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 点击按钮显示不同类型的消息框",
x = 20,
y = 560,
w = 500,
h = 25,
color = 0x666666,
size = 14,
})
end
----------------------------------------------------------------
-- 初始化页面
----------------------------------------------------------------
function airui_msgbox.init(params)
airui_msgbox.create_ui()
end
----------------------------------------------------------------
-- 清理页面
----------------------------------------------------------------
function airui_msgbox.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_msgbox
5.14 airui_switch.lua 开关组件演示页面
本文件展示开关组件的基本用法和常见场景。
--[[
@module airui_switch
@summary 开关组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件展示开关组件的基本用法和常见场景。
]]
local airui_switch = {}
-- 页面UI元素
local main_container = nil
-- 创建UI
function airui_switch.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x00BCD4,
})
airui.label({
parent = title_bar,
text = "开关组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
radius = 6,
on_click = function()
go_back()
end
})
-- 内容区域
local content = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 标题
airui.label({
parent = content,
text = "系统设置选项",
x = 20,
y = 20,
w = 300,
h = 35,
size = 20,
color = 0x333333,
})
-- 设置选项容器
local settings_container = airui.container({
parent = content,
x = 20,
y = 70,
w = 984,
h = 380,
color = 0xFFFFFF,
radius = 12,
})
-- 网络设置部分
airui.label({
parent = settings_container,
text = "网络设置",
x = 30,
y = 30,
w = 200,
h = 30,
size = 18,
color = 0x333333,
})
-- 第一行：WiFi和蓝牙
local switch_wifi = airui.switch({
parent = settings_container,
x = 300,
y = 30,
w = 80,
h = 35,
checked = true,
on_change = function(state)
log.info("WiFi", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "WiFi",
x = 400,
y = 32,
w = 150,
h = 30,
size = 16,
})
local switch_bluetooth = airui.switch({
parent = settings_container,
x = 600,
y = 30,
w = 80,
h = 35,
checked = false,
on_change = function(state)
log.info("蓝牙", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "蓝牙",
x = 700,
y = 32,
w = 150,
h = 30,
size = 16,
})
-- 第二行：移动数据和GPS
airui.label({
parent = settings_container,
text = "位置服务",
x = 30,
y = 90,
w = 200,
h = 30,
size = 18,
color = 0x333333,
})
local switch_data = airui.switch({
parent = settings_container,
x = 300,
y = 90,
w = 80,
h = 35,
checked = false,
on_change = function(state)
log.info("移动数据", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "移动数据",
x = 400,
y = 92,
w = 150,
h = 30,
size = 16,
})
local switch_gps = airui.switch({
parent = settings_container,
x = 600,
y = 90,
w = 80,
h = 35,
checked = true,
on_change = function(state)
log.info("GPS", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "GPS定位",
x = 700,
y = 92,
w = 150,
h = 30,
size = 16,
})
-- 第三行：通知和自动更新
airui.label({
parent = settings_container,
text = "系统通知",
x = 30,
y = 150,
w = 200,
h = 30,
size = 18,
color = 0x333333,
})
local switch_notification = airui.switch({
parent = settings_container,
x = 300,
y = 150,
w = 80,
h = 35,
checked = true,
on_change = function(state)
log.info("通知", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "通知提醒",
x = 400,
y = 152,
w = 150,
h = 30,
size = 16,
})
local switch_auto_update = airui.switch({
parent = settings_container,
x = 600,
y = 150,
w = 80,
h = 35,
checked = false,
on_change = function(state)
log.info("自动更新", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "自动更新",
x = 700,
y = 152,
w = 150,
h = 30,
size = 16,
})
-- 第四行：声音和振动
airui.label({
parent = settings_container,
text = "声音设置",
x = 30,
y = 210,
w = 200,
h = 30,
size = 18,
color = 0x333333,
})
local switch_sound = airui.switch({
parent = settings_container,
x = 300,
y = 210,
w = 80,
h = 35,
checked = true,
on_change = function(state)
log.info("声音", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "系统声音",
x = 400,
y = 212,
w = 150,
h = 30,
size = 16,
})
local switch_vibration = airui.switch({
parent = settings_container,
x = 600,
y = 210,
w = 80,
h = 35,
checked = true,
on_change = function(state)
log.info("振动", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "振动反馈",
x = 700,
y = 212,
w = 150,
h = 30,
size = 16,
})
-- 第五行：深色模式和自动亮度
airui.label({
parent = settings_container,
text = "显示设置",
x = 30,
y = 270,
w = 200,
h = 30,
size = 18,
color = 0x333333,
})
local switch_dark_mode = airui.switch({
parent = settings_container,
x = 300,
y = 270,
w = 80,
h = 35,
checked = false,
on_change = function(state)
log.info("深色模式", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "深色模式",
x = 400,
y = 272,
w = 150,
h = 30,
size = 16,
})
local switch_auto_brightness = airui.switch({
parent = settings_container,
x = 600,
y = 270,
w = 80,
h = 35,
checked = true,
on_change = function(state)
log.info("自动亮度", state and "开启" or "关闭")
end
})
airui.label({
parent = settings_container,
text = "自动亮度",
x = 700,
y = 272,
w = 150,
h = 30,
size = 16,
})
-- 控制按钮区域
local control_container = airui.container({
parent = content,
x = 20,
y = 460,
w = 984,
h = 80,
color = 0xE0F7FA,
radius = 10,
})
local select_all_btn = airui.button({
parent = control_container,
x = 100,
y = 20,
w = 150,
h = 45,
text = "全部开启",
size = 16,
on_click = function()
log.info("switch", "全部开启")
end
})
local deselect_all_btn = airui.button({
parent = control_container,
x = 300,
y = 20,
w = 150,
h = 45,
text = "全部关闭",
size = 16,
on_click = function()
log.info("switch", "全部关闭")
end
})
local reset_btn = airui.button({
parent = control_container,
x = 500,
y = 20,
w = 150,
h = 45,
text = "重置设置",
size = 16,
on_click = function()
log.info("switch", "重置所有开关")
end
})
-- 状态显示
local status_label = airui.label({
parent = control_container,
text = "已开启: 4项 | 已关闭: 4项",
x = 700,
y = 22,
w = 200,
h = 40,
size = 14,
color = 0x666666,
})
-- 底部提示
airui.label({
parent = main_container,
text = "开关组件：点击切换状态，支持程序控制和状态反馈",
x = 20,
y = 560,
w = 600,
h = 25,
color = 0x666666,
size = 14,
})
end
-- 初始化页面
function airui_switch.init(params)
airui_switch.create_ui()
end
-- 清理页面
function airui_switch.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_switch
5.15 airui_switch_page 页面切换演示页面
本文件是页面切换的演示，展示多个子页面之间的切换。
--[[
@module airui_switch_page
@summary 页面切换演示
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是页面切换的演示，展示多个子页面之间的切换。
]]
local airui_switch_page = {}
local tab_buttons = {} -- 存储选项卡按钮的引用
-- 页面UI元素
local main_container = nil
local current_subpage = nil
local subpages = {}
local update_timer
local auto_update_timer
-- 创建UI
function airui_switch_page.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x673AB7,
})
airui.label({
parent = title_bar,
text = "页面切换演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 选项卡容器
local tab_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 50,
color = 0xEDE7F6,
})
-- 子页面容器
local content_container = airui.container({
parent = main_container,
x = 20,
y = 130,
w = 984,
h = 400,
color = 0xFFFFFF,
radius = 12,
})
-- 创建子页面
function airui_switch_page.create_subpages()
-- 子页面1: 欢迎页面
local page1 = airui.container({
parent = content_container,
x = 0,
y = 0,
w = 984,
h = 400,
color = 0xE3F2FD,
})
airui.label({
parent = page1,
text = "欢迎页面",
x = 400,
y = 80,
w = 184,
h = 60,
size = 24,
})
airui.label({
parent = page1,
text = "这是第一个子页面 - 欢迎使用页面切换演示",
x = 200,
y = 160,
w = 584,
h = 40,
size = 18,
})
airui.label({
parent = page1,
text = "点击下方标签或使用导航按钮在不同页面间切换",
x = 200,
y = 210,
w = 584,
h = 30,
size = 16,
})
airui.label({
parent = page1,
text = "页面切换是构建复杂应用的基础功能",
x = 200,
y = 250,
w = 584,
h = 30,
size = 16,
})
-- 子页面2: 信息页面
local page2 = airui.container({
parent = content_container,
x = 0,
y = 0,
w = 984,
h = 400,
color = 0xF1F8E9,
})
airui.label({
parent = page2,
text = "信息页面",
x = 400,
y = 80,
w = 184,
h = 60,
size = 24,
})
airui.label({
parent = page2,
text = "系统信息:",
x = 100,
y = 160,
w = 200,
h = 40,
size = 18,
})
local time_label = airui.label({
parent = page2,
text = "当前时间: " .. os.date("%H:%M:%S"),
x = 100,
y = 210,
w = 400,
h = 30,
size = 16,
})
airui.label({
parent = page2,
text = "页面演示系统 v1.0",
x = 100,
y = 250,
w = 400,
h = 30,
size = 16,
})
airui.label({
parent = page2,
text = "分辨率: 1024×600",
x = 100,
y = 290,
w = 400,
h = 30,
size = 16,
})
-- 更新时间
sys.timerLoopStart(function()
time_label:set_text("当前时间: " .. os.date("%H:%M:%S"))
end, 1000)
-- 子页面3: 设置页面
local page3 = airui.container({
parent = content_container,
x = 0,
y = 0,
w = 984,
h = 400,
color = 0xFFF3E0,
})
airui.label({
parent = page3,
text = "设置页面",
x = 400,
y = 80,
w = 184,
h = 60,
size = 24,
})
airui.label({
parent = page3,
text = "系统设置选项:",
x = 100,
y = 160,
w = 300,
h = 40,
size = 18,
})
local setting1 = airui.switch({
parent = page3,
x = 100,
y = 210,
w = 80,
h = 40,
checked = true,
on_change = function(state)
log.info("switch_page", "启用通知: " .. tostring(state))
end
})
airui.label({
parent = page3,
text = "启用通知",
x = 200,
y = 220,
w = 200,
h = 20,
size = 16,
})
local setting2 = airui.switch({
parent = page3,
x = 100,
y = 270,
w = 80,
h = 40,
checked = false,
on_change = function(state)
log.info("switch_page", "自动更新: " .. tostring(state))
end
})
airui.label({
parent = page3,
text = "自动更新",
x = 200,
y = 280,
w = 200,
h = 20,
size = 16,
})
local setting3 = airui.switch({
parent = page3,
x = 100,
y = 330,
w = 80,
h = 40,
checked = true,
on_change = function(state)
log.info("switch_page", "深色模式: " .. tostring(state))
end
})
airui.label({
parent = page3,
text = "深色模式",
x = 200,
y = 340,
w = 200,
h = 20,
size = 16,
})
-- 子页面4: 关于页面
local page4 = airui.container({
parent = content_container,
x = 0,
y = 0,
w = 984,
h = 400,
color = 0xF3E5F5,
})
airui.label({
parent = page4,
text = "关于页面",
x = 400,
y = 80,
w = 184,
h = 60,
size = 24,
})
airui.label({
parent = page4,
text = "页面切换演示系统",
x = 300,
y = 160,
w = 384,
h = 40,
size = 20,
})
airui.label({
parent = page4,
text = "版本: 1.0.0",
x = 300,
y = 210,
w = 384,
h = 30,
size = 16,
})
airui.label({
parent = page4,
text = "作者: 江访",
x = 300,
y = 250,
w = 384,
h = 30,
size = 16,
})
airui.label({
parent = page4,
text = "日期: 2026.01.30",
x = 300,
y = 290,
w = 384,
h = 30,
size = 16,
})
airui.label({
parent = page4,
text = "这是一个展示页面切换功能的演示",
x = 300,
y = 330,
w = 384,
h = 30,
size = 16,
})
-- 存储子页面
subpages = {
{ container = page1, name = "欢迎" },
{ container = page2, name = "信息" },
{ container = page3, name = "设置" },
{ container = page4, name = "关于" }
}
-- 默认显示第一个页面
current_subpage = 1
for i, page in ipairs(subpages) do
if i == 1 then
page.container:show()
else
page.container:hide()
end
end
end
-- 创建选项卡按钮
function airui_switch_page.create_tabs()
local tab_width = 150
local tab_height = 40
local tab_margin = 10
local total_tabs = #subpages
local total_width = total_tabs * tab_width + (total_tabs - 1) * tab_margin
local start_x = (1024 - total_width) / 2
for i, page in ipairs(subpages) do
local tab_x = start_x + (i - 1) * (tab_width + tab_margin)
local tab = airui.button({
parent = tab_container,
x = tab_x,
y = 5,
w = tab_width,
h = tab_height,
text = page.name,
size = 16,
on_click = function()
airui_switch_page.switch_to_page(i)
end
})
-- 存储按钮引用到 tab_buttons 表中
tab_buttons[i] = tab
-- 设置当前页面的按钮样式（通过文字颜色区分）
if i == current_subpage then
tab:set_text("▶ " .. page.name .. " ◀")
tab:set_color(0x673AB7)
end
end
end
-- 切换页面函数
function airui_switch_page.switch_to_page(page_index)
if page_index == current_subpage then
return
end
-- 隐藏当前页面
if current_subpage and subpages[current_subpage] then
subpages[current_subpage].container:hide()
end
-- 显示新页面
if subpages[page_index] then
subpages[page_index].container:show()
current_subpage = page_index
-- 更新选项卡按钮文字（使用存储的按钮引用）
for i, btn in ipairs(tab_buttons) do
if i == page_index then
btn:set_text("▶ " .. subpages[i].name .. " ◀")
btn:set_color(0x673AB7)
else
btn:set_text(subpages[i].name)
btn:set_color(nil) -- 恢复默认颜色
end
end
log.info("switch_page", "切换到页面: " .. subpages[page_index].name)
end
end
-- 创建子页面和选项卡
airui_switch_page.create_subpages()
airui_switch_page.create_tabs()
-- 页面指示器
local indicator_label = airui.label({
parent = main_container,
text = "当前页面: 欢迎",
x = 20,
y = 540,
w = 300,
h = 30,
size = 16,
})
-- 更新指示器
update_timer = sys.timerLoopStart(function()
if current_subpage and subpages[current_subpage] then
indicator_label:set_text("当前页面: " .. subpages[current_subpage].name)
end
end, 100)
-- 导航控制区域
local nav_container = airui.container({
parent = main_container,
x = 350,
y = 540,
w = 324,
h = 50,
color = 0xEDE7F6,
radius = 8,
})
-- 手动切换按钮
local prev_btn = airui.button({
parent = nav_container,
x = 10,
y = 5,
w = 100,
h = 40,
text = "◀ 上一页",
size = 14,
on_click = function()
local new_index = current_subpage - 1
if new_index < 1 then
new_index = #subpages
end
airui_switch_page.switch_to_page(new_index)
end
})
local next_btn = airui.button({
parent = nav_container,
x = 214,
y = 5,
w = 100,
h = 40,
text = "下一页 ▶",
size = 14,
on_click = function()
local new_index = current_subpage + 1
if new_index > #subpages then
new_index = 1
end
airui_switch_page.switch_to_page(new_index)
end
})
-- 当前页显示
local page_info = airui.label({
parent = nav_container,
text = "1/" .. #subpages,
x = 120,
y = 10,
w = 84,
h = 30,
size = 16,
})
-- 更新页码显示
sys.timerLoopStart(function()
if current_subpage then
page_info:set_text(current_subpage .. "/" .. #subpages)
end
end, 100)
-- 自动切换控制区域
local auto_container = airui.container({
parent = main_container,
x = 700,
y = 540,
w = 304,
h = 50,
color = 0xE8F5E9,
radius = 8,
})
-- 自动切换开关
local auto_switch = airui.switch({
parent = auto_container,
x = 10,
y = 10,
w = 60,
h = 30,
checked = false,
on_change = function(state)
if state then
log.info("switch_page", "启用自动切换")
else
log.info("switch_page", "禁用自动切换")
end
end
})
airui.label({
parent = auto_container,
text = "自动切换",
x = 80,
y = 15,
w = 80,
h = 20,
size = 14,
})
-- 自动切换定时器
local auto_counter = 0
-- 更新自动切换
auto_update_timer = sys.timerLoopStart(function()
local state = auto_switch:get_state()
if state then
auto_counter = auto_counter + 1
if auto_counter >= 5 then -- 5秒切换一次
auto_counter = 0
local new_index = current_subpage + 1
if new_index > #subpages then
new_index = 1
end
airui_switch_page.switch_to_page(new_index)
end
else
auto_counter = 0
end
end, 1000)
-- 间隔时间显示
local interval_label = airui.label({
parent = auto_container,
text = "间隔: 5秒",
x = 170,
y = 15,
w = 120,
h = 20,
size = 14,
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 使用标签或导航按钮在不同页面间切换，支持自动切换功能",
x = 20,
y = 570,
w = 600,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_switch_page.init(params)
current_subpage = 1
subpages = {}
tab_buttons = {}
airui_switch_page.create_ui()
end
-- 清理页面
function airui_switch_page.cleanup()
sys.timerStop(update_timer)
sys.timerStop(auto_update_timer)
if main_container then
main_container:destroy()
main_container = nil
end
current_subpage = nil
subpages = {}
tab_buttons = {} -- 清空按钮引用
end
return airui_switch_page
516 airui_table.lua 表格组件演示页面
本文件是表格组件的演示页面，展示表格的各种用法。
--[[
@module airui_table
@summary 表格组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是表格组件的演示页面，展示表格的各种用法。
]]
local airui_table = {}
-- 页面UI元素
local main_container = nil
local update_timer
-- 创建UI
function airui_table.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x607D8B,
})
airui.label({
parent = title_bar,
text = "表格组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local section_height = 130
-- 示例1: 基本表格（左列）
airui.label({
parent = scroll_container,
text = "示例1: 基本表格",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local basic_table = airui.table({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 150,
rows = 5,
cols = 4,
col_width = {100, 100, 100, 100},
border_color = 0x607D8B,
})
-- 设置表头
basic_table:set_cell_text(0, 0, "姓名")
basic_table:set_cell_text(0, 1, "年龄")
basic_table:set_cell_text(0, 2, "城市")
basic_table:set_cell_text(0, 3, "职业")
-- 设置数据
basic_table:set_cell_text(1, 0, "张三")
basic_table:set_cell_text(1, 1, "25")
basic_table:set_cell_text(1, 2, "北京")
basic_table:set_cell_text(1, 3, "工程师")
basic_table:set_cell_text(2, 0, "李四")
basic_table:set_cell_text(2, 1, "30")
basic_table:set_cell_text(2, 2, "上海")
basic_table:set_cell_text(2, 3, "设计师")
basic_table:set_cell_text(3, 0, "王五")
basic_table:set_cell_text(3, 1, "28")
basic_table:set_cell_text(3, 2, "广州")
basic_table:set_cell_text(3, 3, "产品经理")
basic_table:set_cell_text(4, 0, "赵六")
basic_table:set_cell_text(4, 1, "35")
basic_table:set_cell_text(4, 2, "深圳")
basic_table:set_cell_text(4, 3, "架构师")
-- 示例2: 不同边框颜色（右列）
airui.label({
parent = scroll_container,
text = "示例2: 不同边框颜色",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local color_table = airui.table({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 440,
h = 150,
rows = 4,
cols = 3,
col_width = {140, 140, 140},
border_color = 0xFF5722,
})
color_table:set_cell_text(0, 0, "产品名称")
color_table:set_cell_text(0, 1, "价格")
color_table:set_cell_text(0, 2, "库存")
color_table:set_cell_text(1, 0, "智能手机")
color_table:set_cell_text(1, 1, "￥2999")
color_table:set_cell_text(1, 2, "150")
color_table:set_cell_text(2, 0, "笔记本电脑")
color_table:set_cell_text(2, 1, "￥5999")
color_table:set_cell_text(2, 2, "80")
color_table:set_cell_text(3, 0, "平板电脑")
color_table:set_cell_text(3, 1, "￥1999")
color_table:set_cell_text(3, 2, "120")
-- 颜色选择按钮
local color_btn1 = airui.button({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 200,
w = 100,
h = 40,
text = "红色",
size = 14,
on_click = function()
color_table:set_border_color(0xF44336)
end
})
local color_btn2 = airui.button({
parent = scroll_container,
x = right_column_x + 140,
y = y_offset + 200,
w = 100,
h = 40,
text = "蓝色",
size = 14,
on_click = function()
color_table:set_border_color(0x2196F3)
end
})
local color_btn3 = airui.button({
parent = scroll_container,
x = right_column_x + 260,
y = y_offset + 200,
w = 100,
h = 40,
text = "绿色",
size = 14,
on_click = function()
color_table:set_border_color(0x4CAF50)
end
})
local color_btn4 = airui.button({
parent = scroll_container,
x = right_column_x + 380,
y = y_offset + 200,
w = 100,
h = 40,
text = "紫色",
size = 14,
on_click = function()
color_table:set_border_color(0x9C27B0)
end
})
y_offset = y_offset + 250
-- 示例3: 动态更新表格（左列）
airui.label({
parent = scroll_container,
text = "示例3: 动态更新表格",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local dynamic_table = airui.table({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 120,
rows = 3,
cols = 3,
col_width = {120, 120, 160},
border_color = 0x9C27B0,
})
dynamic_table:set_cell_text(0, 0, "时间")
dynamic_table:set_cell_text(0, 1, "温度")
dynamic_table:set_cell_text(0, 2, "湿度")
-- 动态更新数据
local update_counter = 0
update_timer = sys.timerLoopStart(function()
update_counter = update_counter + 1
local time_str = os.date("%H:%M:%S")
local temp = math.random(20, 30)
local humidity = math.random(40, 80)
dynamic_table:set_cell_text(1, 0, time_str)
dynamic_table:set_cell_text(1, 1, temp .. "°C")
dynamic_table:set_cell_text(1, 2, humidity .. "%")
if update_counter % 2 == 0 then
dynamic_table:set_cell_text(2, 0, "上次更新")
dynamic_table:set_cell_text(2, 1, temp .. "°C")
dynamic_table:set_cell_text(2, 2, humidity .. "%")
end
end, 1000)
-- 控制按钮
local stop_btn = airui.button({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 170,
w = 200,
h = 45,
text = "停止更新",
size = 16,
on_click = function(self)
if update_timer then
sys.timerStop(update_timer)
update_timer = nil
self:set_text("开始更新")
else
update_timer = sys.timerLoopStart(function()
update_counter = update_counter + 1
local time_str = os.date("%H:%M:%S")
local temp = math.random(20, 30)
local humidity = math.random(40, 80)
dynamic_table:set_cell_text(1, 0, time_str)
dynamic_table:set_cell_text(1, 1, temp .. "°C")
dynamic_table:set_cell_text(1, 2, humidity .. "%")
if update_counter % 2 == 0 then
dynamic_table:set_cell_text(2, 0, "上次更新")
dynamic_table:set_cell_text(2, 1, temp .. "°C")
dynamic_table:set_cell_text(2, 2, humidity .. "%")
end
end, 1000)
self:set_text("停止更新")
end
end
})
local reset_btn = airui.button({
parent = scroll_container,
x = left_column_x + 240,
y = y_offset + 170,
w = 200,
h = 45,
text = "重置表格",
size = 16,
on_click = function()
dynamic_table:set_cell_text(1, 0, "--:--:--")
dynamic_table:set_cell_text(1, 1, "0°C")
dynamic_table:set_cell_text(1, 2, "0%")
dynamic_table:set_cell_text(2, 0, "等待更新")
dynamic_table:set_cell_text(2, 1, "0°C")
dynamic_table:set_cell_text(2, 2, "0%")
end
})
-- 示例4: 调整列宽（右列）
airui.label({
parent = scroll_container,
text = "示例4: 调整列宽",
x = right_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local resize_table = airui.table({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 40,
w = 440,
h = 120,
rows = 3,
cols = 4,
col_width = {100, 100, 100, 100},
border_color = 0x009688,
})
resize_table:set_cell_text(0, 0, "科目")
resize_table:set_cell_text(0, 1, "语文")
resize_table:set_cell_text(0, 2, "数学")
resize_table:set_cell_text(0, 3, "英语")
resize_table:set_cell_text(1, 0, "成绩")
resize_table:set_cell_text(1, 1, "85")
resize_table:set_cell_text(1, 2, "92")
resize_table:set_cell_text(1, 3, "78")
resize_table:set_cell_text(2, 0, "总分")
resize_table:set_cell_text(2, 1, "255")
resize_table:set_cell_text(2, 2, "255")
resize_table:set_cell_text(2, 3, "255")
-- 列宽调整按钮
local resize_btn1 = airui.button({
parent = scroll_container,
x = right_column_x + 20,
y = y_offset + 170,
w = 100,
h = 40,
text = "窄列",
size = 14,
on_click = function()
resize_table:set_col_width(0, 70)
resize_table:set_col_width(1, 70)
resize_table:set_col_width(2, 70)
resize_table:set_col_width(3, 70)
end
})
local resize_btn2 = airui.button({
parent = scroll_container,
x = right_column_x + 140,
y = y_offset + 170,
w = 100,
h = 40,
text = "中列",
size = 14,
on_click = function()
resize_table:set_col_width(0, 100)
resize_table:set_col_width(1, 100)
resize_table:set_col_width(2, 100)
resize_table:set_col_width(3, 100)
end
})
local resize_btn3 = airui.button({
parent = scroll_container,
x = right_column_x + 260,
y = y_offset + 170,
w = 100,
h = 40,
text = "宽列",
size = 14,
on_click = function()
resize_table:set_col_width(0, 130)
resize_table:set_col_width(1, 130)
resize_table:set_col_width(2, 130)
resize_table:set_col_width(3, 130)
end
})
local reset_width_btn = airui.button({
parent = scroll_container,
x = right_column_x + 380,
y = y_offset + 170,
w = 100,
h = 40,
text = "重置",
size = 14,
on_click = function()
resize_table:set_col_width(0, 100)
resize_table:set_col_width(1, 100)
resize_table:set_col_width(2, 100)
resize_table:set_col_width(3, 100)
end
})
y_offset = y_offset + 230
-- 示例5: 快速创建表格（左列）
airui.label({
parent = scroll_container,
text = "示例5: 快速创建表格",
x = left_column_x,
y = y_offset,
w = 400,
h = 30,
size = 18,
})
local multi_row_table = airui.table({
parent = scroll_container,
x = left_column_x + 20,
y = y_offset + 40,
w = 440,
h = 200,
rows = 8,
cols = 3,
col_width = {140, 140, 140},
border_color = 0x673AB7,
})
multi_row_table:set_cell_text(0, 0, "编号")
multi_row_table:set_cell_text(0, 1, "产品名称")
multi_row_table:set_cell_text(0, 2, "库存量")
for i = 1, 7 do
multi_row_table:set_cell_text(i, 0, "P" .. i)
multi_row_table:set_cell_text(i, 1, "产品" .. i)
multi_row_table:set_cell_text(i, 2, tostring(math.random(10, 200)))
end
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 表格支持动态更新、样式调整和多行列配置",
x = 20,
y = 560,
w = 500,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_table.init(params)
math.randomseed(os.time())
airui_table.create_ui()
end
-- 清理页面
function airui_table.cleanup()
sys.timerStop(update_timer)
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_table
5.17 airui_tabview.lua 选项卡组件演示页面
本文件是选项卡组件的演示页面，展示选项卡的各种用法。
--[[
@module airui_tabview
@summary 选项卡组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage 本文件是选项卡组件的演示页面，展示选项卡的各种用法。
]]
local airui_tabview = {}
----------------------------------------------------------------
-- 页面UI元素
----------------------------------------------------------------
local main_container = nil
----------------------------------------------------------------
-- 辅助函数：创建演示卡片
----------------------------------------------------------------
local function create_demo_card(parent, title, x, y, width, height)
local card = airui.container({
parent = parent,
x = x,
y = y,
w = width,
h = height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card,
text = title,
x = 15,
y = 10,
w = width - 30,
h = 30,
color = 0x333333,
size = 16,
})
return card
end
----------------------------------------------------------------
-- 创建UI
----------------------------------------------------------------
function airui_tabview.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0xFF5722,
})
airui.label({
parent = title_bar,
text = "选项卡组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
color = 0xFFFFFF,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列网格布局
local left_column_x = 20
local right_column_x = 522
local current_y = 10
local card_width = 480
local card_height = 250
local card_gap_y = 20
--------------------------------------------------------------------
-- 示例1: 基本选项卡（左列）
--------------------------------------------------------------------
local card1 = create_demo_card(scroll_container, "示例1: 基本选项卡", left_column_x, current_y, card_width, card_height)
airui.label({
parent = card1,
text = "包含首页、消息、设置三个标签页",
x = 20,
y = 45,
w = card_width - 40,
h = 25,
color = 0x666666,
size = 14,
})
local basic_tabview = airui.tabview({
parent = card1,
x = 20,
y = 80,
w = card_width - 40,
h = 150,
tabs = { "首页", "消息", "设置" },
active = 0,
})
-- 获取各个页面的内容并添加组件
local tab1_content = basic_tabview:get_content(0)
if tab1_content then
airui.label({
parent = tab1_content,
text = "这是首页内容区域",
x = 20,
y = 20,
w = 420,
h = 30,
color = 0x333333,
size = 14,
})
airui.label({
parent = tab1_content,
text = "欢迎使用选项卡组件",
x = 20,
y = 60,
w = 420,
h = 30,
color = 0x666666,
size = 12,
})
end
local tab2_content = basic_tabview:get_content(1)
if tab2_content then
airui.label({
parent = tab2_content,
text = "这是消息页面",
x = 20,
y = 20,
w = 420,
h = 30,
color = 0x333333,
size = 14,
})
local msg_btn = airui.button({
parent = tab2_content,
x = 20,
y = 60,
w = 120,
h = 40,
text = "新消息",
size = 14,
on_click = function()
log.info("tabview", "新消息按钮被点击")
local msg = airui.msgbox({
text = "收到新消息",
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
msg:show()
end
})
end
local tab3_content = basic_tabview:get_content(2)
if tab3_content then
airui.label({
parent = tab3_content,
text = "这是设置页面",
x = 20,
y = 20,
w = 420,
h = 30,
color = 0x333333,
size = 14,
})
local setting_switch = airui.switch({
parent = tab3_content,
x = 20,
y = 60,
w = 60,
h = 30,
checked = true,
on_change = function(state)
log.info("tabview", "设置开关: " .. tostring(state))
local status = state and "开启" or "关闭"
local msg = airui.msgbox({
text = "通知已" .. status,
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
msg:show()
end
})
airui.label({
parent = tab3_content,
text = "启用通知",
x = 90,
y = 65,
w = 100,
h = 20,
color = 0x333333,
size = 12,
})
end
-- 示例2: 嵌套选项卡（右列）
local card2 = create_demo_card(scroll_container, "示例2: 嵌套选项卡", right_column_x, current_y, card_width, card_height)
airui.label({
parent = card2,
text = "在主容器中嵌套选项卡",
x = 20,
y = 45,
w = card_width - 40,
h = 25,
color = 0x666666,
size = 14,
})
local nested_container = airui.container({
parent = card2,
x = 20,
y = 80,
w = card_width - 40,
h = 150,
color = 0xFCE4EC,
radius = 8,
})
airui.label({
parent = nested_container,
text = "主容器中的嵌套选项卡",
x = 20,
y = 10,
w = 440,
h = 20,
color = 0x333333,
size = 12,
})
-- 在容器内创建嵌套的选项卡
local inner_tabview = airui.tabview({
parent = nested_container,
x = 10,
y = 40,
w = 440,
h = 100,
tabs = { "子页1", "子页2" },
active = 0,
})
-- 获取子页面内容
local inner_content1 = inner_tabview:get_content(0)
if inner_content1 then
airui.label({
parent = inner_content1,
text = "第一个子页面内容",
x = 20,
y = 20,
w = 400,
h = 30,
color = 0x333333,
size = 12,
})
end
local inner_content2 = inner_tabview:get_content(1)
if inner_content2 then
airui.label({
parent = inner_content2,
text = "第二个子页面内容",
x = 20,
y = 20,
w = 400,
h = 30,
color = 0x333333,
size = 12,
})
end
current_y = current_y + card_height + card_gap_y
--------------------------------------------------------------------
-- 示例3: 多选项卡演示（左列）
--------------------------------------------------------------------
local card3 = create_demo_card(scroll_container, "示例3: 多选项卡演示", left_column_x, current_y, card_width, card_height)
airui.label({
parent = card3,
text = "包含多个标签页的选项卡",
x = 20,
y = 45,
w = card_width - 40,
h = 25,
color = 0x666666,
size = 14,
})
local multi_tabview = airui.tabview({
parent = card3,
x = 20,
y = 80,
w = card_width - 40,
h = 150,
tabs = { "标签A", "标签B", "标签C", "标签D", "标签E" },
active = 0,
})
-- 为每个标签页添加内容
for i = 0, 4 do
local tab_content = multi_tabview:get_content(i)
if tab_content then
airui.label({
parent = tab_content,
text = "这是标签" .. string.char(65 + i) .. "的内容区域",
x = 20,
y = 20,
w = 420,
h = 30,
color = 0x333333,
size = 12,
})
airui.label({
parent = tab_content,
text = "第" .. (i + 1) .. "个标签页的详细信息",
x = 20,
y = 60,
w = 420,
h = 30,
color = 0x666666,
size = 12,
})
end
end
-- 示例4: 选项卡控制（右列）
local card4 = create_demo_card(scroll_container, "示例4: 选项卡控制", right_column_x, current_y, card_width, card_height)
airui.label({
parent = card4,
text = "动态控制选项卡的显示和切换",
x = 20,
y = 45,
w = card_width - 40,
h = 25,
color = 0x666666,
size = 14,
})
local control_tabview = airui.tabview({
parent = card4,
x = 20,
y = 80,
w = card_width - 40,
h = 120,
tabs = { "控制页1", "控制页2", "控制页3" },
active = 0,
})
-- 控制按钮
local switch_to_btn = airui.button({
parent = card4,
x = 20,
y = 210,
w = 140,
h = 45,
text = "切换到第2页",
size = 14,
on_click = function()
control_tabview:set_active(1)
log.info("tabview", "切换到第2个标签页")
end
})
local get_active_btn = airui.button({
parent = card4,
x = 180,
y = 210,
w = 140,
h = 45,
text = "获取当前页",
size = 14,
on_click = function()
local active_index = control_tabview:get_active()
local msg = airui.msgbox({
text = "当前活动标签页: " .. (active_index + 1),
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
msg:show()
end
})
local add_tab_btn = airui.button({
parent = card4,
x = 340,
y = 210,
w = 140,
h = 45,
text = "添加标签页",
size = 14,
on_click = function()
log.info("tabview", "添加标签页功能")
local msg = airui.msgbox({
text = "添加标签页功能需要扩展API支持",
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
msg:show()
end
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 选项卡支持多页面切换、嵌套和动态控制",
x = 20,
y = 560,
w = 500,
h = 25,
color = 0x666666,
size = 14,
})
end
----------------------------------------------------------------
-- 初始化页面
----------------------------------------------------------------
function airui_tabview.init(params)
airui_tabview.create_ui()
end
----------------------------------------------------------------
-- 清理页面
----------------------------------------------------------------
function airui_tabview.cleanup()
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_tabview
5.18 airui_win 窗口组件演示页面
本文件是窗口组件的演示页面，展示窗口的各种用法。
--[[
@module airui_win
@summary 窗口组件演示页面
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件是窗口组件的演示页面，展示窗口的各种用法。
]]
local airui_win = {}
-- 页面UI元素
local main_container = nil
local demo_windows = {}
-- 创建UI
function airui_win.create_ui()
-- 创建主容器
main_container = airui.container({
x = 0,
y = 0,
w = 1024,
h = 600,
color = 0xF5F5F5,
})
-- 标题栏
local title_bar = airui.container({
parent = main_container,
x = 0,
y = 0,
w = 1024,
h = 60,
color = 0x009688,
})
airui.label({
parent = title_bar,
text = "窗口组件演示",
x = 20,
y = 15,
w = 300,
h = 30,
size = 20,
})
-- 返回按钮
local back_btn = airui.button({
parent = title_bar,
x = 900,
y = 15,
w = 100,
h = 35,
text = "返回",
size = 16,
on_click = function()
go_back()
end
})
-- 滚动容器
local scroll_container = airui.container({
parent = main_container,
x = 0,
y = 70,
w = 1024,
h = 480,
color = 0xF5F5F5,
})
-- 使用两列网格布局
local left_column_x = 20
local right_column_x = 522
local y_offset = 10
local card_width = 480
local card_height = 220
local card_gap_y = 20
-- 示例1: 基本窗口（左列）
local card1 = airui.container({
parent = scroll_container,
x = left_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card1,
text = "示例1: 基本窗口",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card1,
text = "创建带标题和关闭按钮的基本窗口",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local basic_win_btn = airui.button({
parent = card1,
x = 150,
y = 80,
w = 180,
h = 50,
text = "打开基本窗口",
size = 16,
on_click = function()
-- 清理之前的窗口
for _, win in ipairs(demo_windows) do
if win then win:close() end
end
demo_windows = {}
local win = airui.win({
parent = airui.screen,
title = "基本窗口",
x = 250,
y = 150,
w = 500,
h = 350,
close_btn = true,
on_close = function(self)
log.info("airui_win", "基本窗口已关闭")
-- 从列表中移除
for i, w in ipairs(demo_windows) do
if w == self then
table.remove(demo_windows, i)
break
end
end
end
})
-- 添加到窗口列表
table.insert(demo_windows, win)
-- 添加窗口内容
airui.label({
parent = win,
text = "这是一个基本窗口演示",
x = 30,
y = 30,
w = 440,
h = 40,
size = 16,
})
airui.label({
parent = win,
text = "窗口支持移动、调整大小和关闭操作",
x = 30,
y = 80,
w = 440,
h = 30,
size = 14,
})
-- 关闭按钮
local close_btn = airui.button({
parent = win,
text = "关闭窗口",
x = 180,
y = 150,
w = 140,
h = 50,
size = 16,
on_click = function()
win:close()
end
})
-- 更多内容
airui.label({
parent = win,
text = "窗口特性:",
x = 30,
y = 220,
w = 440,
h = 25,
size = 14,
})
local feature1 = airui.switch({
parent = win,
x = 30,
y = 250,
w = 60,
h = 30,
checked = true,
on_change = function(state)
log.info("airui_win", "特性1: " .. tostring(state))
end
})
airui.label({
parent = win,
text = "可移动",
x = 100,
y = 255,
w = 80,
h = 20,
size = 12,
})
local feature2 = airui.switch({
parent = win,
x = 190,
y = 250,
w = 60,
h = 30,
checked = true,
on_change = function(state)
log.info("airui_win", "特性2: " .. tostring(state))
end
})
airui.label({
parent = win,
text = "可调整大小",
x = 260,
y = 255,
w = 100,
h = 20,
size = 12,
})
local feature3 = airui.switch({
parent = win,
x = 370,
y = 250,
w = 60,
h = 30,
checked = false,
on_change = function(state)
log.info("airui_win", "特性3: " .. tostring(state))
end
})
airui.label({
parent = win,
text = "置顶显示",
x = 440,
y = 255,
w = 80,
h = 20,
size = 12,
})
end
})
-- 示例2: 模态窗口（右列）
local card2 = airui.container({
parent = scroll_container,
x = right_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card2,
text = "示例2: 模态窗口",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card2,
text = "创建阻止背景交互的模态窗口",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local modal_win_btn = airui.button({
parent = card2,
x = 150,
y = 80,
w = 180,
h = 50,
text = "打开模态窗口",
size = 16,
on_click = function()
-- 清理之前的窗口
for _, win in ipairs(demo_windows) do
if win then win:close() end
end
demo_windows = {}
local win = airui.win({
parent = airui.screen,
title = "模态窗口",
x = 300,
y = 180,
w = 400,
h = 280,
close_btn = true,
modal = true,
on_close = function(self)
log.info("airui_win", "模态窗口已关闭")
for i, w in ipairs(demo_windows) do
if w == self then
table.remove(demo_windows, i)
break
end
end
end
})
table.insert(demo_windows, win)
airui.label({
parent = win,
text = "这是一个模态窗口",
x = 30,
y = 30,
w = 340,
h = 40,
size = 16,
})
airui.label({
parent = win,
text = "模态窗口会阻止背景的交互操作",
x = 30,
y = 80,
w = 340,
h = 30,
size = 14,
})
airui.label({
parent = win,
text = "请先关闭此窗口才能操作其他部分",
x = 30,
y = 120,
w = 340,
h = 30,
size = 14,
})
local confirm_btn = airui.button({
parent = win,
text = "确认",
x = 100,
y = 170,
w = 90,
h = 45,
size = 14,
on_click = function()
win:close()
end
})
local cancel_btn = airui.button({
parent = win,
text = "取消",
x = 210,
y = 170,
w = 90,
h = 45,
size = 14,
on_click = function()
win:close()
end
})
end
})
y_offset = y_offset + card_height + card_gap_y
-- 示例3: 多个窗口（左列）
local card3 = airui.container({
parent = scroll_container,
x = left_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card3,
text = "示例3: 多个窗口",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card3,
text = "同时创建和管理多个窗口",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local multi_win_btn = airui.button({
parent = card3,
x = 50,
y = 80,
w = 180,
h = 50,
text = "窗口1",
size = 16,
on_click = function()
local win = airui.win({
parent = airui.screen,
title = "窗口1",
x = 100 + #demo_windows * 20,
y = 100 + #demo_windows * 20,
w = 350,
h = 250,
close_btn = true,
on_close = function(self)
log.info("airui_win", "窗口1已关闭")
for i, w in ipairs(demo_windows) do
if w == self then
table.remove(demo_windows, i)
break
end
end
end
})
table.insert(demo_windows, win)
airui.label({
parent = win,
text = "这是窗口1",
x = 30,
y = 30,
w = 290,
h = 40,
size = 16,
})
airui.label({
parent = win,
text = "窗口ID: " .. #demo_windows,
x = 30,
y = 80,
w = 290,
h = 30,
size = 14,
})
local close_btn = airui.button({
parent = win,
text = "关闭",
x = 130,
y = 130,
w = 90,
h = 45,
size = 14,
on_click = function()
win:close()
end
})
end
})
local multi_win_btn2 = airui.button({
parent = card3,
x = 250,
y = 80,
w = 180,
h = 50,
text = "窗口2",
size = 16,
on_click = function()
local win = airui.win({
parent = airui.screen,
title = "窗口2",
x = 150 + #demo_windows * 20,
y = 150 + #demo_windows * 20,
w = 400,
h = 300,
close_btn = true,
on_close = function(self)
log.info("airui_win", "窗口2已关闭")
for i, w in ipairs(demo_windows) do
if w == self then
table.remove(demo_windows, i)
break
end
end
end
})
table.insert(demo_windows, win)
airui.label({
parent = win,
text = "这是窗口2",
x = 30,
y = 30,
w = 340,
h = 40,
size = 16,
})
airui.label({
parent = win,
text = "支持更多内容显示",
x = 30,
y = 80,
w = 340,
h = 30,
size = 14,
})
-- 添加一些控件
local switch1 = airui.switch({
parent = win,
x = 30,
y = 130,
w = 60,
h = 30,
checked = true,
on_change = function(state)
log.info("airui_win", "窗口2开关1: " .. tostring(state))
end
})
airui.label({
parent = win,
text = "选项1",
x = 100,
y = 135,
w = 80,
h = 20,
size = 12,
})
local switch2 = airui.switch({
parent = win,
x = 30,
y = 170,
w = 60,
h = 30,
checked = false,
on_change = function(state)
log.info("airui_win", "窗口2开关2: " .. tostring(state))
end
})
airui.label({
parent = win,
text = "选项2",
x = 100,
y = 175,
w = 80,
h = 20,
size = 12,
})
local close_btn = airui.button({
parent = win,
text = "关闭窗口",
x = 150,
y = 220,
w = 100,
h = 45,
size = 14,
on_click = function()
win:close()
end
})
end
})
-- 窗口管理按钮
local close_all_btn = airui.button({
parent = card3,
x = 50,
y = 150,
w = 180,
h = 45,
text = "关闭所有窗口",
size = 14,
on_click = function()
for _, win in ipairs(demo_windows) do
if win then win:close() end
end
demo_windows = {}
log.info("airui_win", "已关闭所有窗口")
end
})
local count_btn = airui.button({
parent = card3,
x = 250,
y = 150,
w = 180,
h = 45,
text = "统计窗口数",
size = 14,
on_click = function()
local msg = airui.msgbox({
text = "当前打开窗口数: " .. #demo_windows,
buttons = { "确定" },
timeout = 1500,
on_action = function(self, label)
self:hide()
end
})
msg:show()
end
})
-- 示例4: 窗口控制（右列）
local card4 = airui.container({
parent = scroll_container,
x = right_column_x,
y = y_offset,
w = card_width,
h = card_height,
color = 0xFFFFFF,
radius = 12,
})
airui.label({
parent = card4,
text = "示例4: 窗口控制",
x = 15,
y = 10,
w = 450,
h = 30,
size = 16,
})
airui.label({
parent = card4,
text = "动态控制窗口的位置和大小",
x = 15,
y = 45,
w = 450,
h = 25,
color = 0x666666,
size = 14,
})
local control_win_btn = airui.button({
parent = card4,
x = 150,
y = 80,
w = 180,
h = 50,
text = "创建可控窗口",
size = 16,
on_click = function()
-- 清理之前的窗口
for _, win in ipairs(demo_windows) do
if win then win:close() end
end
demo_windows = {}
local win = airui.win({
parent = airui.screen,
title = "可控窗口",
x = 300,
y = 150,
w = 400,
h = 300,
close_btn = true,
on_close = function(self)
log.info("airui_win", "可控窗口已关闭")
for i, w in ipairs(demo_windows) do
if w == self then
table.remove(demo_windows, i)
break
end
end
end
})
table.insert(demo_windows, win)
airui.label({
parent = win,
text = "可控窗口演示",
x = 30,
y = 30,
w = 340,
h = 40,
size = 16,
})
airui.label({
parent = win,
text = "使用下方按钮控制窗口",
x = 30,
y = 80,
w = 340,
h = 30,
size = 14,
})
-- 控制按钮
local move_btn = airui.button({
parent = win,
text = "移动窗口",
x = 30,
y = 130,
w = 100,
h = 40,
size = 12,
on_click = function()
win:move(350, 200)
log.info("airui_win", "窗口移动到(350, 200)")
end
})
local resize_btn = airui.button({
parent = win,
text = "调整大小",
x = 150,
y = 130,
w = 100,
h = 40,
size = 12,
on_click = function()
win:resize(450, 350)
log.info("airui_win", "窗口大小调整为450x350")
end
})
local hide_btn = airui.button({
parent = win,
text = "隐藏窗口",
x = 270,
y = 130,
w = 100,
h = 40,
size = 12,
on_click = function()
win:hide()
log.info("airui_win", "窗口已隐藏")
end
})
local show_btn = airui.button({
parent = win,
text = "显示窗口",
x = 30,
y = 180,
w = 100,
h = 40,
size = 12,
on_click = function()
win:show()
log.info("airui_win", "窗口已显示")
end
})
local minimize_btn = airui.button({
parent = win,
text = "最小化",
x = 150,
y = 180,
w = 100,
h = 40,
size = 12,
on_click = function()
log.info("airui_win", "最小化窗口")
-- 这里需要根据AirUI的API实现最小化功能
end
})
local maximize_btn = airui.button({
parent = win,
text = "最大化",
x = 270,
y = 180,
w = 100,
h = 40,
size = 12,
on_click = function()
log.info("airui_win", "最大化窗口")
-- 这里需要根据AirUI的API实现最大化功能
end
})
end
})
-- 底部信息
airui.label({
parent = main_container,
text = "提示: 窗口支持移动、调整大小、模态显示和多窗口管理",
x = 20,
y = 560,
w = 600,
h = 25,
size = 14,
})
end
-- 初始化页面
function airui_win.init(params)
demo_windows = {}
airui_win.create_ui()
end
-- 清理页面
function airui_win.cleanup()
-- 清理所有打开的窗口
for _, win in ipairs(demo_windows) do
if win then win:close() end
end
demo_windows = {}
if main_container then
main_container:destroy()
main_container = nil
end
end
return airui_win
5.19 lcd_drv.lua LCD 显示驱动模块，基于 lcd 核心库
本模块为 LCD 显示驱动功能模块，主要功能包括：
1、初始化 LCD 屏幕；
2、配置 LCD 显示参数和显示缓冲区；
3、初始化 AirUI;
4、支持多种屏幕方向和分辨率设置；
--[[
@module lcd_drv
@summary LCD显示驱动模块，基于lcd核心库
@version 1.0
@date 2025.12.1
@author 江访
@usage
本模块为LCD显示驱动功能模块，主要功能包括：
1、初始化 LCD屏幕；
2、配置LCD显示参数和显示缓冲区；
3、初始化AirUI;
4、支持多种屏幕方向和分辨率设置；
对外接口：
1、lcd_drv.init()：初始化LCD显示驱动
]]
local lcd_drv = {}
--[[
初始化LCD显示驱动；
@api lcd_drv.init()
@summary 配置并初始化LCD屏幕
@return boolean 初始化成功返回true，失败返回false
@usage
-- 初始化LCD显示
local result = lcd_drv.init()
if result then
log.info("LCD初始化成功")
else
log.error("LCD初始化失败")
end
]]
local port, pin_reset, bl = lcd.RGB, 22, 23
function lcd_drv.init()
-- 开启屏幕供电
gpio.setup(141, 1)
local result = lcd.init("custom", {
port = port,
hbp = 140,
hspw = 20,
hfp = 160,
vbp = 20,
vspw = 3,
vfp = 12,
bus_speed = 50 * 1000 * 1000,
pin_pwr = bl,
pin_rst = pin_reset,
direction = 0,
w = 1024,
h = 600
})
log.info("lcd.init", result)
if result then
-- 开启缓冲区, 刷屏速度会加快, 但也消耗2倍屏幕分辨率的内存
lcd.setupBuff(nil, true)
lcd.autoFlush(false)
-- 初始化AirUI
local width, height = lcd.getSize()
local result = airui.init(width, height)
if not result then
log.error("airui", "init failed")
return result
end
-- 开启背光引脚供电
gpio.setup(8, 1)
return result
end
return result
end
return lcd_drv
5.20 tp_drv.lua 触摸面板驱动模块，基于 tp 核心库
本模块为触摸面板驱动功能模块，主要功能包括：
1、初始化 GT911 触摸控制器；
2、配置 I2C 通信接口和触摸回调函数；
3、发布触摸事件消息供 UI 系统处理；
--[[
@module tp_drv
@summary 触摸面板驱动模块，基于tp核心库(Air1601版本)
@version 1.0
@date 2026.03.16
@author 孙志鹏
@usage
本模块为触摸面板驱动功能模块，主要功能包括：
1、初始化GT911触摸控制器；
2、配置I2C通信接口和触摸回调函数；
3、发布触摸事件消息供UI系统处理；
对外接口：
1、tp_drv.init()：初始化触摸面板驱动
]]
--[[
touch事件回调函数；
初始化触摸面板驱动；
@api tp_drv.init()
@summary 配置并初始化GT911触摸控制器
@return boolean 初始化成功返回true，失败返回false
@usage
-- 初始化触摸面板
local result = tp_drv.init()
if result then
log.info("触摸面板初始化成功")
else
log.error("触摸面板初始化失败")
end
]]
local rst_pin = 2
local int_pin = 51
local is_soft_i2c = false
local port = 1
if is_soft_i2c then
port = i2c.createSoft(55, 54) -- scl, sda, delay (修改为GPIO8和GPIO14)
else
i2c.setup(port, i2c.SLOW)
end
local function tp_drv_init()
-- 初始化软件I2C，接口i2c.createSoft(scl, sda, delay)
-- 初始化复位引脚GPIO4，先拉低再关闭，确保不被拉高
gpio.setup(rst_pin, 0) -- 设置GPIO4为输出模式，输出低电平
gpio.close(rst_pin) -- 关闭GPIO4功能，恢复高阻态
if not is_soft_i2c then
i2c.setup(port, i2c.SLOW)
end
-- 此处触摸IC数据读取使用的是软件I2C接口
-- 参数说明：
-- "gt911": 触摸控制器型号
-- port: I2C接口对象
-- pin_rst: 复位引脚编号
-- pin_int: 中断引脚编号
-- w: 触摸面板宽度
-- h: 触摸面板高度
result = tp.init("gt911", {
port = port,
pin_rst = rst_pin,
pin_int = int_pin,
int_type = 1,
w = 1024,
h = 600
})
log.info("tp.init", result)
if not result then
log.error("ui_main", "触摸初始化失败")
return result
else
-- 绑定触摸设备到AirUI输入设备
return airui.device_bind_touch(result)
end
end
tp_drv_init()
5.21 ui_main.lua UI 主程序，负责页面管理和主循环
本文件管理所有 UI 页面，包括主页和各个演示页面。
--[[
@module ui_main
@summary UI主程序，负责页面管理和主循环
@version 1.0.0
@date 2026.01.30
@author 江访
@usage
本文件管理所有UI页面，包括主页和各个演示页面。
]]
require("airui_home")
require("airui_label")
require("airui_button")
require("airui_container")
require("airui_bar")
require("airui_switch")
require("airui_dropdown")
require("airui_table")
require("airui_input")
require("airui_msgbox")
require("airui_image")
require("airui_tabview")
require("airui_win")
require("airui_switch_page")
require("airui_hzfont")
--require("airui_game")
require("airui_chart")
require("airui_qrcode")
require("airui_all_component")
-- 当前显示的页面
local current_page = nil
local page_stack = {} -- 页面，用于返回功能
local frame_time = 50 -- 主循环刷新间隔，单位ms
local function meminfo_information()
local total_lua, used_lua, max_used_lua = rtos.meminfo("lua")
local total_sys, used_sys, max_used_sys = rtos.meminfo("sys")
log.info("内存信息",
"Lua - 总:", total_lua, "已用:", used_lua, "峰值:", max_used_lua,
"系统 - 总:", total_sys, "已用:", used_sys, "峰值:", max_used_sys)
end
-- 页面定义
local pages = {
home = "airui_home", -- 主页
label = "airui_label", -- 标签演示
button = "airui_button", -- 按钮演示
container = "airui_container", -- 容器演示
bar = "airui_bar", -- 进度条演示
switch = "airui_switch", -- 开关演示
dropdown = "airui_dropdown", -- 下拉框演示
table = "airui_table", -- 表格演示
input = "airui_input", -- 输入框演示
msgbox = "airui_msgbox", -- 消息框演示
image = "airui_image", -- 图片演示
tabview = "airui_tabview", -- 选项卡演示
win = "airui_win", -- 窗口演示
airui_switch_page = "airui_switch_page", -- 页面切换演示
hzfont = "airui_hzfont", -- 矢量字体演示
qrcode = "airui_qrcode", -- 二维码演示
all_component = "airui_all_component", -- 所有组件演示
}
-- 显示指定页面
local function show_page(page_name, params)
-- 保存当前页面
if not params or not params.from_back then
if current_page then
table.insert(page_stack, {
name = current_page.name,
instance = current_page.instance
})
end
end
-- 清理当前页面
if current_page and current_page.instance.cleanup then
current_page.instance.cleanup()
end
-- 加载新页面
local module_name = pages[page_name]
if not module_name then
log.error("ui_main", "页面不存在:", page_name)
return false
end
local page_module = require(module_name)
-- 初始化页面
if page_module.init then
page_module.init(params)
end
-- 更新当前页面信息
current_page = {
name = page_name,
module = module_name,
instance = page_module
}
log.info("ui_main", "切换到页面:", page_name)
return true
end
-- 返回上一个页面
local function go_back()
if #page_stack > 0 then
local prev_page = table.remove(page_stack)
if prev_page.instance and prev_page.instance.show then
prev_page.instance.show()
current_page = prev_page
log.info("ui_main", "返回页面:", prev_page.name)
return true
else
return show_page(prev_page.name, { from_back = true })
end
else
return show_page("home", { from_back = true })
end
end
-- 主任务函数
local function ui_main_task()
-- 初始化硬件
sys.timerLoopStart(meminfo_information, 5000)
-- 加载字体
airui.font_load({
type = "hzfont",
path = nil,
size = 14,
cache_size = 1024,
antialias = 2,
})
-- 显示主页
show_page("home")
end
-- 全局函数，方便页面调用
_G.show_page = show_page
_G.go_back = go_back
-- 启动UI主任务
sys.taskInit(ui_main_task)
七、显示效果展示
7.1 硬件准备
- 按照第三章节说明连接所有设备
- 通过 TYPE-C USB 口供电
- 检查所有接线无误
7.2 软件烧录
- 使用 Luatools 烧录最新内核固件
- 下载并烧录本项目所有脚本文件
- 烧录成功后设备自动重启后开始运行
7.3 功能测试
7.3.1 主页面
7.3.2 所有组件页面
7.3.3 进度条组件页面
7.3.4 输入框组件页面
7.3.5 窗口组件页面
7.3.6 标签组件页面
7.3.7 开关组件页面
7.3.8 消息框组件页面
7.3.9 页面切换演示页面
7.3.10 下拉框组件页面
7.3.11 图片组件页面
7.3.12 矢量字体演示页面
7.3.13 容器组件页面
7.3.14 表格组件页面
7.3.15 选项卡组件页面
7.3.16 二维码组件演示页面
八、常见问题
- 显示异常：请检查 LCD 接线是否正确，确认对应驱动文件中的硬件参数设置无误；同时检查 I2C/DISP/BL 开关是否已拨至正确位置。
- 触摸无响应：请检查 TP 飞线连接是否虚焊，确认对应驱动文件中的硬件参数设置无误。
- 图片无法显示：确认图片文件已正确烧录到指定路径。