UI窗口 | 节点精灵官网|安卓免Root小程序

# UI窗口

视频演示 (opens new window)

创建一个窗口并显示在移动设备上

    ui={
        title="游自在欢迎你的光临";
        time = 10; -- 10秒后自动选择确认
        views={
            {type="text",value="请输入痘印的账号密码"},
            {title ="账号",type="edit",hint="请输入账号",id="name"},
            {title ="密码",type="edit",value="eee"},
            {title ="多选",type="check",value="18级 |19级 |20级 ",ore=1,id="pp"},
            {title ="单选",type="radio",value="18级 |19级 |20级 ",ore=0,id="cc"},
        }
    }
    local ret = show( ui )
    if ret then
        print('用户选择了确认')
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 创建一个窗口

创建一个UI 窗口，

ui = {};

   ui = {
       
   };

1
2
3

# 设置窗口标题

给窗口设置一个标题，该标题显示最顶端

title ="这是一个标题"

   ui = {
      title = "这是一个标题";
   };

1
2
3

# 设置窗口是否启用缓存

默认启用缓存，启用后用户操作的数据会自动缓存在手机，下次启动自动回填用户数据

cache = true ;启动缓存 cache = false ;关闭缓存

title ="这是一个标题"

   ui = {
      title = "这是一个标题";
      cache = false;
   };

1
2
3
4

# 设置窗口自动确认

给窗口设置一个时间，自动选择确认

time = 0; 不自动选择确认 time = 10; 10秒后自动选择确认

title ="这是一个标题"

   ui = {
      title = "这是一个标题";
      time = 10;
   };

1
2
3
4

# 设置窗口大小

设置 UI窗口的大小

width 设置UI窗口宽度值=-1 时，全屏展示
height 设置UI窗口高度值=-1时，全屏展示

    -- 创建一个 全屏展示的 UI 窗口
   ui = {
      title = "这是一个标题";
      width = -1;
      height = -1;
   };

1
2
3
4
5
6

    -- 创建一个 宽为400px ，高度为600px 的窗口
   ui = {
      title = "这是一个标题";
      width = 400;
      height = 600;
   };

1
2
3
4
5
6

# 设置窗口的控件组

给窗口设置一组控件【仅可设置一组】

views = {};

   ui = {
      title = "这是一个标题";
      views = {
        --把所有控件 都写在这个集合里
      };
   };

1
2
3
4
5
6

# 显示窗口

给窗口设置一个标题，该标题显示最顶端

show(ui) 该函数会返回一个boolean 值 true=用户选择了确定；false= 用户选择了取消

ui = {
    title = "123";
};
local ret,data = show( ui )
if ret then
    print(data) -- 有id 的控件，用户选择后的数据集合
    print('用户选择了确认')
  else
    print('用户选择了取消')
end

1
2
3
4
5
6
7
8
9
10

# 更新UI 窗口

在show 函数调用后，想动态的更新ui，可以使用该函数

updateUI(ui)
该函数会更新ui ，但前提是ui 必须带name属性
因为show是阻塞型函数，所以updateUI只能运行在其他线程中

   ui = {
      title = "";
      name = "home"
   };
   updateUI( ui )

1
2
3
4
5

# 显示HUD 窗口

通过此方法可以随意在屏幕上增加按钮,文本

showHud(ui)
该函数会把ui当做悬浮窗添加至屏幕(不会阻塞程序)
其中ui必须带有 width，height，x，y 属性
x,y 为 hud 的显示坐标

ui = {
    width= 300,
    height=100,
    x =100,
    y =200,
    views={
        {type="div",
            views ={
                {type="button",value="测试"},
                {type="button",value="我是一个按钮"},
            }
        }
    }
};
local ret,data = showHud( ui )
-- 程序停止后，hud 将自动关闭
sleep(10*10000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# View控件

可创建 "文本控件" "输入框架" "单选控件" "多选控件"

# 文本控件

文本控件:在设备上显示一段文字

语法:

{type="text",value="请输入痘印的账号密码"}

属性:

type ="text" (标记类型为文本型)
value ="这是一个文本" （设置文本控件的内容）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {type="text",value="请输入痘印的账号密码"}
        }
    }
    local ret = show( ui )
    if ret then
        print('用户选择了确认')
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 输入框控件

