CocosCreator3.8研究笔记（十八）CocosCreator UI组件（二）


前面的文章已经介绍了Canvas 组件、UITransform 组件、Widget 组件 。


想了解的朋友，请查看 CocosCreator3.8研究笔记（十七）CocosCreator UI组件（一）。


今天我们主要介绍CocosCreator 常用容器组件：Layout 组件 、ScrollView 组件 、PageView 组件。


一、Layout 组件


Layout 容器能够开启自动布局功能，开启后，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。


（1）、Layout 属性

属性功能说明
Type布局类型，支持 NONE、HORIZONTAL、VERTICAL 和 GRID。
ResizeMode缩放模式，支持 NONE、CHILDREN 和 CONTAINER。
PaddingLeft排版时，子物体相对于容器左边框的距离。
PaddingRight排版时，子物体相对于容器右边框的距离。
PaddingTop排版时，子物体相对于容器上边框的距离。
PaddingBottom排版时，子物体相对于容器下边框的距离。
SpacingX水平排版时，子物体与子物体在水平方向上的间距。NONE 模式无此属性。
SpacingY垂直排版时，子物体与子物体在垂直方向上的间距。NONE 模式无此属性。
HorizontalDirection指定水平排版时，第一个子节点从容器的左边还是右边开始布局。当容器为 GRID 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始水平排列方向。
VerticalDirection指定垂直排版时，第一个子节点从容器的上面还是下面开始布局。当容器为 GRID 类型时，此属性和 Start Axis 属性一起决定 Grid 布局元素的起始垂直排列方向。
CellSize此属性只在 GRID 布局、Children 缩放模式时存在，指定网格容器里面排版元素的大小。
StartAxis此属性只在 GRID 布局时存在，指定网格容器里面元素排版指定的起始方向轴。
AffectedByScale子节点的缩放是否影响布局。
AutoAlignment自动对齐，在 Type 类型为 HORIZONTAL 或 VERTICAL 模式下，保证另外一个轴向值始终为 0。
Constraint布局约束，可以在某个方向上约束排列数量，支持 NONE、FIXED_ROW 和 FIXED_COL。
ConstraintNum布局约束值，在 Constraint 的类型为 FIXED_ROW 或 FIXED_COL 模式下有效。

（1）、Layout Type 说明

Layout 组件，默认布局类型是 NONE，通过修改 属性检查器 里的 Type 切换容器排列类型。

类型分为：HORIZONTAL（水平）、VERTICAL（垂直）以及 GRID（网格）布局。

如图：


在这里插入图片描述


（2）、Layout ResizeMode 模式


在这里插入图片描述


  • 设置为 NONE 时，子物体和容器的大小变化互不影响。

  • 设置为 CONTAINER 时，容器的大小会随着子物体的大小变化。

    所有的排列都是根据容器大小进行计算的，如果需要固定排序，可以将 Type 设置为 GRID，然后设置 Constraint 和 ConstraintNum 来固定排序。

  • 设置为 CHILDREN 时，子物体大小会随着容器的大小而变化。


（3）、Constraint 模式


在这里插入图片描述


  • 设置为 NONE 时，自由布局。

  • 设置为 FIXED_ROW 时，固定行数，搭配 ConstraintNum 使用。


在这里插入图片描述


  • 设置为 FIXED_COL 时，固定列数，搭配 ConstraintNum 使用。

在这里插入图片描述


二、ScrollView 组件


ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。

通常 ScrollView 会与 Mask 组件配合使用，同时也可以添加 ScrollBar 组件来显示浏览内容的位置。

点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/ScrollView 即可添加 ScrollView 组件到节点上。


（1）、ScrollView 属性

属性功能说明
content它是一个节点引用，用来创建 ScrollView 的可滚动内容，通常这可能是一个包含一张巨大图片的节点。
Horizontal布尔值，是否允许横向滚动。
Vertical布尔值，是否允许纵向滚动。
Inertia滚动的时候是否有加速度。
Brake浮点数，滚动之后的减速系数。取值范围是 0-1，如果是 1 则立马停止滚动，如果是 0，则会一直滚动到 content 的边界。
Elastic布尔值，是否回弹。
BounceDuration浮点数，回弹所需要的时间。取值范围是 0-10。
HorizontalScrollBar它是一个节点引用，用来创建一个滚动条来显示 content 在水平方向上的位置。
VerticalScrollBar它是一个节点引用，用来创建一个滚动条来显示 content 在垂直方向上的位置
ScrollEvents列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。
CancelInnerEvents如果这个属性被设置为 true，那么滚动行为会取消子节点上注册的触摸事件，默认被设置为 true。

