win_switch_page.lua 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. --[[
  2. @module win_switch_page
  3. @summary 页面切换演示模块
  4. @version 1.0.0
  5. @date 2025.11.28
  6. @author 江访
  7. @usage
  8. 本文件为页面切换演示模块,核心业务逻辑为:
  9. 1、创建主页面窗口容器;
  10. 2、配置多个子页面工厂函数;
  11. 3、实现页面间切换导航功能;
  12. 4、演示消息框页面和复选框页面;
  13. 5、实现子页面销毁和内存管理;
  14. 6、启动UI渲染循环持续刷新显示;
  15. 本文件没有对外接口;
  16. ]]
  17. -- 创建消息框演示页面
  18. local function msgbox_page()
  19. local win = ui.window({ background_color = ui.COLOR_WHITE })
  20. -- 创建页面标题(使用无按钮的消息框)
  21. local title = ui.message_box({
  22. x = 10, y = 10,
  23. w = 300, h = 80,
  24. title = "消息框页面",
  25. message = "点击按钮弹出消息框",
  26. buttons = {} -- 空按钮数组,不显示按钮
  27. })
  28. -- 创建"弹出消息框"按钮
  29. local btn = ui.button({
  30. x = 20, y = 140,
  31. w = 180, h = 50,
  32. text = "弹出消息框",
  33. on_click = function()
  34. -- 创建消息框
  35. local box = ui.message_box({
  36. x = 40, y = 210,
  37. w = 240, h = 120,
  38. title = "提示",
  39. message = "这是一条消息",
  40. buttons = { "确定", "取消" },
  41. on_result = function()
  42. -- 处理按钮点击逻辑
  43. end
  44. })
  45. ui.add(box)
  46. end
  47. })
  48. -- 创建"返回"按钮
  49. local back = ui.button({
  50. x = 220, y = 140,
  51. w = 80, h = 50,
  52. text = "返回",
  53. on_click = function()
  54. win:back() -- 返回主页
  55. end
  56. })
  57. -- 添加组件到窗口
  58. win:add(title)
  59. win:add(btn)
  60. win:add(back)
  61. return win
  62. end
  63. -- 创建复选框演示页面
  64. local function check_box_page()
  65. local win = ui.window({ background_color = ui.COLOR_WHITE })
  66. -- 创建页面标题
  67. local title = ui.message_box({
  68. x = 10, y = 10,
  69. w = 300, h = 80,
  70. title = "复选框页面",
  71. message = "演示多个check_box",
  72. buttons = {}
  73. })
  74. -- 创建三个复选框
  75. local cb1 = ui.check_box({ x = 20, y = 120, text = "选项A" })
  76. local cb2 = ui.check_box({ x = 20, y = 160, text = "选项B", checked = true })
  77. local cb3 = ui.check_box({ x = 20, y = 200, text = "选项C" })
  78. -- 创建返回按钮
  79. local back = ui.button({
  80. x = 20, y = 260,
  81. w = 120, h = 40,
  82. text = "返回主页",
  83. on_click = function()
  84. win:back()
  85. end
  86. })
  87. -- 添加组件到窗口
  88. win:add(title)
  89. win:add(cb1)
  90. win:add(cb2)
  91. win:add(cb3)
  92. win:add(back)
  93. return win
  94. end
  95. -- 主程序入口函数
  96. local function ui_main()
  97. -- 显示触摸初始化
  98. hw_font_drv.init()
  99. -- 设置主题
  100. ui.sw_init({ theme = "light" })
  101. -- 创建主页面
  102. local home = ui.window({ background_color = ui.COLOR_WHITE })
  103. -- 配置子页面工厂函数
  104. home:configure_subpages({
  105. page1 = msgbox_page, -- 消息框演示页面
  106. page2 = check_box_page -- 复选框演示页面
  107. })
  108. -- 创建导航按钮1:进入复选框示例页面
  109. local btn1 = ui.button({
  110. x = 20, y = 60,
  111. w = 280, h = 50,
  112. text = "复选框示例",
  113. on_click = function()
  114. home:show_subpage("page2")
  115. end
  116. })
  117. -- 创建导航按钮2:进入消息框示例页面
  118. local btn2 = ui.button({
  119. x = 20, y = 130,
  120. w = 280, h = 50,
  121. text = "消息框示例",
  122. on_click = function()
  123. home:show_subpage("page1")
  124. end
  125. })
  126. -- 创建功能按钮:移除复选框子界面(演示销毁功能)
  127. local btnRemove = ui.button({
  128. x = 20, y = 200,
  129. w = 280, h = 50,
  130. text = "移除复选框子界面(销毁)",
  131. on_click = function()
  132. -- 强制销毁缓存的check_box子页面,释放内存
  133. home:close_subpage("page2", { destroy = true })
  134. end
  135. })
  136. -- 添加按钮到主页面
  137. home:add(btn1)
  138. home:add(btn2)
  139. home:add(btnRemove)
  140. -- 注册主页面到UI系统
  141. ui.add(home)
  142. end
  143. sys.taskInit(ui_main)