遮罩组件 && 布局组件 &&ScrollView组件

最新推荐文章于 2024-11-02 17:27:28 发布

转载最新推荐文章于 2024-11-02 17:27:28 发布 · 582 阅读

cocos creator 专栏收录该内容

10 篇文章

订阅专栏

本文介绍Mask组件和Layout组件的功能与应用。Mask组件通过不同的遮罩类型（矩形、椭圆、贴图）实现视觉效果，而Layout组件简化UI排版流程。结合ScrollView组件，可以轻松管理滚动视图内的UI元素。

遮罩组件

简称Mask组件，提供viewport功能的一个组件
我在viewport节点上挂载一个mask组件，然后在这个节点上添加子节点就会形成遮罩效果，遮罩会根据size和mask的类型决定。

组件属性	功能
Type	遮罩类型	效果
RECT	矩形遮罩
ELLIPSE	椭圆遮罩	边数越多越圆
IMAGE_STENCIL	贴图遮罩

Inverted	是否反转

布局组件

简称Layout组件，该组件使排版更加方便，不需要耗费大量精力调整
效果演示：

ScrollView组件使用

创建一个ScrollView组件：
创建组件
ScrollView组件中由2个子节点组成scrollBar和view
scrollBar是一个滚动条的模板
view是一个遮罩，用于把多出来的内容隐藏
我们可以在view内添加一个Layout组件来实现对UI的编辑：
配合Layout
ScrollView与Layout配合使用效果更佳