产品手册
Return to top
UI 控件-滚动框
编辑

UI 控件-滚动框 ​

阅读本文大概需要 10 分钟

本文概述了 UI 控件—滚动框的各项属性以及使用方法。

什么是滚动框？ ​

滚动框是比较常用的滑动类型的容器控件，经常在界面不够放置所有内容时使用滚动框，通过滑动来展示所有内容。

  • 示意图：

滚动框属性-滚动面板设置 ​

滚动朝向 ​

  • 水平滚动

    • 滚动框可以进行水平方向滚动内容。

  • 垂直滚动

    • 滚动框可以进行垂直方向滚动内容。

  • 示意图：

运动类型 ​

  • 弹性运动（Elastic）

    • 滚动框拉到顶部或底部边缘时，还能再拉动一小段距离，并且具有回弹效果。

  • 限制（Limited）

    • 滚动框拉到顶部或者底部边缘就不能继续往下拉了。

滚动条默认位置 ​

  • 在玩家没有操作滚动条的情况下滚动条的默认位置；每次滑动框重新渲染后，滑动条都回到这个默认位置
水平滚动垂直滚动
顶部或左侧
居中
底部或右侧

弹性系数 ​

  • 在运动类型为弹性运动时，滚动框拉到顶部或底部边缘时，还能再拉动一小段距离，此系数决定了能超出滚动框正常范围的距离大小。

左侧弹性系数=0.2，右侧弹性系数=2

是否有惯性 ​

  • 使用滚动框滚动内容结束后，会不会根据惯性再滑动一段距离。勾选即有惯性，可以滑动一段距离，不勾选的话即无惯性。

左侧无惯性，右侧有惯性

显示滚动条 ​

  • 是否显示滚动条。勾选则显示，不勾选则不显示。

左侧显示滚动条，右侧不显示滚动条

边缘阴影 ​

  • 是否显示滚动边缘的阴影部分。勾选则显示，不勾选则不显示。

左侧不显示边缘阴影，右侧显示边缘阴影

滚动条宽度 ​

  • 即滚动条的宽度，X 和 Y 的值分别为垂直滚动和水平滚动时的宽度

滚动条颜色 ​

  • 可以修改滚动条的颜色和透明度

滚动框属性-样式设置 ​

  • 这里修改的是滚动条的图片及样式。图片属性请见 UI 控件-图片

如何使用滚动框？ ​

示例一：制作动态增加内容的无限滚动列表 ​

  • 首先摆放一个空的滚动框，并在其内部放一个开启自动布局和自适应高度的容器

  • 然后编写脚本，动态生成其他 UI 控件并添加为滚动框内容器的子级，这里生成一张图片控件作为示例；运行游戏后，点击按钮就能看到动态生成的 UI 控件出现在滚动框内部了
ts
@UIBind('')
export default class DefaultUI extends UIScript {
	/** 仅在游戏时间对非模板实例调用一次 */
    protected  onStart() {
		//找到对应的按钮和容器
		const newBtn = this.uiWidgetBase.findChildByPath('Canvas/StaleButton') as StaleButton
		const canvas = this.uiWidgetBase.findChildByPath('Canvas/ScrollBox/Canvas') as Canvas
		//点击按钮,创建图片
		newBtn.onPressed.add(()=>{
			//创建图片组件
			let image= Image.newObject()
			//把图片组件挂载滚动框下
			canvas.addChild(image)
			image.size=new Vector2(225,225)
			image.imageGuid="76721"
		})	
    }
}
@UIBind('')
export default class DefaultUI extends UIScript {
	/** 仅在游戏时间对非模板实例调用一次 */
    protected  onStart() {
		//找到对应的按钮和容器
		const newBtn = this.uiWidgetBase.findChildByPath('Canvas/StaleButton') as StaleButton
		const canvas = this.uiWidgetBase.findChildByPath('Canvas/ScrollBox/Canvas') as Canvas
		//点击按钮,创建图片
		newBtn.onPressed.add(()=>{
			//创建图片组件
			let image= Image.newObject()
			//把图片组件挂载滚动框下
			canvas.addChild(image)
			image.size=new Vector2(225,225)
			image.imageGuid="76721"
		})	
    }
}
  • 示意图：

  • 工程文件： 点击下载

  • 实际制作游戏时，背包/商店等菜单中的每个格子通常不是简单的一个UI控件，而是一个包含多个UI控件的自定义UI控件，建议把一个格子的元素放在一个单独的UI文件内，然后在脚本中动态将这个UI文件实例化为自定义UI控件并挂在容器下

TIP

此时需要注意：请将自定义UI文件-Root对齐方式设为靠左+靠上对齐，并把设计尺寸调整为所需要的大小 这里相当于实例化后的自定义UI控件的对齐方式，如果这里选择的是左右对齐+上下对齐，或者自定义对齐，自定义UI控件的大小和位置跟随父级自适应变化 详见产品手册【UI控件的基础属性】中的【UI文件（自定义UI）的整体属性——Root属性】部分

示例二：制作用于滚动框中的按钮，使其支持点击且拖拽时滑动滚动框 ​

  • 当滚动框中容纳了较多按钮时，我们会发现按在按钮上并拖拽时无法滑动滚动框

  • 如果在将滑动框内按钮的touchMethod(触摸模式) 修改为 UI.ButtonTouchMethod.PreciseTap(精准点击模式)，按下按钮并且拖拽时，会立刻取消按钮的按压状态并且改为操作滚动框滑动

  • 脚本示例：
ts
    //修改按钮触摸模式
    changeBtnMethod(): void {
        for(let i = 1; i < 7; i++) {
            (this["btn"+i] as Button).touchMethod = ButtonTouchMethod.PreciseTap;
        }
    }
    //修改按钮触摸模式
    changeBtnMethod(): void {
        for(let i = 1; i < 7; i++) {
            (this["btn"+i] as Button).touchMethod = ButtonTouchMethod.PreciseTap;
        }
    }