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.tpcf.cn/news/80109.html

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

相关文章

[npm]脚手架本地全局安装1

[npm]脚手架本地全局安装1

[npm]脚手架本地全局安装1 npm link 全局安装npm install 全局安装卸载全局安装的脚手架 该文章是你的脚手架已经开发完成的前提下，你想要本地全局安装该脚手架，便于本地使用脚手架的命令的情况 npm link 全局安装 如果本地开发的项目是个脚手架&#…
阅读更多...
【C语言】进阶——指针

【C语言】进阶——指针

目录 ①(●◡●)前言 1.字符指针 ✌字符指针和数组笔试题 2.指针数组 和数组指针 👊指针数组 👊数组指针 👊&数组名和数组名 3.数组传参和指针传参 👊一维数组传参 👊二维数组传参 👊一级…
阅读更多...
SpringBoot + Redis + Token 解决接口幂等性问题，挑选最佳方案！

SpringBoot + Redis + Token 解决接口幂等性问题，挑选最佳方案！

前言 SpringBoot实现接口幂等性的方案有很多，其中最常用的一种就是 token redis 方式来实现。 下面我就通过一个案例代码，帮大家理解这种实现逻辑。 原理 前端获取服务端getToken() -> 前端发起请求 -> header中带上token -> 服务端校验前端传…
阅读更多...
云原生之使用Docker部署Nas-Cab个人NAS平台

云原生之使用Docker部署Nas-Cab个人NAS平台

云原生之使用Docker部署Nas-Cab个人NAS平台 一、Nas-Cab介绍二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、下载Nas-Cab镜像五、部署Nas-Cab5.1 创建挂载目录5.2 创建Nas-Cab容…
阅读更多...
利用idea新创建maven项目时的一些基本配置

利用idea新创建maven项目时的一些基本配置

1.修改项目默认的maven仓库 file->Settings->Build 2.设置项目的jdk版本 设置完点OK即可。 同样的我们还需要在项目配置中进行修改。 通过以上设置一般就可以解决jdk版本不兼容地方问题。
阅读更多...
exgcd， 线性同余方程

exgcd， 线性同余方程

878. 线性同余方程 - AcWing题库 878. 线性同余方程 给定 n 组数据 ai,bi,mi，对于每组数求出一个 xi，使其满足 aixi≡bi(modmi)，如果无解则输出 impossible。 输入格式， 第一行包含整数 n。 接下来 n 行，每行包含…
阅读更多...
网络安全深入学习第一课——热门框架漏洞（RCE-代码执行）

网络安全深入学习第一课——热门框架漏洞（RCE-代码执行）

文章目录 一、代码执行概述二、代码执行相关函数1、eval2、assert3、${ }执行代码 三、命令执行和代码执行的区别 一、代码执行概述 代码执行定义： ------ 应用程序在调用一些能够将字符串转换为代码的函数（如PHP中的eval）时，没有…
阅读更多...
稀土系储氢合金 压力-组成等温线 PCI 的测试方法

稀土系储氢合金 压力-组成等温线 PCI 的测试方法

声明 本文是学习GB-T 29918-2023 稀土系储氢合金 压力-组成等温线 PCI 的测试方法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 5 方法2:电化学法 5.1 方法提要 以储氢合金作负极，烧结氢氧化亚镍作正极，氢氧化钾水溶液作电…
阅读更多...
postgresql-视图

postgresql-视图

postgresql-视图 视图概述使用视图的好处 创建视图修改视图删除视图递归视图可更新视图WITH CHECK OPTION 视图概述 视图（View）本质上是一个存储在数据库中的查询语句。视图本身不包含数据，也被称为 虚拟表。我们在创建视图时给它指定了一个…
阅读更多...
数字IC设计之时序分析基础概念汇总

数字IC设计之时序分析基础概念汇总

1 时钟Clock 理想的时钟模型是一个占空比为50%且周期固定的方波。时钟是FPGA中同步电路逻辑运行的一个基准。理想的时钟信号如下图: 2 时钟抖动Clock Jitter 理想的时钟信号是完美的方波，但是实际的方波是存在一些时钟抖动的。那么什么是时钟抖动呢?时钟抖动&#…
阅读更多...
17-垃圾回收相关概念

