跳到主要内容

属性

active_image​

激活图片

只有button支持该属性，用于鼠标按下按钮时按钮显示的图片。

active_image = '按下.png'

array​

阵列

只有panel支持该属性。设置该属性后，子控件会被复制N份。

array = 5

bind​

绑定

bind = {
    image = 'image',
}

color​

背景颜色

color = '#ff1111'

scale​

控件缩放

scale = 2

clip​

裁剪，当设置为true时，子控件超出父控件区域的部分会被裁剪掉

clip = true

enable_drag​

可被拖动

设置为true后，可以拖动这个控件。

未设置或设置为false时，拖动此控件会向上找出祖先节点找第一个可以被拖动的控件来进行拖动，向上寻找的途中若遇到swallow_event为true则返回，可以将enable_drag看成一种事件，此事件默认向上传递，中途可以通过swallow_event来吃掉事件

enable_drag = true

enable_drop​

可被放开

设置为true后，允许其他控件拖到这个控件上（触发on_drop事件）。

enable_drop = true

event​

事件

bind = {
    event = {
        on_click = 'on_click',
    },
}

font​

字体

只有label支持该属性。

font = {
    size = 10,
    color = '#ffffff',
}

return_key​

软键盘回车键类型

只有[input]支持该属性

return_key = 'default'
return_key = 'go'
return_key = 'done'
return_key = 'search'
return_key = 'next'
return_key = 'send'

hover_image​

悬停图片

只有button支持该属性，用于鼠标悬停在按钮上时按钮显示的图片。

hover_image = '高亮.png'

image​

背景图片，控件会自动扩展为图片的大小。

image = '图案.png'

flip_x​

图片水平翻转

flip_x = true

flip_y​

图片竖直翻转

flip_y = true

layout​

排版

layout = {
    width = 100,
    height = 100,
}

border​

九宫格边框

不设置时将读取图集中的边框宽度，这个属性有2种格式：

border = 1 -- 四边框都设为1
border = {
    top = 1,
    bottom = 1,
    left = 1,
    right = 1,
}

round_corner_radius​

圆角半径

round_corner_radius = 10

mask_image​

遮罩图片

遮罩图片应该是一个带有透明通道的图片，控件会根据透明通道的形状进行剪裁。

mask_image = '化方为圆.png'

name​

命名

这个属性没有实际的功能，但是将控件强制转换为字符串时会带上这个名字，用于调试信息。

name = '背包'

progress​

进度

只有progress支持该属性，用于设置进度条的进度，取值范围为[0, 1]。

progress = 0.5

progress_type​

进度类型

只有progress支持该属性，用于设置进度条的类型。

进度条默认使用九宫图的中心部分作为进度，边上的其他八块作为整个进度条的边框。bordered 类型指进度条的进度部分使用完整的九宫图（省略进度条边框），即带边框的进度。

progress_type = 'left'              -- 从右往左
progress_type = 'right'             -- 从左往右
progress_type = 'up'                -- 从下往上
progress_type = 'down'              -- 从上往下
progress_type = 'clockwise'         -- 顺时针
progress_type = 'counter_clockwise' -- 逆时针
progress_type = 'bordered left'     -- 从右往左, 进度部分使用整个九宫图
progress_type = 'bordered right'    -- 从左往右, 进度部分使用整个九宫图
progress_type = 'bordered up'       -- 从下往上, 进度部分使用整个九宫图
progress_type = 'bordered down'     -- 从上往下, 进度部分使用整个九宫图

rotate​

旋转

使控件绕中心顺时针旋转某一角度。

rotate = 45

show​

显示

设置为false可以让控件不可见，也不会参与排版。

show = false

static​

静态

设置为true后，控件不会接收任何事件。例如界面上显示一段公告文本，此时公告文本需要置顶，但事件却要穿透文本。

static = true

disabled​

禁用

设置为true可以让控件及所有子控件的事件全部失效。

disabled = true

swallow_event​

吃掉事件

设置为true后，事件不会向父控件传递下去。例如背包本身有点击事件，而背包的子控件物品也有点击事件，那么你可以设置物品的swallow_event = true，这样点击物品后就不会触发背包的事件。

swallow_event = true

swallow_events​

指定要吃掉的事件，当设置有指定要吃掉的事件后 swallow_event 会被忽略

字符串类型，以 , 隔开，例如 'mouse_click,mouse_down,drag'
可以填写事件集合，事件集合以 # 开头，例如 '#all' 表示吃掉所有事件
可在事件或事件集合前加 ! ，表示取反，例如 '!#mouse' 表示除了鼠标事件的事件集合

目前支持的事件名（别名以 / 隔开）

  • mouse_click / on_click
  • mouse_double_click / on_double_click
  • mouse_down / on_mouse_down
  • mouse_leave / on_mouse_leave
  • mouse_enter / on_mouse_enter
  • drag / on_drag
  • drop / on_drop

目前支持的事件集合名

  • #mouse
  • #all

text​

文本

只有label支持该属性。

text = '文本内容'

目前支持的富文本标签类型有：color, b, i, u, br。

text = '我是默认颜色<color=#00ff00>我是彩色</color>'
text = '我是默认颜色<color=#00ff00>我是彩色</>' -- 同上，结束标签可省略
text = '普通文字<b>加粗文字</b>'
text = '普通文字<i>斜体文字</i>'
text = '普通文字<u>带下划线的文字</u>'
text = '我是第一行<br/>我是第二行'
text = '我是第一行\n我是第二行'

enable_scroll​

滚动条

只有panel支持该属性。

enable_scroll = true

scroll_direction​

默认为竖直。

scroll_direction = 'horizontal' -- 水平滚动
scroll_direction = 'vertical' -- 竖直滚动

scroll_image​

滚动条图片

scroll_color​

滚动条颜色

scroll_width​

滚动条宽度

transition​

过渡

transition = {
    position = {
        time = 200,
        func = 'linear'
    }
}

z_index​

层级

当一个控件的多个子控件互相重叠时，z_index较大的子控件会在上面。

z_index = 1

low_level​

表示该UI控件是一个下层控件

我们有这么几层：

场景下层UIUI里的场景默认UI
经常用于做UI控件里放个模型之类的UI默认在这层

什么时候使用下层UI呢？当我们的UI里显示了个模型，想要有个UI当他的背景的时候，使用low_level = true

如果这个UI还有子UI，那么子UI并不天然是下层UI，而需要手动设置该字段。（因为子UI很可能就需要显示在那个模型上面了）

当存在UI场景时(toggle_ui_scene传了true)，下层UI会受后效影响，上层UI（其它默认UI）则不会

如UI场景用完了，应该及时common.toggle_ui_scene(false)

受后效影响则意味会有Bloom，而我们的Bloom默认阈值大约在0.3 - 0.4，因此RGB颜色值大于这个阈值的，就会有Bloom效果，而这对于UI来说通常不是预期的。

因此，对于下层UI，建议主要使用深色。如果想使用浅色，又不想把Bloom阈值改大，那么可以考虑不要使用UI背景，而使用一个模型作为背景（浅色模型也会有Bloom，但和你在资源商店里看到的效果至少是一致的）

此属性不会影响UI本身的层级关系(z_index)

low_level = true

url​

webview 加载网页的url

url = '/url/to/html_resource'

html​

webview 加载网页的html文本

html = '<button>HelloWorld</button>'

src​

video 加载视频的源url

src = '/url/to/video_resource'