ToLua（LuaFramework） - 自定义 ui 监听方法（四）

前面一篇中我们学习到了，luaFramework 中的 button 回调事件，下面儿我们继续学习 lua 框架中的 自定义 ui 监听方法

回到框架这边儿，我们发现所有的预制件都是 默认以 GuiCamer 为父节点，而且面板的大小都不是那么的严谨，所以为了后面的学习开发，做一些微微的调整。

1、开发分辨率的调整: 1024* 768

以为它是一个正方形嘛，所以 比较顺眼

2、调整相机，将原有的GuiCamera从Canvas下拖离出来（与Canvas并列）

（1）拖动 GuiCamera 出来，调整为如下布局

（2）Canvas的RenderMode为Screen Space-Camera，并指定Render Camera为GuiCamera；

（3）设定GUICamera的投射模式（Projection）为正交（Orthogratphic）；

（4）设置Size为3.84，这样Canvas的Scale就会为0.01；

3.84的值是这样得来的：（3.84 = 屏幕宽度（768） / 100 /2）

（5）设置相机的Culling Mask为Everything。

3、原来加载出来的Panel 都是找到 GuiCamera，这里我们调整加载的 Panel 父对象为 Canvas

4、为了更加完善的 学习，所以下面创建一个 登录面板

然后更改 打包中的 Packager 类做一些修改，然后 打包

5、紧接着就是我们的代码儿了事儿了；

第一步的话就是新建一个 LoginPanel 的lua 脚本

local transform;
local gameObject;

LoginPanel = {};
local this = LoginPanel;

--启动事件--
function LoginPanel.Awake(obj)
    gameObject = obj
    transform = obj.transform
    this.InitPanel();
end

--初始化面板--
function LoginPanel.InitPanel()
    -- --登陆按钮
    this.Btn_Enter = transform:Find("Btn_EnterLogin").gameObject;
    -- --账号输入框
    this.Input_User = transform:Find("Input_User").gameObject;
    -- --密码输入框
    this.Input_Psd = transform:Find("Input_Psd").gameObject;
    -- --记住密码
    this.Tge_IsOffOrNo = transform:Find("Tge_IsOffOrNo").gameObject;
end

--如果要写 Update 的话记得在 C# 中实现以下
function this.Update()

end

紧接着新建一个 LoginCtrl 的lua 脚本

LoginCtrl = {};
local this = LoginCtrl;

local behaviour;
local transform;
local gameObject;

--构建函数--
function LoginCtrl.New()
    return this;
end

function LoginCtrl.Awake()
    panelMgr:CreatePanel('Login', this.OnCreate);
end

--启动事件--
function LoginCtrl.OnCreate(obj)
    gameObject = obj;
    transform = obj.transform;
    behaviour = gameObject:GetComponent('LuaBehaviour');
    behaviour:AddClick(LoginPanel.Btn_Enter,function()
        print("登录成功")
    end)
    behaviour:AddInputFieldEndEditHandler(LoginPanel.Input_User, function()
        log("账号输入结束,账号")
    end)
    behaviour:AddInputFieldEndEditHandler(LoginPanel.Input_Psd, function()
        log("密码输入结束,账号")
    end)
    behaviour:AddToggle(LoginPanel.Tge_IsOffOrNo, function (go, toggleVal)
        log("记住密码：" .. tostring(toggleVal));
    end);
end

输入框组件（InputField），如果只是需要获取输入值的话，不用添加监听，到找组件并引用，取组件的text值就好了；如果需要在输入结束时做一个操作（如判断用户名是否符合规则，注册时会有此需求），则需要给输入框添加相应监听；
复选框组件（Toggle），这是一个时实交互组件，需要动态的取Toggle的值，因此需要添加监听以判断当前的选择状态。

既然按钮可以通过LuaBehaviour脚本添加监听，那么对于Toggle和InputField的监听需是否也可以通过此脚本实现呢？

LuaBehaviour.cs脚本位于Assets\LuaFramework\Scripts\Common目录下，打开后能看到，此脚本的包含有添加按钮监听的方法AddClick，本质是在传递过来的GameObject上查找Button组件，并添加一个委托回调。如下图：

此脚本中，还包含了对Lua脚本的驱动方法（xxxPanel.lua脚本中Awake,Start方法被调用，应该就是被LuaBehaviour调用的），以及RemoveClick、ClearClick方法。

但是，并没有能给Toggle和InputField组件添加监听的方法。

不过我们既然知道Button组件是怎么实现监听的，其它组件依照着添加一个就行了。

在LuaBehaviour脚本中添加对Toggle的监听方法，如下：

/// <summary>
        /// 给Toggle组件添加监听
        /// </summary>
        public void AddToggle(GameObject go, LuaFunction luafunc)
        {
            if (go == null || luafunc == null) return;
            buttons.Add(go.name, luafunc);
            go.GetComponent<Toggle>().onValueChanged.AddListener(
                delegate (bool select) {
                    luafunc.Call(go, select);
                }
            );
        }

在LuaBehaviour给输入组件（InputField）添加结束编辑(OnEndEdit)监听，如下：

//给输入组件（InputField）添加结束编辑(OnEndEdit)监听
    public static void AddInputFieldEndEditHandler(GameObject go, LuaFunction luafunc)
    {
        if (go == null || luafunc == null) return;

        InputField input = go.GetComponent<InputField>();

        if (input == null) {
            Debug.LogError(go.name + "找不到InputField组件");
            return;
        }

        go.GetComponent<InputField>().onEndEdit.AddListener(
            delegate (string text) {
                luafunc.Call(text);
            }
        );
    }

写法还是很简单的，本质就是调用C#中对相应组件的处理，封装成方法，通过LuaBehaviour脚本以使其能在Lua脚本中被使用。

现在，在LoginCtrl.lua中给账号输入框添加一个编辑结束事件处理（实际并不需要，这里只是做演示），给记住密码的复选框添加一个状态变化事件处理。

完成以后就是这样儿的：

到了这一步还会报错，所以我们需要进行一些操作！

然后来看下效果图：