9102_LUA/script/ui/input_page.lua

--[[
@module  input_page
@summary 输入框组件演示页面
@version 1.0
@date    2026.02.05
@author  江访
@usage
本文件是输入框组件的演示页面，展示输入框的各种用法。
]]

local input_page = {}

-- 页面UI元素
local main_container = nil

-- 创建UI
function input_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 = 0x3F51B5,
    })

    -- 注册虚拟键盘，先创建再在 textarea 配置里复用
    local keyboard1 = airui.keyboard({
        x = 0,
        y = 0,
        w = 320,
        h = 220,                        -- x, y, 键盘默认打开ALIGN_BOTTOM_MID，位置从中下方开始计算
        mode = "text",                  -- 键盘模式，可选 "text"/"upper"/"lower"/"numeric"
        auto_hide = true,               -- 自动隐藏键盘
        bg_color = 0xf1f1f1,            -- 键盘背景颜色为灰色，可选，不设置则透明
        on_commit = function()          -- 确认事件回调，只有在按下确认键时才会触发
            log.info("keyboard", "commit")
        end
    })

    local keyboard2 = airui.keyboard({
        x = 0,
        y = 0,
        w = 320,
        h = 220,                        -- x, y, 键盘默认打开ALIGN_BOTTOM_MID，位置从中下方开始计算
        mode = "numeric",               -- 键盘模式，可选 "text"/"upper"/"lower"/"numeric"
        auto_hide = true,               -- 自动隐藏键盘
        bg_color = 0xf1f1f1,            -- 键盘背景颜色为灰色，可选，不设置则透明
        on_commit = function()          -- 确认事件回调，只有在按下确认键时才会触发
            log.info("keyboard", "commit")
        end
    })

    local keyboard3 = airui.keyboard({
        x = 0,
        y = 0,
        w = 320,
        h = 220,                        -- x, y, 键盘默认打开ALIGN_BOTTOM_MID，位置从中下方开始计算
        mode = "lower",                 -- 键盘模式，可选 "text"/"upper"/"lower"/"numeric"
        auto_hide = true,               -- 自动隐藏键盘
        bg_color = 0xf1f1f1,            -- 键盘背景颜色为灰色，可选，不设置则透明
        on_commit = function()          -- 确认事件回调，只有在按下确认键时才会触发
            log.info("keyboard", "commit")
        end
    })

    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,
    })

    -- 创建键盘并关联输入框（v1.0.3 推荐内嵌键盘配置）
    local basic_input = airui.textarea({
        parent = scroll_container,
        x = 20,
        y = 40,
        w = 280,
        h = 100,
        text = "",
        placeholder = "请输入文本...",
        max_len = 100,
        keyboard = keyboard1

    })

    -- 示例2: 带默认值的输入框
    airui.label({
        parent = scroll_container,
        text = "示例2: 带默认值",
        x = 10,
        y = 160,
        w = 300,
        h = 20,
        font_size = 14,
    })

    local default_input = airui.textarea({
        parent = scroll_container,
        x = 20,
        y = 190,
        w = 280,
        h = 60,
        text = "默认文本",
        placeholder = "请输入...",
        max_len = 50,
        keyboard = keyboard1
    })

    -- 示例3: 数字输入框
    airui.label({
        parent = scroll_container,
        text = "示例3: 数字输入框",
        x = 10,
        y = 270,
        w = 300,
        h = 20,
        font_size = 14,
    })

    local number_input = airui.textarea({
        parent = scroll_container,
        x = 20,
        y = 300,
        w = 280,
        h = 60,
        text = "",
        placeholder = "请输入数字...",
        max_len = 20,
        keyboard = keyboard2
    })

    airui.label({
        parent = scroll_container,
        text = "（使用数字键盘）",
        x = 20,
        y = 365,
        w = 280,
        h = 20,
        font_size = 12,
        color = 0x666666,
    })

    -- 示例4: 表单输入
    airui.label({
        parent = scroll_container,
        text = "示例4: 表单输入",
        x = 10,
        y = 400,
        w = 300,
        h = 20,
        font_size = 14,
    })

    local form_container = airui.container({
        parent = scroll_container,
        x = 20,
        y = 430,
        w = 280,
        h = 150,
        color = 0xE8EAF6,
        radius = 8,
    })

    -- 姓名输入
    airui.label({
        parent = form_container,
        text = "姓名:",
        x = 10,
        y = 20,
        w = 60,
        h = 20,
        font_size = 14,
    })

    local name_input = airui.textarea({
        parent = form_container,
        x = 80,
        y = 15,
        w = 180,
        h = 30,
        text = "",
        placeholder = "请输入姓名",
        max_len = 20,
        keyboard = keyboard1
    })

    -- 邮箱输入
    airui.label({
        parent = form_container,
        text = "邮箱:",
        x = 10,
        y = 60,
        w = 60,
        h = 20,
        font_size = 14,
    })

    local email_input = airui.textarea({
        parent = form_container,
        x = 80,
        y = 55,
        w = 180,
        h = 30,
        text = "",
        placeholder = "请输入邮箱",
        max_len = 50,
        keyboard = keyboard1
    })

    -- 提交按钮
    local submit_btn = airui.button({
        parent = form_container,
        x = 80,
        y = 100,
        w = 120,
        h = 35,
        text = "提交",
        on_click = function(self)
            local name = name_input:get_text()
            local email = email_input:get_text()

            if name == "" or email == "" 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,
                    buttons = { "确定" },
                    on_action = function(self, label)
                        if label == "确定" then
                            self:hide()
                        end
                    end
                })
                msg:show()
            end
        end
    })

    -- 示例5: 输入框控制
    airui.label({
        parent = scroll_container,
        text = "示例5: 输入框控制",
        x = 10,
        y = 600,
        w = 300,
        h = 20,
        font_size = 14,
    })

    local control_input = airui.textarea({
        parent = scroll_container,
        x = 20,
        y = 630,
        w = 200,
        h = 60,
        text = "可控制的输入框",
        placeholder = "请输入...",
        max_len = 50,
        keyboard = keyboard1
    })

    -- 控制按钮
    local clear_btn = airui.button({
        parent = scroll_container,
        x = 230,
        y = 630,
        w = 70,
        h = 30,
        text = "清空",
        on_click = function(self)
            control_input:set_text("")
        end
    })

    local get_btn = airui.button({
        parent = scroll_container,
        x = 230,
        y = 670,
        w = 70,
        h = 30,
        text = "获取",
        on_click = function(self)
            local text = control_input:get_text()
            local msg = airui.msgbox({
                text = "当前内容: " .. text,
                buttons = { "确定" },
                timeout = 2000,
                on_action = function(self, label)
                    self:hide()
                end
            })
            msg:show()
        end
    })

    -- 设置光标位置
    local cursor_btn = airui.button({
        parent = scroll_container,
        x = 20,
        y = 700,
        w = 130,
        h = 35,
        text = "光标到开头",
        on_click = function(self)
            control_input:set_cursor(0)
        end
    })

    -- 底部信息
    airui.label({
        parent = main_container,
        text = "提示: 输入框支持文本监听和控制",
        x = 10,
        y = 440,
        w = 300,
        h = 20,
        font_size = 14,
    })
end

-- 初始化页面
function input_page.init(params)
    input_page.create_ui()
end

-- 清理页面
function input_page.cleanup()
    if main_container then
        main_container:destroy()
        main_container = nil
    end
end

return input_page