创建界面:json 和 table

触动精灵提供了两种创建界面的方式,较早阶段使用 json, 缺点是返回值无法直接与指定控件 ID 比较,使得脚本逻辑十分复杂,因此本手册涉及到 UI 的示例代码均为推荐使用的 table 方式。

什么是 json

json 就是一串字符串,在该函数中,我们用它来创建界面上的一系列会使用特定的符号标注的元素:

{} 双括号表示对象

[] 中括号表示数组

"" 双引号内是属性或值

冒号表示后者是前者的值

所以 {"name": "Michael"} 可以理解为是一个包含 name 为 Michael 的对象,而 [{"name": "Michael"},{"name": "Jerry"}] 就表示包含两个对象的数组。

当然了,你也可以使用 {"name":["Michael", "Jerry"]} 来简化上面一部分,这是一个拥有 name 数组的对象。

不管是键或 string 的值都要用双引号引起来,所以上面的代码就是 {"name": "json"}。

json 调用示例

为了便于 json 的书写,我们通常使用可读性较强的形式;但是为了便于脚本的调用,我们需要将 json 进行压缩与转义。将上文中的 json 进行转义后,作为字符串放进 showUI 函数的参数 ui_json 中,例如:

--[[ret, input_1, input_2, ... = showUI("");]]
ret, input_1, input_2, input_3 = showUI("{\"style\":"
.."\"default\",\"views\":[{\"type\":\"Label\",\"text\":"
.."\"settings\",\"size\":25,\"align\":\"center\",\"color\":"
.."\"0,0,255\"},{\"type\":\"RadioGroup\",\"list\":"
.."\"option1,option2,option3,option4,option5,option6,option7\","
.."\"select\":\"1\"},{\"type\":\"Edit\",\"prompt\":\"Test\","
.."\"text\":\"Custom Text\",\"size\":15,\"align\":\"left\","
.."\"color\":\"255,0,0\"},{\"type\":\"CheckBoxGroup\",\"list\":"
.."\"option1,option2,option3,option4,option5,option6,option7\","
.."\"select\":\"3@5\"}]}");

json 在线校验格式化、压缩转义工具:http://www.bejson.com/

上面的代码看起来有些乱,可能会让新手无所适从,我们换一种形式来写:

w,h = getScreenSize();--此段代码仅供演示用,不可复制粘贴直接运行
MyJsonString = [[
{
  "style": "default",
  "width": ]]..w..[[,
  "height": ]]..h..[[,
  "config": "save_111.dat",
  "timer": 10,
  "views": [
    {
      "type": "Label",
      "text": "设置",
      "size": 25,
      "align": "center",
      "color": "0,0,255"
    },
    {
      "type": "RadioGroup",
      "list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
      "select": "1"
    },
    {
      "type": "Edit",
      "prompt": "测试三下",
      "text": "默认值",
      "size": 15,
      "align": "left",
      "color": "255,0,0"
    },
    {
      "type": "CheckBoxGroup",
      "list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
      "select": "3@5"
    }
  ]
}
]]
ret, input1, input2, input3 = showUI(MyJsonString);
if ret == 1 then
    dialog("单选框:"..input1.."\r\n当行文本框:"..input2.."\r\n多选框:"..input3)
end

在上面的例子中可以看到"width""height"的值我们使用了变量 w,h 这两个变量具体数值由 getScreenSize() 函数提供,这样我们实现了 UI 界面自动适应屏幕大小,需要在 UI 中使用动态数据的时候我们还可以使用 table 的方式来进行构造,这样使用变量的时候可以更加顺手,例如:

 local ts = require('ts')
 local json = ts.json
local w,h = getScreenSize();

MyTable = {
    ["style"] = "default",
    ["width"] = w,
    ["height"] = h,
    ["config"] = "save_001.dat",
    ["timer"] = 10,
    views = {
        {
            ["type"] = "Label",
            ["text"] = "设置",
            ["size"] = 25,
            ["align"] = "center",
            ["color"] = "0,0,255",
        },
        {
            ["type"] = "RadioGroup",                     --单选框,input1
            ["list"] = "选项1,选项2,选项3,选项4,选项5,选项6,选项7",--7个单选项,序号从0开始,即选项1编号为0,选项2编号为1,依此类推
            ["select"] = "1",                    --默认选择选项2
        },
        {
            ["type"] = "Edit",        --输入框,input2
            ["prompt"] = "请输入一个数字",--编辑框中无任何内容时显示的底色文本
            ["text"] = "默认值",        --界面载入时已经存在于编辑框中的文本
        },
        {
            ["type"] = "CheckBoxGroup",                  --多选框,input3
            ["list"] = "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",--7个多选项
            ["select"] = "3@5",                        --默认选择选项 3 和选项 5
        },
        {
            ["type"] = "ComboBox",                       --下拉框,input4
            ["list"] = "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",--7 个下拉选项,序号从 0 开始,即选项 1 编号为 0,选项 2 编号为 1,依此类推
            ["select"] = "1",                       --默认选择选项 2
        },
    }
}

local MyJsonString = json.encode(MyTable);

ret, input1, input2, input3, input4 = showUI(MyJsonString);--返回值 ret, input1, input2, input3, input4
  • 以上实例中将 table 转为 JSON 需要借助 ts.so 扩展库实现。
  • 最下面返回值的数量应与代码中的非标签空间总数数量保持一致,否则会造成后面的非标签控件返回值无效。

  • 更多用法可以参考这里:[一个包含所有控件的 UI 实例]:https://pan.baidu.com/s/1eUlMvT4 密码:efg7


用 json 创建界面

由于调用返回值方式较复杂,不推荐使用 json 创建界面。请参考 showUI 完整示例中的 table 创建方式。

上面是调用的例子,但是我们首先我们要设计一个界面,并生成一段 json 字符串,再进行压缩转义。

我们先看上图界面示例 json 原来的样子(非脚本代码,不可直接引用),再作解释:

{--此示例仅供演示作用,不可复制粘贴直接运行
"style": "default", "config": "save_111.dat", "width": 400,
"height": 120, "bg": "a.png", "timer": 10, "cancelname": "取消", "okname": "开始",
"views": [
{
"type": "Label",
"text": "设置",
"size": 25, "align": "center",
"color": "0,0,255"
},
{
"type": "RadioGroup",
"list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
"select": "1"
},
{
"type": "Edit",
"prompt": "测试三下",
"text": "默认值",
"size": 15, "align": "left",
"color": "255,0,0"
},
{
"type": "CheckBoxGroup",
"list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
"select": "3@5"
},
{
  "type": "ComboBox",
  "list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
  "select": "1"
},
{
"type": "Image",
"src": "http://www.baidu.com/img/bdlogo.png"
}
]
}

创建一个界面,需要包含 style 与 views 两个主键。 style 表示界面样式,views 数组则包含了界面上的控件。

Copyright 北京帮你玩科技有限公司 2020 all right reserved,powered by Gitbook该文章修订时间: 2020-06-23 15:07:03

results matching ""

    No results matching ""