响应式布局和多分辨率适配 —— 让你的游戏在所有设备上都好看

05/03108 浏览开发交流

你做了个游戏，在电脑上看着挺好。发到手机上一看——按钮小得点不到，文字糊成一团，背包格子挤成一坨。

这不是 bug，是你没做「分辨率适配」。

不同设备的屏幕差异巨大：

电脑：1920x1080，DPR 1.0

iPhone 15：2556x1179，DPR 3.0

安卓千元机：1520x720，DPR 2.0

iPad Pro：2732x2048，DPR 2.0

如果你写死了「按钮宽度 200 像素」，在电脑上刚好，到 iPhone 上就只有指甲盖那么大。

这篇帖子教你怎么跟嗒啦啦沟通，让它帮你做出「一套代码，所有设备都好看」的 UI。

难度：需要了解基本 UI 搭建（建议先看上一篇 UI 教程）

第一章：先搞懂一个概念 —— DPR

DPR 全称 Device Pixel Ratio，设备像素比。

简单说：1 个「逻辑像素」在屏幕上实际用多少个「物理像素」来显示。

举个例子：

电脑屏幕 DPR = 1.0 → 你写 fontSize=16，屏幕上就是 16 个物理像素高

iPhone DPR = 3.0 → 你写 fontSize=16，屏幕上是 48 个物理像素高

所以同样写 16，在 iPhone 上看起来和电脑上一样大，因为 iPhone 虽然物理像素多，但每个像素也更小更密。

引擎里获取 DPR 的方法：

graphics:GetDPR()

电脑上通常返回 1.0

手机上通常返回 2.0 或 3.0

记住这个概念，后面全要用。

第二章：三种缩放模式，选哪个？

引擎的 UI 库提供三种缩放模式，在 UI.Init 的 scale 参数里设置。

【模式一：DEFAULT（默认，推荐）】

UI.Init 里设 scale = UI.Scale.DEFAULT

效果：1 个基准像素 = 1 个 CSS 像素，自动适配小屏。

你写 fontSize=16，在所有设备上看起来「差不多大」。小屏手机上会自动把 UI 缩小一点，防止按钮把屏幕挤满。

适合：大多数游戏，不想操心适配的情况。

你写的尺寸就按网页的常识来：按钮高 40-48，字号 14-16，间距 8/16/24。

这是默认选项，不知道选什么就选这个。

【模式二：DPR】

UI.Init 里设 scale = UI.Scale.DPR

效果：1 个基准像素 = 1 个 CSS 像素，所有设备上 UI 元素物理尺寸严格一致。

和 DEFAULT 的区别是：不做小屏密度修正。在小屏手机上 UI 可能显得拥挤，因为按钮占屏比更高。

适合：对视觉一致性要求极高的场景。

【模式三：DESIGN_RESOLUTION（设计分辨率）】

UI.Init 里设 scale = UI.Scale.DESIGN_RESOLUTION(1920, 1080)

效果：你按 1920x1080 的画布来写所有坐标和尺寸，引擎自动缩放到实际屏幕。

适合：有 UI 设计稿，设计师给了精确的像素标注（比如「这个按钮在 1080P 下是 240x60」）。

注意：如果没有设计稿，不要用这个模式。

【怎么选？一句话总结】

没设计稿 → DEFAULT

有设计稿 → DESIGN_RESOLUTION

要求严格一致 → DPR

【提示词·直接复制给嗒啦啦】

帮我初始化 UI 系统，使用默认的分辨率适配方案，字体用 MiSans。

嗒啦啦会生成：

local UI = require("urhox-libs/UI")

UI.Init 里设字体为 Fonts/MiSans-Regular.ttf，scale 设为 UI.Scale.DEFAULT。

如果你有设计稿，换成这样说：

帮我初始化 UI 系统，按 1920x1080 的设计分辨率来适配，字体用 MiSans。

第三章：响应式布局六大技巧

光靠缩放模式不够。如果你把一个 Panel 写死宽 600 像素，在手机竖屏上就会超出屏幕。

响应式布局的核心思想：不要写死尺寸，让 UI 跟着屏幕大小「流动」。

【技巧一：百分比宽度】

把固定值换成百分比。

写 width="90%" 而不是 width=600。

这样不管屏幕多宽，面板都占 90%。

提示词：「卡片宽度用 90%，最大不超过 400」

嗒啦啦会用 width="90%" 加 maxWidth=400。

大屏上卡片最宽 400 不会太散，小屏上占 90% 不会超出。

【技巧二：弹性填充 flexGrow】

让某个区域自动填满剩余空间。

经典场景：顶栏 + 内容区 + 底栏。

顶栏和底栏高度固定，内容区用 flexGrow=1 填满中间。

提示词：「做一个上中下三栏布局，顶栏 60 像素，底栏 50 像素，中间内容区自动填满」

嗒啦啦会把中间 Panel 设 flexGrow=1, flexBasis=0。

注意：用 flexGrow 时，外层容器必须有确定的 height（比如 height="100%"），不能用 maxHeight，否则 flexGrow 算出来是 0。

【技巧三：自动换行 flexWrap】

横排放不下时自动换到下一行。

经典场景：技能按钮栏。屏幕宽就一排放 6 个，屏幕窄就自动变成两排。

提示词：「做一排技能按钮，放不下自动换行，每个按钮宽 80 像素」

嗒啦啦会用 flexDirection="row" 加 flexWrap="wrap"。

或者直接用 UI.ButtonGroup 组件，它自带自动换行。

【技巧四：SimpleGrid 自适应网格】

背包、图鉴这种网格布局，用 SimpleGrid 组件最省事。

两种用法：