（2）、ScrollView 事件

ScrollView 的事件回调有两个参数，第一个参数是 ScrollView 本身，第二个参数是 ScrollView 的事件类型。

ScrollView 组件必须有指定的 content 节点才能起作用，通过指定滚动方向和 content 节点在此方向上的长度来计算滚动时的位置信息，Content 节点可以通过添加 Widget 设置自动 resize来布局。


设置主要有2种方式：


  • 构造一个 EventHandler 对象，然后设置对应的 target、component、handler 和 customEventData 参数
import { _decorator, Component, ScrollView, EventHandler } from 'cc';
const { ccclass, property } = _decorator;@ccclass("test")
export class test extends Component {onLoad() {const scrollViewEventHandler = new EventHandler();scrollViewEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点scrollViewEventHandler.component = 'test';// 这个是脚本类名scrollViewEventHandler.handler = 'callback';scrollViewEventHandler.customEventData = 'data';const scrollview = this.node.getComponent(ScrollView);scrollview.scrollEvents.push(scrollViewEventHandler);}callback(scrollview, eventType, customEventData){// 这里 scrollview 是一个 Scrollview 组件对象实例// 这里 eventType === ScrollView.EventType enum 里面的值// 这里 customEventData 参数就等于之前设置的 'data'}
}

  • 通过 scrollview.node.on('scroll-to-top', ...) 方式添加,同样也可以注册 scrolling、touch-up、scroll-began 等事件，这些事件的回调函数的参数与 scroll-to-top 的参数一致。

    注意: 这种方式注册的事件，无法传递 customEventData

    import { _decorator, Component, ScrollView } from 'cc';
const { ccclass, property } = _decorator;@ccclass("test")
export class test extends Component {@property(ScrollView)scrollview: ScrollView | null = null;onLoad(){this.scrollview.node.on('scroll-to-top', this.callback, this);}callback(scrollView: ScrollView) {// 回调的参数是 ScrollView 组件}
}

（3）、ScrollBar

ScrollBar 允许用户通过拖动滑块来滚动一张图片。

ScrollBar 一般不会单独使用，它需要与 ScrollView 配合使用，另外 ScrollBar 需要指定一个 Sprite 组件，即属性面板里面的 Handle。

通常我们还会给 ScrollBar 指定一张背景图片，用来指示整个 ScrollBar 的长度或者宽度。


ScrollBar 属性

属性功能说明
HandleScrollBar 前景图片，它的长度/宽度会根据 ScrollView 的 content 的大小和实际显示区域的大小来计算。
Direction滚动方向，目前包含水平和垂直两个方向。
Enable Auto Hide是否开启自动隐藏，如果开启了，那么在 ScrollBar 显示后的 Auto Hide Time 时间内会自动消失。
Auto Hide Time自动隐藏时间，需要配合设置 Enable Auto Hide

三、PageView 组件


PageView 是一种页面视图容器。

点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/PageView 即可添加 PageView 组件到节点上


在这里插入图片描述


（1）、PageView 属性

属性功能说明
SizeMode页面视图中每个页面大小类型，目前有 Unified 和 Free 类型。
Content它是一个节点引用，用来创建 PageView 的可滚动内容
Direction页面视图滚动方向
ScrollThreshold滚动临界值，默认单位百分比，当拖拽超出该数值时，松开会自动滚动下一页，小于时则还原
AutoPageTurningThreshold快速滑动翻页临界值，当用户快速滑动时，会根据滑动开始和结束的距离与时间计算出一个速度值，该值与此临界值相比较，如果大于临界值，则进行自动翻页
Inertia否开启滚动惯性
Brake开启惯性后，在用户停止触摸后滚动多快停止，0 表示永不停止，1 表示立刻停止
Elastic布尔值，是否回弹
Bounce Duration浮点数，回弹所需要的时间。取值范围是 0-10
Indicator页面视图指示器组件
PageTurningEventTiming设置 PageView、PageTurning 事件的发送时机
PageEvents数组，滚动视图的事件回调函数
CancelInnerEvents布尔值，是否在滚动行为时取消子节点上注册的触摸事件

（2）、PageView 事件

属性功能说明
Target带有脚本组件的节点
Component脚本组件名称
Handler指定一个回调函数，当 PageView 的事件发生的时候会调用此函数
CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入

PageView 的事件回调有两个参数，第一个参数是 PageView 本身，第二个参数是 PageView 的事件类型。


PageView 组件必须有指定的 content 节点才能起作用，content 中的每个子节点为一个单独页面，且每个页面的大小为 PageView 节点的大小，如果节点大小大于内容大小的话，可能会导致出现滚动不完整的现象。


在 PageView 组件下有一个 view 节点对象，该对象结合 ScrollThreshold 决定了当前滑动的距离是否达到可以翻页的条件，操作效果分为以下两种：

