屏幕适配

屏幕和节点适配

介绍#

框架内提供了两个适配组件，分别用于屏幕和节点

屏幕适配#

mk.AdaptationCanvas 是屏幕适配组件，并且框架封装了两种适配类型

/** 适配模式 */
export enum AdaptationMode {
    /** 无 */
    None,
    /** 自适应（更宽定高，更高定宽） */
    Adaptive,
    /** 固定尺寸（屏幕尺寸不同大小相同） */
    FixedSize,
}

你只需要修改配置类型，框架就会自动进行屏幕适配

GlobalConfig.ts
namespace GlobalConfig {
    ...
	export namespace View {
        ...
		/** 适配类型 */
		export const adaptationType: AdaptationMode = AdaptationMode.Adaptive;
    }
}

节点适配#

节点适配是依靠在节点上添加 MKAdaptationNode 组件进行的

节点适配组件

适配模式#

  • Scale: 组件会调整当前节点的缩放来进行适配

  • Size: 组件会调整当前节点的宽高来进行适配

当设置为 Size 时，组件会在挂载时或节点更换图片时保存节点的原始大小，推荐使用 Scale

适配来源#

  • Canvas：Canvas 大小

  • Parent：父节点大小

  • Customize：自定义大小

适配来源也就是节点适配的目标尺寸来源

适配类型#

图中红色为适配来源，图片为适配节点

  • 默认: 原始尺寸 原始尺寸

  • 缩放: 和目标尺寸一致 缩放

  • 自适应_展示完 自适应_展示完

  • 自适应_填充满 自适应_填充满

  • 填充宽 填充宽

  • 填充高 填充高