固定列数：设 columns=4，不管屏幕多宽都是 4 列。

自适应列数：设 minColumnWidth=100，屏幕越宽列越多，每列最少 100 像素。

提示词：「做一个物品网格，每格最少 80 像素宽，屏幕越宽格子越多」

嗒啦啦会用 UI.SimpleGrid 加 minColumnWidth=80。

【技巧五：SafeAreaView 安全区域】

手机有刘海、圆角、底部横条，这些区域会遮挡 UI。

用 SafeAreaView 包裹最外层，引擎自动给被遮挡的边加内边距。

提示词：「最外层用 SafeAreaView 包裹，适配手机刘海」

嗒啦啦会在最外层加 UI.SafeAreaView，里面再放你的 UI 内容。

【技巧六：margin="auto" 居中】

想让一个元素在容器里居中，最简单的方法是给它设 margin="auto"。

配合 maxWidth 使用效果最好：面板本身有最大宽度限制，用 auto margin 在大屏上居中，小屏上自动撑满。

第四章：实战案例

【案例一：适配所有设备的主菜单】

提示词：

帮我做一个主菜单，要求在手机和电脑上都好看。

菜单面板宽度 90%，最大 360 像素，居中显示。

用 SafeAreaView 适配刘海屏。

缩放模式用默认。

游戏标题 "太空大冒险"，下面三个按钮：开始、设置、退出。

嗒啦啦会生成的核心结构：

UI.Init 设 scale = UI.Scale.DEFAULT

最外层 SafeAreaView，width 和 height 都是 100%

里面 Panel 设 justifyContent="center", alignItems="center"

卡片 Panel 设 width="90%", maxWidth=360

标题 + 按钮

这样不管是 iPhone 还是 27 寸显示器，菜单都居中且大小合适。

【案例二：自适应背包网格】

提示词：

帮我做一个背包界面，物品格子要自适应屏幕宽度。

小屏显示 4 列，大屏自动变成 5 列或更多。

每个格子最小 70 像素。

格子之间间距 8 像素。

嗒啦啦会用 SimpleGrid 加 minColumnWidth=70, gap=8。

屏幕宽 320 时显示 4 列，屏幕宽 500 时自动变成 6 列。

【案例三：上中下三栏 + 内容滚动】

提示词：

做一个游戏 UI 布局：

顶栏 60 像素高，显示金币和体力。

中间内容区自动填满，内容超出可以滚动。

底栏 50 像素高，显示四个功能按钮横排排列。

适配手机刘海屏。

嗒啦啦会生成：

SafeAreaView 包裹全部

顶栏 Panel 高 60

中间 ScrollView 设 flexGrow=1, flexBasis=0

底栏 Panel 高 50, flexDirection="row"

注意嗒啦啦用的是 height="100%" 而不是 maxHeight，因为 flexGrow 需要父容器有确定高度。

第五章：常见坑

坑1：flexGrow 的子元素高度变成 0

原因：父容器用了 maxHeight 而不是 height。

flexGrow 需要父容器有「确定的尺寸」才能计算剩余空间。maxHeight 只是上限，不算确定尺寸。

解决：把 maxHeight="85%" 改成 height="85%"。

坑2：子元素溢出容器

原因：Yoga 布局的 flexShrink 默认是 0，不会自动收缩。

这和 CSS 不同（CSS 默认 flexShrink=1）。

解决：给可能溢出的子元素加 flexShrink=1。

或者跟嗒啦啦说「内容太长时允许收缩，不要溢出」。

坑3：横向布局内容挤成一团

原因：flexDirection 默认是 column（纵向），你想横排但忘了改。

解决：跟嗒啦啦说「这几个元素横排排列」，它会加 flexDirection="row"。

坑4：手机上 UI 太小

原因：没设 scale，默认 scale=1 直接用物理像素。

高 DPR 手机上物理像素很小，UI 就很小。

解决：确保 UI.Init 里设了 scale = UI.Scale.DEFAULT。

坑5：ScrollView 不能滚动

原因：ScrollView 没有设 flexGrow=1 和 flexBasis=0。

或者外层容器没有确定高度。

解决：跟嗒啦啦说「滚动区域用 flexGrow=1 和 flexBasis=0，外层容器用 height 不用 maxHeight」。

Yoga 布局和 CSS 的三个关键区别

如果你有 CSS 基础，一定要注意这三个不同：

1. flexShrink 默认值

CSS 默认 1（自动收缩），Yoga 默认 0（不收缩，可能溢出）。

写游戏 UI 时经常需要手动加 flexShrink=1。

2. flexDirection 默认值

CSS 默认 row（横向），Yoga 默认 column（纵向）。

想横排就得显式设 flexDirection="row"。

3. 盒模型

CSS 默认 content-box（padding 加在外面），Yoga 默认 border-box（padding 包含在 width 里）。

这个反而更直觉，不用额外操心。

记住前两条就够了，第三条是好消息。

总结

分辨率适配的核心就一句话：

用 UI.Scale.DEFAULT 开局，用百分比和 flexGrow 做布局，用 SafeAreaView 防刘海。

记住三条铁律：

第一条：scale = UI.Scale.DEFAULT

不设的话手机上 UI 大小会乱套。

第二条：不要写死像素值

用 width="90%" + maxWidth=400 代替 width=400。

第三条：flexGrow 的父容器要有确定高度

用 height，不用 maxHeight。

做到这三条，你的游戏 UI 在手机、平板、电脑上都能正常显示。剩下的细节交给嗒啦啦，跟它说清楚就行。

有问题评论区见！

#TapTap制造 #嗒啦啦

TapTap 制造应用

9.8

前往论坛