输入框控件:用户可通过此控件输入值

语法:

{title ="账号",type="edit",hint="请输入账号",id="name"},

属性:

id ="变量名" （可通过此名称取到用户输入的值，详情见案例）
title ="text" (控件的提示信息)
type ="edit" (标记为输入框类型)
value ="user" （输入框内的文本值）
hint ="请输入密码" （提示用户需要输入的值）
mode ="text" (允许用户输入的类型 'text'默认类型不限制输入|‘number’ 只允许输入数字|‘password’ 密码框类型)

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {title ="账号",type="edit",hint="请输入账号",id="name"}
        }
    }
    local ret = show( ui )
    if ret then
        print('用户输入的值'..name);
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 多选框控件

多选框:可以让用户多选值

语法:

{title ="多选",type="check",value="18级 |19级 |20级 ",ore=1,id="p1|p2|p3"}

属性:

id ="变量名" ！！！【多个id请用'|' 隔开，不可用数字开头！】
title ="text" (控件的提示信息)
type ="text" (标记为多选类型)
value ="18级 |19级 |20级 " （创建多个多选框请用'|' 隔开，id的位置和value 值的位置对应！）
- value ="*18级 |19级 |*20级 " 在值前面加上*号可以默认选中状态
ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {title ="多选",type="check",value="18级 |19级 |20级 ",ore=1,id="p1|p2|p3"}
        }
    }
    local ret = show( ui )
    if ret then
        if p1 then  print('18级勾选了') end;
        if p2 then  print('19级勾选了') end;
        if p3 then  print('20级勾选了') end;
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 单选框控件

输入框控件:用户可通过此控件输入值

语法:

{title ="单选",type="radio",value="18级 |19级 |20级 ",ore=0,id="cc"},

属性:

id ="变量名" （单选框只填写一个id 即可。用户点击确定后会返回选中单选框的值）
title ="text" (控件的提示信息)
type ="radio" (标记为单选类型)
value ="18级 |19级 |20级 " （创建多个多选框请用'|' 隔开）
- value ="18级 |19级 |20级 " 在值前面加上号可以默认选中状态（单选只能标记一个）
ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {title ="单选",type="radio",value="18级 |19级 |20级 ",ore=0,id="cc"}
        }
    }
    local ret = show( ui )
    if ret then
        print("单选框的值为:"..cc);
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 下拉框控件

下拉框控件:用户可通过此控件下拉选择值

语法:

{title ="单选",type="spinner",value="18级 |19级 |20级 ",id="sp"},

属性:

id ="变量名" （单选框只填写一个id 即可。用户点击确定后会返回选中单选框的值）
title ="text" (控件的提示信息)
type ="spinner" (标记为单选类型)
value ="18级 |19级 |20级 " （创建多个多选框请用'|' 隔开）
ore =0 （设置布局朝向默认为0 ，0= 纵向布局，1= 横向布局）
parent = 父控件id (此属性用于下拉框的多级联动)

案例:

    ui={
        title="游自在欢迎你的光临";
        views={
            {title ="下拉框",type="spinner",value="18级 |19级 |20级 ",id="sp"}
        }
    }
    local ret = show( ui )
    if ret then
        print("下拉框的值为:"..sp);
    else
        print('用户选择了取消')
    end

1
2
3
4
5
6
7
8
9
10
11
12

# 下拉框多级联动

多个下拉框选择会进行联动。下拉框的多级联动可以解决很多复杂的选择情况。

