滚动面板是由多个控件组成的面板
因此滚动面板不能是一个单独的控件，不能像上面的面板直接使用 controls 加入子控件
所以使用它需要引用 ui_common.json 文件的 scrolling_panel 控件
即 @common.scrolling_panel
首先展示下滚动面板的代码
"scrolling_panel@common.scrolling_panel": {
"$show_background": false,// 显示背景
"$scrolling_content": "start.stack_panel",// 滚动面板内容
"size": [ "100%", "100%" ]// 滚动面板大小
},
"stack_panel": {
"type": "stack_panel",
"size": [ "100%", "100%c" ],
"controls": [
{"label_1":{"type":"label","text":"hello world"}},
{"label_2":{"type":"label","text":"hello world"}}
]
}
接下来，我们先来讲下滚动面板的基本属性
基础属性
| 变量 | 变量名 | 值 | 默认值 | 描述 |
|---|
| $scrolling_content | 面板内容 | 字符串：控件 | | 滚动面板的内容，例如上文的代码中的"stack_panel"。 |
| $show_background | 展示面板背景 | 布尔值 | true | 建议为 false 隐藏背景。
值为 ture 时，显示背景。主要用于 pocket UI 档案的可交互屏幕。
如需修改背景，请另见其下。 |
修改滚动面板背景
在滚动面板中，默认的背景可能会不符合你的 UI 风格
那么要如何修改背景呢？
提示
需要 $show_background 为 true 显示背景，所做的背景才得以显示
"scrolling_panel@common.scrolling_panel": {
"$show_background": false,// 显示背景
"$scrolling_content": "start.stack_panel",// 滚动面板内容
"size": [ "100%", "100%" ],// 滚动面板大小
"$scroll_background_image_control": "start.scroll_bg"
},
"scroll_bg": {
"type": "image",
"texture": "textures/ui/lava",
"fill": true
},
"stack_panel": {
"type": "stack_panel",
"size": [ "100%", "100%c" ],
"controls": [
{"label_1":{"type":"label","text":"hello world"}},
{"label_2":{"type":"label","text":"hello world"}}
]
}
像上面，使用
$scroll_background_image_control 更改背景
| 变量 | 变量名 | 值 | 默认值 | 描述 |
|---|
| $scroll_background_image_control | 面板背景 | 字符串：控件 | common.scroll_indent_image | 更改滚动面板的背景，背景不会随面板的滚动而滚动。 |
引用控件时，切记要在值的开头加上该文件的命名空间
例如在 "hud_screen.json" 的控件，命名空间就是 "hud."
在引用时就是 "hud.某个控件"
改变背景在滚动面板内大小以及偏移你还需要使用此属性
| 变量 | 变量名 | 值 | 默认值 | 描述 |
|---|
| $background_size | 面板背景大小 | 矢量[x,y] | ["100%","100%"] | 更改滚动面板的背景偏移。 |
| $background_offset | 面板背景偏移 | 矢量[x,y] | [0,0] | 更改滚动面板的背景大小。 |
修改滚动条样式
如果，你想要改变原版的滚动条。
那么接下来，我们将简单地讲下改变滚动条样式！
当然，不想要显示滚动条可以使用
$scroll_box_visible 。
| 变量 | 变量名 | 值 | 默认值 | 描述 |
|---|
| $scroll_box_visible | 滚动条是否可见 | 布尔值 | true | 值为 false 时不可见。 |
例如这样更改滚动条
只要加上这两个属性并引用控件即可:
$scroll_box_mouse_image_control 鼠标/手柄滚动条图像
$scroll_box_touch_image_control 触屏滚动条图像
"scrolling_panel@common.scrolling_panel": {
"$show_background": false,// 显示背景
"$scrolling_content": "start.stack_panel",// 滚动面板内容
"size": [ "100%", "100%" ],// 滚动面板大小
"$scroll_box_mouse_image_control": "start.scroll_box_image"
},
"scroll_box_image": {
"type": "image",
"texture": "textures/ui/button_borderless_lighthover",
"fill": true,
"alpha": "@common.anim_scrollbar_box_fadeout"
},
"stack_panel": {
"type": "stack_panel",
"size": [ "100%", "100%c" ],
"controls": [
{"label_1":{"type":"label","text":"hello world"}},
{"label_2":{"type":"label","text":"hello world"}}
]
}
提示
引用控件时，切记要在值的开头加上该文件的命名空间！
例如在 "hud_screen.json" 的控件，命名空间就是 "hud."。
在引用时就是 "hud.某个控件"。
在代码中的
"alpha": "@common.anim_scrollbar_box_fadeout" ，就是让滚动条在
滚动面板静止不动的状态下隐藏。
（不加这个动画也可以自动淡出，仅限触屏模式）
滚动面板就讲到这里了！还有很多属性没讲，其中这里只挑了重要的来讲。
代码示例
"scrolling_panel@common.scrolling_panel": {
"$show_background": false,// 显示背景
"$scrolling_content": "start.stack_panel",// 滚动面板内容
"size": [ "100%", "100%" ]// 滚动面板大小
},
"stack_panel": {
"type": "stack_panel",
"size": [ "100%", "100%c" ],
"controls": [
{"label_1":{"type":"label","text":"hello world"}},
{"label_2":{"type":"label","text":"hello world"}}
]
}
好了，文档就讲完面板控件了。
如果有什么问题可以在视频评论区提问哦 (～￣▽￣)～