  • 缓慢滑动：通过拖拽视图中的页面到达指定的 ScrollThreshold 数值（该数值是页面大小的百分比）以后松开会自动滑动到下一页。
  • 快速滑动：快速的向一个方向进行拖动，自动滑倒下一页，每次滑动最多只能一页。

添加回调主要有2种方式：

  • 构造一个 EventHandler 对象，然后设置对应的 target、component、handler 和 customEventData 参数
import { _decorator, Component, Event, Node, PageView, EventHandler } from 'cc';
const { ccclass, property } = _decorator;@ccclass("test")
export class test extends Component {onLoad(){const pageChangedEventHandler = new EventHandler();pageChangedEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点pageChangedEventHandler.component = 'test'; // 这个是脚本类名pageChangedEventHandler.handler = 'callback';pageChangedEventHandler.customEventData = 'data';const page = this.node.getComponent(PageView);page.clickEvents.push(pageChangedEventHandler);}callback(event: Event, customEventData: string){// 这里 event 是一个 Touch Event 对象，可以通过 event.target 取到事件的发送节点const node = event.target as Node;const pageview = node.getComponent(PageView);console.log(customEventData);}
}

  • 通过 pageView.node.on('page-turning', ...) 方式添加

    注意: 这种方式注册的事件，无法传递 customEventData

