--[[ @module bar_page @summary 进度条组件演示页面 @version 1.0 @date 2026.02.05 @author 江访 @usage 本文件是进度条组件的演示页面,展示进度条的各种用法。 ]] local bar_page = {} -- 页面UI元素 local main_container = nil local progress_value = 0 local value_label local update_timer local animated_bar -- 创建UI function bar_page.create_ui() -- 创建主容器 main_container = airui.container({ x = 0, y = 0, w = 320, h = 480, color = 0xF5F5F5, }) -- 标题栏 local title_bar = airui.container({ parent = main_container, x = 0, y = 0, w = 320, h = 50, color = 0x9C27B0, }) airui.label({ parent = title_bar, text = "进度条组件演示", x = 10, y = 15, w = 200, h = 20, font_size = 16, color = 0xFFFFFF, }) -- 返回按钮 local back_btn = airui.button({ parent = title_bar, x = 250, y = 10, w = 60, h = 30, text = "返回", on_click = function(self) go_back() end }) -- 滚动容器 local scroll_container = airui.container({ parent = main_container, x = 0, y = 60, w = 320, h = 370, color = 0xF5F5F5, }) -- 示例1: 基本进度条 airui.label({ parent = scroll_container, text = "示例1: 基本进度条", x = 10, y = 10, w = 300, h = 20, font_size = 14, }) local basic_bar = airui.bar({ parent = scroll_container, x = 20, y = 40, w = 280, h = 20, value = 30, min = 0, max = 100, radius = 10, indicator_color = 0x4CAF50, }) -- 示例2: 带边框的进度条 airui.label({ parent = scroll_container, text = "示例2: 带边框进度条", x = 10, y = 80, w = 300, h = 20, font_size = 14, }) local bordered_bar = airui.bar({ parent = scroll_container, x = 20, y = 110, w = 280, h = 25, value = 50, min = 0, max = 100, radius = 12, border_width = 2, border_color = 0x9C27B0, indicator_color = 0x9C27B0, bg_color = 0xF3E5F5, }) -- 示例3: 动画进度条 airui.label({ parent = scroll_container, text = "示例3: 动画进度条", x = 10, y = 150, w = 300, h = 20, font_size = 14, }) -- 显示当前值 value_label = airui.label({ parent = scroll_container, text = "当前值: 0%", x = 210, y = 225, w = 90, h = 30, font_size = 14, }) animated_bar = airui.bar({ parent = scroll_container, x = 20, y = 180, w = 280, h = 25, value = 0, min = 0, max = 100, radius = 12, indicator_color = 0x2196F3, show_progress_text = true, -- v1.0.3 新增 progress_text_format = "%d%%", }) -- 控制按钮 local start_btn = airui.button({ parent = scroll_container, x = 20, y = 220, w = 80, h = 40, text = "开始", on_click = function(self) if update_timer then sys.timerStop(update_timer) update_timer = nil self:set_text("开始") else self:set_text("停止") 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 self:set_text("开始") end end, 200) end end }) local reset_btn = airui.button({ parent = scroll_container, x = 120, y = 220, w = 80, h = 40, text = "重置", on_click = function(self) if update_timer then sys.timerStop(update_timer) update_timer = nil start_btn:set_text("开始") end animated_bar:set_value(0, true) end }) -- 示例4: 不同颜色进度条 airui.label({ parent = scroll_container, text = "示例4: 不同颜色进度条", x = 10, y = 280, w = 300, h = 20, font_size = 14, }) local color_bar = airui.bar({ parent = scroll_container, x = 20, y = 310, w = 280, h = 20, value = 75, min = 0, max = 100, radius = 10, indicator_color = 0xFF5722, }) -- 颜色选择 local color_btn1 = airui.button({ parent = scroll_container, x = 20, y = 340, w = 60, h = 30, text = "红色", on_click = function(self) color_bar:set_indicator_color(0xF44336) end }) local color_btn2 = airui.button({ parent = scroll_container, x = 90, y = 340, w = 60, h = 30, text = "绿色", on_click = function(self) color_bar:set_indicator_color(0x4CAF50) end }) local color_btn3 = airui.button({ parent = scroll_container, x = 160, y = 340, w = 60, h = 30, text = "蓝色", on_click = function(self) color_bar:set_indicator_color(0x2196F3) end }) local color_btn4 = airui.button({ parent = scroll_container, x = 230, y = 340, w = 60, h = 30, text = "紫色", on_click = function(self) color_bar:set_indicator_color(0x9C27B0) end }) -- 底部信息 airui.label({ parent = main_container, text = "提示: 进度条支持动画和颜色自定义", x = 10, y = 440, w = 300, h = 20, font_size = 14, }) end -- 初始化页面 function bar_page.init(params) progress_value = 0 bar_page.create_ui() end -- 清理页面 function bar_page.cleanup() if update_timer then sys.timerStop(update_timer) update_timer = nil end if main_container then main_container:destroy() main_container = nil end end return bar_page