滚动面板

滚动面板是由多个控件组成的面板
因此滚动面板不能是一个单独的控件，不能像上面的面板直接使用 controls 加入子控件
所以使用它需要引用 ui_common.json 文件的 scrolling_panel 控件
即 @common.scrolling_panel

首先展示下滚动面板的代码

RP/ui/start_screen.json

"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 显示背景，所做的背景才得以显示

RP/ui/start_screen.json

"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 触屏滚动条图像

RP/ui/start_screen.json

"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" ，就是让滚动条在滚动面板静止不动的状态下隐藏。（不加这个动画也可以自动淡出，仅限触屏模式）滚动面板就讲到这里了！还有很多属性没讲，其中这里只挑了重要的来讲。

代码示例

RP/ui/start_screen.json

"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"}}
  ]
}

好了，文档就讲完面板控件了。
如果有什么问题可以在视频评论区提问哦 (～￣▽￣)～

版权声明- 除非另有说明，否则文档内容均采用CC BY-NC-SA 4.0许可协议
- 此网站与 Mojang Studios 以及微软无任何从属关系
- 转载需要作者同意，并且标明内容来自于本网站