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.mzph.cn/news/80109.shtml

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

相关文章

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

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

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

【C语言】进阶——指针

目录 ①(●◡●)前言 1.字符指针 ✌字符指针和数组笔试题 2.指针数组 和数组指针 👊指针数组 👊数组指针 👊&数组名和数组名 3.数组传参和指针传参 👊一维数组传参 👊二维数组传参 👊一级…
阅读更多...
云原生之使用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版本不兼容地方问题。
阅读更多...
稀土系储氢合金 压力-组成等温线 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 理想的时钟信号是完美的方波，但是实际的方波是存在一些时钟抖动的。那么什么是时钟抖动呢?时钟抖动&#…
阅读更多...
苹果电脑Mac系统运行速度又卡又慢是怎么回事？

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

通常大家处理Mac运行速度慢的方法不是重启就是清空废纸篓，但是这两种方法对于Mac提速性能的效果是微之甚微的，想要彻底解决Mac运行速度慢，你应该试试一下三种方法~ 1、清理磁盘空间 硬盘空间过少是Mac运行变慢很大的一个因素，各…
阅读更多...
【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;但本题…
阅读更多...
【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…
阅读更多...
推荐书目：Python从入门到精通（文末送书）

推荐书目：Python从入门到精通（文末送书）

目录 编辑推荐 内容简介 作者简介 前言/序言 本书特点 编辑推荐 “软件开发视频大讲堂”丛书是清华社计算机专业基础类零售图书畅销品牌之一。 &#xff08;1&#xff09;2008—2023年&#xff0c;丛书累计修订7次&#xff0c;销售400万册&#xff0c;深受广大程序员喜爱。…
阅读更多...
Spring安全配置: 构建安全稳固的Java应用

Spring安全配置: 构建安全稳固的Java应用

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
2023国赛B题：多波束测线问题 评阅要点完整分析

2023国赛B题：多波束测线问题 评阅要点完整分析

本文所有分析仅代表个人观点&#xff0c;不代表官方&#xff0c;仅供参考 制作人&#xff1a;川川徒弟 demoo CSDN&#xff1a;川川菜鸟公众号&#xff1a;川川带你学AI 全文采用非编程做法  需要工具&#xff1a; geogebra、matlab工具箱   注&#xff1a; 本文全文不考虑…
阅读更多...
前端Layui框架介绍

前端Layui框架介绍

当涉及到前端UI框架时&#xff0c;Layui&#xff08;简称layui&#xff09;是一个备受欢迎的框架之一。在这篇博客中&#xff0c;我们将深入了解layui&#xff0c;包括其市场占有率、开发语言、使用场景、框架特点以及一些使用案例。 1. 市场占有率 Layui 是一款流行的前端UI框…
阅读更多...
Mysql

Mysql

视频链接 黑马Mysql 基础篇 通用语法及分类 DDL: 数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表、字段&#xff09;DML: 数据操作语言&#xff0c;用来对数据库表中的数据进行增删改DQL: 数据查询语言&#xff0c;用来查询数据库中表的记录DCL: 数据控…
阅读更多...
网络原理，了解xml, json,protobuffer的特点

网络原理，了解xml, json,protobuffer的特点

目录 外卖服务器场景带入 大佬们通用的规范格式 一、&#x1f466; 外卖服务器场景 外面服务器沟通有很多模式——展示商家列表等等&#xff0c;只是其中一个&#xff0c;因此需要一个统一的规划了——不同应用程序&#xff0c;里面的自定义格式是不一样的&#xff0c;这样的…
阅读更多...
icmp报文及用go实现

icmp报文及用go实现

目录 一、概述 二、ICMP报文格式详解 2.1 什么是ICMP 2.2 ICMP报文格式 2.3 ICMP报文类型 2.4 实际报文举例 三、使用go实现icmp请求以及接收响应内容 一、概述 本文主要旨在学习icmp报文格式&#xff0c;以及通过go语言来实现ICMP发包。 二、ICMP报文格式详解 2.1 什…
阅读更多...
练习：使用servlet显示试卷页面

练习：使用servlet显示试卷页面

试卷页面代码 在浏览器输入如下地址&#xff1a; http://localhost/examPageServlet 效果如下&#xff1a;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023