右侧功能模块——UI命令:如何使用UI控件的返回值
2017-12-27 14:55:48

在上一节UI命令:认识UI控件与快速创建自定义UI界面,我们已经认识了各种UI控件的写法,相信凑出一个UI界面对于大家来说没问题了。


于是在这一节我们来学习如何向用户展示一个界面,并且获取用户选择的返回值。


  1. 首先我们把UI界面写好,参考代码如下:

    {
       "style" : "default",
       "config" : "Miao_test.dat",
       "width" : 540,
       "height" : 960,
       "cancelscroll" : true,
       "countdown" : 99,
       "cancelname" : "取消",
       "okname" : "确定",
       "views" : [
          {
             "text" : "基本设置1",
             "type" : "Page",
             "views" : [
                {
                   "align" : "left",
                   "color" : "0,0,0",
                   "size" : "40",
                   "text" : "欢迎使用叉叉脚本",
                   "bg" : "225,225,225",
                   "type" : "Label"
                },
                {
                   "align" : "left",
                   "color" : "0,0,0",
                   "size" : "30",
                   "text" : "选择要打的章节名称",
                   "bg" : "255,255,255",
                   "type" : "Label"
                },
                {
                   "id" : "RadioGroup1",
                   "list" : "第一章,第二章,第三章",
                   "select" : "0",
                   "size" : "30",
                   "type" : "RadioGroup",
                   "orientation" : "horizontal",
                   "color" : "0,0,225"
                },
                {
                   "id" : "Edit1",
                   "align" : "left",
                   "color" : "0,0,0",
                   "kbtype" : "number",
                   "prompt" : "请输入刷本次数",
                   "size" : "25",
                   "text" : "5",
                   "type" : "Edit"
                },
                {
                   "align" : "left",
                   "color" : "0,0,0",
                   "size" : "30",
                   "text" : "自动回体使用的道具",
                   "bg" : "255,255,255",
                   "type" : "Label"
                },
                {
                   "id" : "CheckBoxGroup1",
                   "list" : "钻石,苹果,包子",
                   "select" : "1@2",
                   "size" : "30",
                   "type" : "CheckBoxGroup",
                   "orientation" : "horizontal",
                   "color" : "0,0,225"
                },
                {
                   "align" : "left",
                   "color" : "0,0,0",
                   "size" : "30",
                   "text" : "选择出击队伍",
                   "bg" : "255,255,255",
                   "type" : "Label"
                },
                {
                   "id" : "ComboBox1",
                   "list" : "队伍1,队伍2,队伍3",
                   "select" : "0",
                   "size" : "30",
                   "type" : "ComboBox"
                }
             ]
          }
       ]
    }

    它的显示效果长这样:

    图片.png

  2. 我们通过showUI这个函数去展示UI界面和获取它的返回值,看过开发手册会知道,返回值分别是一个整数和一个table:

    图片.png


  3. ret的返回值比较简单,它是一个整数型,只要判断返回的整数就知道用户按下的是确定还是取消。

    举一个简单的例子:

    图片.png

    复制下面的代码可用哦!

    --先展示一下UI

    ret, results = showUI('ui.json')


    --然后判断用户给出的返回值
    if ret == 0 then

    --如果获取到的ret的值是0

    dialog("用户按下了取消")
    elseif ret == 1 then

    --如果获取到的ret的值是1
    dialog("用户按下了确定")
    end


  4. 可以获得返回值的控件有4种,分别是单选框、编辑框、复选框、下拉框,

    接下来讲讲获取到的table类型和UI控件们的对应关系。

    虽然编辑框内可以输入很多东西,复选框可以选两个以上的选项,但在返回值的table中,他们的值都是一个字符串。

    在上面的UI中,我们应用到了4种控件,用户点击确定,我们就能获取到用户以上4个控件的选项。

    返回的table格式这个样子的:


    results = {
    ["id1"] = "value1",
    ["id2"] = "value2"……
    }

    id是指控件的ID,上一节提醒大家必填的控件属性,value就是指用户选择的返回值,省略号表示这个table可能有更多的项目,取决于UI界面上提供了多少个可以选择的项。

    以上面的UI界面为例的话,它的返回值table是这样的:

    results = {
    ["RadioGroup1"] = "0",
    ["Edit1"] = "5",
    ["CheckBoxGroup1"] = "1@2",
    ["ComboBox1"] = "0"
    }

    上面的UI界面包含了4种控件,下面我们一个个看他们的返回值。

    ①单选框:它的id是RadioGroup1,默认选择是0,那么如果用户不进行变更,直接确认的话,返回值就是0,代表选择了“第一章”。

    ②编辑框:它的id是Edit1,默认输入的内容是5,那么直接确认的话,返回值也是5。

    ③多选框:它的id是CheckBoxGroup1,默认选择了1和2,那么直接确认的话,返回值也是1和2,代表用户选择了“苹果”和“包子”。

    ④下拉框:它的id是ComboBox1,默认选择是0,那么如果用户不进行变更,直接确认的话,返回值就是0,代表选择了使用“队伍1”出击。

    通过获取到用户给予的返回信息,我们可以轻松对应到他们的意图,判断应该执行脚本的哪一个部分。

    注意:所有的返回值都是字符串,如果需要作为数字来判断,记得要转换成数字型哦!



  5. 解读完返回值table的结构之后,我们应该怎么去用它呢?

    lua中,获取一个table的值的方法是这样:table名称.要获取的值的key名称

    例如上述table,我需要获取单选框的值,并且将这个值,赋值给一个变量a

    那么这样写就可以了:

    a = results.RadioGroup1

    其中 results就是刚才我们在showUI的时候定义的table名称,RadioGroup1就是单选框的id。

    想知道获取到的值是否正确,还可以通过这样的方式检验:

    令a等于这个选项的返回值,然后用系统信息打印在IDE的调试信息窗口。

    a = results.RadioGroup1

    sysLog(a)

    然后结果是这样的:图片.png

    返回值获取成功。

    同理,刚才的编辑框、多选框、下拉框也用同样的方式获取返回值,只是id换一下即可,例如:

    results.Edit1、results.CheckBoxGroup1、results.ComboBox1

    各种控件的id名称请根据自己的需求改动,重点是要让自己很清晰地记得住这个控件代表的功能哦。


  6. 学到这里可能还有一些疑惑,我获取的全都是字符串,怎样拿来比较大小或是判断相等关系呢?

    对于返回单个值的控件,例如单选框、下拉框,我们可以使用lua自动的函数去将它转换为数字,例如:

    tonumber(results.RadioGroup1)

    对于有多个返回值的控件,例如多选框,我们可以用下面这个函数对它进行分割,并且放到一个新的table里面:


    由上面的例子,我们已经知道多选框的返回值格式是这样的:

    results.CheckBoxGroup1 = "1@2"


    --为了简化后面的代码,将上面的值赋给一个新的变量(为了名字更短)

    a = results.CheckBoxGroup1


    t={}   --创建一个table,方便等下塞数据


    for w in string.gmatch(a,"([^'@']+)") do     --按照“@”分割字符串
        table.insert(t,w)   --把去掉了@分割后的字符串依次放到这个名称叫t的table
    end

    接下来只要依照前面的方法,获取这个名叫t的table里面的数据,就知道用户都选择了什么啦。

    上面这一步完成之后的t是这样的:

    t = {1,2}

    我们来获取t里面的数据:

    由于lua的table是从1开始数起的,所以获取第一个值的key是,t[1]。

    上面的table就是,t[1] = 1, t[2] = 2的意思。

    按照之前的栗子,假如用户选了苹果和包子,那么对应的返回值就是1@2,拆分后可以得到一个叫做t的table,table内容是t = {1,2}。

    我们按照用户的选择分别做出提示上的反馈,那么可以这样写:

    if t[1] == 1 and t[2] == 2 then
    dialog("体力不足时吃苹果和包子补充")
    end

    那么接下来,就可以根据用户选择,去设定选择了苹果和包子的情况下,脚本应当如何操作了。



    学会使用UI控件获取用户的选择了吗?欢迎加入叉叉脚本学习交流群与大神们共同探讨喔!QQ群号: 496130919 点此加群