    import { _decorator, Component, Event, Node, PageView } from 'cc';
const { ccclass, property } = _decorator;@ccclass("example")
export class example extends Component {onLoad(){this.pageView.node.on('page-turning', this.callback, this);}callback(pageView: PageView) {// 回调的参数是 pageView 组件}
}

(3)、PageViewIndicator

PageViewIndicator 是可选的，该组件是用来显示页面的个数和标记当前显示在哪一页。

PageViewIndicator 一般不会单独使用，它需要与 PageView 配合使用，可以通过相关属性，来进行创建相对应页面的数量的标记，当滑动到某个页面的时，PageViewIndicator 就会高亮它对应的标记。


在这里插入图片描述


PageViewIndicator 属性：

属性功能说明
spriteFrame每个页面标记显示的图片
direction页面标记摆放方向，分别为 水平方向 和 垂直方向
cellSize每个页面标记的大小
spacing每个页面标记之间的边距

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/112054.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++---异常处理

C++---异常处理

异常处理 异常处理try语句块和throw表达式异常的抛出和捕获异常的抛出和匹配原则 异常安全异常规范标准异常 异常处理 异常是指存在于运行时的反常行为，这些行为超出了函数正常功能的范围。当程序的某部分检测到一个他无法处理的问题时，需要用到异常处理…
阅读更多...
springboot基础--实现默认登录页面

springboot基础--实现默认登录页面

1、搭建项目 依赖中 多加入thymeleaf依赖 <dependencies><!--thymeleaf的依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!--we…
阅读更多...
Cpp/Qt-day010915Qt

Cpp/Qt-day010915Qt

目录 将工程文件进行注释 实现如下界面 头文件&#xff1a;widget.h: 源文件&#xff1a;widget.cpp: 运行效果 思维导图 将工程文件进行注释 实现如下界面 头文件&#xff1a;widget.h: #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLabe…
阅读更多...
【Linux】基础IO,软硬链接,动静态库

【Linux】基础IO,软硬链接,动静态库

1. 认识IO 什么是IO I/O简单来说对应的就是两个单词Input和Output&#xff0c;指的是计算机系统与外部环境&#xff08;通常是硬件设备或其他计算机系统&#xff09;之间的数据交换过程 I/O 可以分为两种主要类型&#xff1a; 输入&#xff08;Input&#xff09;&#xff1a; …
阅读更多...
人工智能训练师

人工智能训练师

人工智能训练师是一个较新的职业&#xff0c;2020年2月才被正式纳入国家职业分类目录。他们主要负责在人工智能产品使用过程中进行数据库管理、算法参数设置、人机交互设计、性能测试跟踪及其他辅助作业。 这个职业的背景源于AI公司从客户&#xff08;用户&#xff09;那里获取…
阅读更多...
【SpringMVC】文件上传与下载、JREBEL使用

【SpringMVC】文件上传与下载、JREBEL使用

目录 一、引言 二、文件的上传 1、单文件上传 1.1、数据表准备 1.2、添加依赖 1.3、配置文件 1.4、编写表单 1.5、编写controller层 2、多文件上传 2.1、编写form表单 2.2、编写controller层 2.3、测试 三、文件下载 四、JREBEL使用 1、下载注册 2、离线设置 一…
阅读更多...
uniapp视频播放功能

uniapp视频播放功能

UniApp提供了多种视频播放组件&#xff0c;包括视频播放器&#xff08;video&#xff09;、多媒体组件&#xff08;media&#xff09;、WebView&#xff08;内置Video标签&#xff09;等。其中&#xff0c;video和media组件是最常用的。 video组件 video组件是基于HTML5 vide…
阅读更多...
Windows Server 2012 R2系统远程桌面的数字证书算法SHA1升级到SHA256

Windows Server 2012 R2系统远程桌面的数字证书算法SHA1升级到SHA256

问题描述&#xff1a; 最近项目进行密评的时候&#xff0c;Windows Server 2012 R2发现了以下证书问题&#xff1a; Windows Server 2012 R2系统远程桌面的TLS 1.2协议使用SHA1算法数字证书&#xff0c;且证书有效日期截止23年10月&#xff0c;建议注意证书到期时间&#xff…
阅读更多...
JDK14特性——其他变化

JDK14特性——其他变化

文章目录 友好的空指针异常提示JAVA打包工具JFR事件流简介JFR使用JMC工具JFR事件JFR事件流 外部存储器API (孵化阶段)非易失性映射字节缓冲区 友好的空指针异常提示 NullpointerException是java开发中经常遇见的问题&#xff0c;在JDK14之前的版本中&#xff0c;空指针异常的提…
阅读更多...
WebGL 计算点光源下的漫反射光颜色

WebGL 计算点光源下的漫反射光颜色

目录 点光源光 逐顶点光照&#xff08;插值&#xff09; 示例程序&#xff08;PointLightedCube.js&#xff09; 代码详解 示例效果 逐顶点处理点光源光照效果时出现的不自然现象 更逼真&#xff1a;逐片元光照 示例程序&#xff08;PointLightedCube_perFragment.js…
阅读更多...
农民朋友有福利啦！建行江门市分行“裕农通+农资结算”平台正式上线

农民朋友有福利啦！建行江门市分行“裕农通+农资结算”平台正式上线

随着广东广圣农业发展有限公司办公室内的裕农通“智慧眼”结算机“叮”的一声到账提醒&#xff0c;标志着全国首个“裕农通农资结算“平台的成功上线&#xff0c;也标志着建行广东省江门市分行的裕农通业务又迈上了一个新的台阶。 广东广圣农业发展有限公司&#xff08;以下简…
阅读更多...
天机学堂项目微服务架构实战

天机学堂项目微服务架构实战

1.学习背景 各位同学大家好&#xff0c;经过前面的学习我们已经掌握了《微服务架构》的核心技术栈。相信大家也体会到了微服务架构相对于项目一的单体架构要复杂很多&#xff0c;你的脑袋里也会有很多的问号&#xff1a; 微服务架构该如何拆分&#xff1f;到了公司中我需要自己…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023