17-垃圾回收相关概念

目录 一、System.gc()的理解二、内存溢出和内存泄漏2、内存泄漏 三、Stop the World1、什么是 stop the word ? 四、垃圾回收的并行和并发1、并发和并发2、垃圾回收的并行和并发 五、安全点与安全区域1、什么是安全点？2、安全区域 六、强引用（不可回收&…
阅读更多...
苹果电脑Mac系统运行速度又卡又慢是怎么回事？

苹果电脑Mac系统运行速度又卡又慢是怎么回事？

通常大家处理Mac运行速度慢的方法不是重启就是清空废纸篓，但是这两种方法对于Mac提速性能的效果是微之甚微的，想要彻底解决Mac运行速度慢，你应该试试一下三种方法~ 1、清理磁盘空间 硬盘空间过少是Mac运行变慢很大的一个因素，各…
阅读更多...
华纳云：如何进行Linux CPU中的Kernel space分析

华纳云：如何进行Linux CPU中的Kernel space分析

分析 Linux CPU 中的 Kernel Space（内核空间）通常需要使用一些工具和技术，以便了解内核活动和性能问题。以下是一些方法和工具，可以帮助您在 Linux 系统上进行 Kernel Space 分析： dmesg 命令： dmesg 命令…
阅读更多...
解决MySQL 8.0以上版本设置大小写不敏感的问题

解决MySQL 8.0以上版本设置大小写不敏感的问题

MySQL 8.0以上版本默认区分大小写，但在低版本（如5.7）中，可以通过在my.cnf配置文件的[mysqld]节下添加lower_case_table_names1来设置大小写不敏感。然而，在MySQL 8.0以上版本中，添加此配置可能导致MySQL服务…
阅读更多...
【LeetCode刷题笔记】动态规划 — 70.爬楼梯

【LeetCode刷题笔记】动态规划 — 70.爬楼梯

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…
阅读更多...
Unity中 UI Shader的基本功能

Unity中 UI Shader的基本功能

文章目录 前言一、实现思路1、暴露一个 2D 类型的属性来接受UI的纹理2、设置shader的层级为TransParent半透明渲染层级&#xff0c;一般UI都是在这个渲染层级3、更改混合模式&#xff0c;是 UI 使用的纹理&#xff0c;该透明的地方透明 二、代码实现 前言 Unity中 UI Shader的…
阅读更多...
Python爬虫逆向猿人学刷题系列——第七题

Python爬虫逆向猿人学刷题系列——第七题

题目&#xff1a;采集这5页中胜点列的数据&#xff0c;找出胜点最高的召唤师&#xff0c;将召唤师姓名填入答案中 地址&#xff1a;https://match.yuanrenxue.cn/match/7 本题主要是考察字体的动态变化&#xff0c;同样也是从字体文件下手构造出映射关系就好&#xff0c;但本题…
阅读更多...
一个Linux主机巡检脚本

一个Linux主机巡检脚本

功能&#xff1a; 对Linux主机的物理资源消耗进行监测和统计&#xff0c;对运行在本机上的服务进程进行监测和统计&#xff0c;列出本机上的账户有效期 使用场景&#xff1a; 在没有 Promethes、zabbix、夜莺等监控工具的条件下&#xff0c;通过 crontab 排程应用本程序完成对主…
阅读更多...
【Training versus Testing】Positive intervals

【Training versus Testing】Positive intervals

GPT的解释&#xff1a; 这段话解释了在一维中&#xff0c;针对 "Positive intervals"&#xff08;正间隔&#xff09;假设类别 H 的成长函数 mq(N) 的计算方式&#xff0c;以及如何得出这个成长函数。 1. "Positive intervals" 指的是一维情境中的假设&a…
阅读更多...
Maven导入和引用本地包的方法

Maven导入和引用本地包的方法

maven项目中使用到了TrendDB_API.jar包&#xff0c;项目是直接导入的jar包而没用用maven的形式导入&#xff0c;导致在idea编辑时无法识别本地jar包&#xff0c;最后我采用的是用maven方式导入下本地jar包。 <dependency><groupId>TrendDB_API</groupId><…
阅读更多...
最新文章

Copyright @ 2022~2023