参数的规则: 多级联动下级参数需要为上级参数的每个值适配多个值。多个值之间用‘|’隔开，上级对应的每组数据之间用 ',' 隔开 parent 参数指向的为上级下拉框的 id（如案例中下拉框2的parent 为下拉框1的id）

案例:

spinner = "初中|高中|大学"
spinner2 = "5年级|6年级,高一|高二,大一|大二|大三|大四";
spinner3 = "5年级春|5年级夏,6年级春|6年级夏,高一春|高一夏,高二春|高二夏,大一春|大一夏,大二春|大二夏,大三放羊"
ui={
    title="简单UI组件Demo";
    time=-1;-- 10秒后自动选择确认
    views={
            {title="下拉框",type="spinner",value=spinner,id="sp1"},
            {title="下拉框2",type="spinner",value=spinner2,parent="sp1",id="sp2"},
            {title="下拉框3",type="spinner",value=spinner3,parent="sp2",id="sp3"}
    }
}
local ret=showUI(ui)
if ret then
    print('用户选择了确认')
    print(sp3)
else
    print('用户选择了取消')
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 按钮控件

按钮控件:通过按钮可以启动一个子线程中的方法

“按钮控件必须配合多线程来使用”

语法:

{title ="按钮",type="button",value="我是一个按钮",ore=0,id="cc"},

属性:

id ="变量名" （单选框只填写一个id 即可。用户点击确定后会返回选中单选框的值）
title ="text" (控件的提示信息)
type ="button" (标记为单选类型)
value ="按钮文字" （按钮的文本）
click = {thread= 线程索引,name= 启动的方法名} (点击方法) 点击需配合多线程来使用

案例:

ui={
        title="游自在欢迎你的光临";
        time = 10; -- 10秒后自动选择确认
        views={
            {type="button",value="我是一个按钮"},
        }
}
local ret = show( ui )
if ret then
    print('用户选择了确认')
else
    print('用户选择了取消')
end

1
2
3
4
5
6
7
8
9
10
11
12
13

# 按钮的点击例子

下载源码案例,您可以在创建界面导入此nsp代码

案例:

-- ‘子线程’必须是一个.lua后缀的文件
local 线程索引 = runThread("子线程")

ui={
        title="游自在欢迎你的光临";
        time = 10; -- 10秒后自动选择确认
        views={
            {type="button",value="我是一个按钮",click = { thread = 线程索引, name ="测试方法" } },
            -- 测试方法必须是一个存在于 子线程.lua 文件中的 function 方法
        }
}
local ret = show( ui )
if ret then
    print('用户选择了确认')
else
    print('用户选择了取消')
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 容器控件

所有在容器内部的控件都会“自适应横向排列” 容器中的所有控件 title 属性均不起作用

案例:

ui={
    title="div容器Demo",
    time = -1;
    views={
        {type="div",title="容器",
            views ={
                {type="text",value="请输入痘印的账号密码"},
                {title ="多选",type="check",value="18级",ore=1,id="pp"},
                {title ="单选",type="radio",value="1|2",ore=1,id="cc"},
            }
        }
    }
}
local ret = show( ui )
if ret then
    print('用户选择了确认')
else
    print('用户选择了取消')
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

← 执行动作复杂界面 →

# UI窗口

# 创建一个窗口

# 设置 窗口 标题

# 设置 窗口 是否启用缓存

# 设置 窗口 自动确认

# 设置 窗口 大小

# 设置 窗口 的控件组

# 显示 窗口

# 更新UI 窗口

# 显示HUD 窗口

# View控件

# 文本控件

# 输入框控件

# 多选框 控件

# 单选框 控件

# 下拉框 控件

# 下拉框 多级联动

# 按钮 控件

# 按钮的点击例子

# 容器控件

# 设置窗口标题

# 设置窗口是否启用缓存

# 设置窗口自动确认

# 设置窗口大小

# 设置窗口的控件组

# 显示窗口

# 多选框控件

# 单选框控件

# 下拉框控件

# 下拉框多级联动

# 按钮控件