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

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

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

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

一、Layout 组件


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

（1）、Layout 属性

（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 属性

（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 属性

三、PageView 组件

PageView 是一种页面视图容器。

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

（1）、PageView 属性

（2）、PageView 事件

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 属性：