cocos3.0 关于UI组件学习

news2025/1/12 3:50:06

Sprite

图片：官方文档
在这里插入图片描述
Size Mode:
1.Raw：原始大小
2.TRIMMED: 默认，会裁切原始图片透明像素
3.Custom：自定义，只要修改ContentSize，会自动设置

Type
1.Simple:普通,会铺满，一张图。
2.Sliced:九宫格，会铺满，一张图，四角保持一样，中间被拉伸。
3.Tiled:平铺，会铺满，多张图。
4.Filled:填充，一张图，Simple升级版，可以设置填充范围。

Fill Type: 填充类型，水平和垂直，扇形。
在这里插入图片描述
ImageAsset使用代码：

//比如本地 resources/image/logo.png
var url:string="image/logo";
// 方式一：ImageAsset -> Texture2D -> SpriteFrame
resources.load(url, ImageAsset, (err, imageAsset) => {
  if (err) {
    return console.error("ImageAssert load failed, err:" + err.message);
  }
  //1.原始方法
  let texture = new Texture2D(); 
  texture.image = imageAsset;
  let spriteFrame = new SpriteFrame();
  spriteFrame.texture = texture;
  sprite.spriteFrame = spriteFrame;
  //2.快捷方法
  sprite.spriteFrame = SpriteFrame.createWithImage(imageAsset);
});

//方式二：Texture2D -> SpriteFrame
url="image/logo/texture";
resources.load(url,Texture2D,(err,texture2d)=>{})

//方式三： SpriteFrame
url="image/logo/spriteFrame";
resources.load(url,SpriteFrame,(err,spriteFrame)=>{})

//加载远程或其他平台

//1.不带有后缀的，必须指证文件类型
let url = "http://xxx.com/icon?id=12345";
assetManager.loadRemote<ImageAsset>(url, {ext:'.png'}, (err, imageAsset) => {})

let url = "http://xxx.com/icon/andy.jpg";
assetManager.loadRemote<ImageAsset>(url, (err, imageAsset) => {})

关于图集使用，点击这里

Mask

遮罩：官方文档
Type
1.RECT：矩形遮罩
2.ELLIPSE：多边形遮罩，通过Segments设置几条边，设置为6是六边形，设置64接近圆。
3.GRAPHICS_STENCIL：图形遮罩，需要挂一个脚本对 Graphics进行画图
4.SPRITE_STENCIL：图片遮罩，需要拖入一个sprite图片。CD倒计时可用Filled类型。

在这里插入图片描述
CD倒计时代码：

	let sprite:Sprite=this.mask.getComponent(Sprite);
	sprite.type = Sprite.Type.FILLED;
	sprite.fillType = Sprite.FillType.RADIAL;
	sprite.fillStart=0;
	sprite.fillCenter = new Vec2(0.5,0.5);
	update(deltaTime: number) {
        if(this.mask.node){
            let sprite:Sprite = this.mask.getComponent(Sprite);
            sprite.fillRange+=0.01;
            if(sprite.fillRange>=1){
                sprite.fillRange=0;
            }
        }
    }

ProgressBar

进度条：官方文档

在这里插入图片描述
1.拉伸图片：Mode使用HORIZONTAL或VERTICAL，Bar使用Sliced，Total Length是总长度。
2.填充图片：Mode使用FILLED,Bar使用Filled，Fill Range填1，Bar宽度是总长度。

	progressbar.progress = 0.5;

Layout

布局：官方文档
在这里插入图片描述
Type 布局类型
1.HORIZONTAL：水平
2.VERTICAL：垂直
3.GRID：表格

ResizeMode 模式：

1.NONE：子物体和容器的大小变化互不影响。
2.CHILDREN：子物体大小会随着容器的大小而变化。
3.CONTAINER：容器的大小会随着子物体的大小变化。

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

Constraint 模式：
1.NONE：自由布局。
2.FIXED_ROW：固定行数，搭配 ConstraintNum 使用。
3. FIXED_COL：固定列数，搭配 ConstraintNum 使用。

Scroll View

滚动视图：官方文档
在这里插入图片描述
Inertia：滚动停止时，是否有加速度。
Elastic：滚动越界时，是否可以反弹。
content：里边最好挂一个Layout组件，可以设置显示内容水平和垂直间距，显示个数。

ToggleContainer

单选框：官方文档
在这里插入图片描述
代码使用：

@ccclass('BasicUI')
export class BasicUI extends Component {
	@property(ToggleContainer)
	toggleGroup:ToggleContainer = null!;
	
	start() {
		//单选组
		const containerEventHandler = new EventHandler();
		// 脚本所挂的节点
		containerEventHandler.target = this.node; 
		// 脚本类名
		containerEventHandler.component = 'BasicUI';
		containerEventHandler.handler = 'checkGroup';
		containerEventHandler.customEventData = 'data';
		
		this.toggleGroup.checkEvents.push(containerEventHandler);
	}
    private checkGroup(event: Event, customEventData: string):void{
        console.log("单选测试：",event,customEventData);
    }
}