SwiftUI 系列 11｜适配深色模式、动态字体和不同尺寸屏幕的实战方法

很多页面一开始在开发机上看都挺正常：

• 颜色没问题
• 字号也合适
• 布局挺顺

但只要切到：

• 深色模式
• 更大字体
• 更窄屏幕
• 更长文案

问题就会一下暴露出来。

这说明很多所谓“适配问题”，本质上不是最后忘了补，而是页面一开始就被写死在一种默认条件里。

一、深色模式、动态字体、不同屏幕，本质上都在问同一件事：你的页面是不是对环境变化有弹性

很多人会把这些适配项分开看：

• 深色模式是颜色问题
• 动态字体是字号问题
• 小屏适配是布局问题

当然这些判断都没错，但从更高层看，它们本质上都在测试同一件事：

你的页面是不是只在一种“默认环境”下成立。

如果一个页面只有在默认字号、浅色模式、标准尺寸下才看起来合理，那它的问题其实不是单点，而是弹性不够。

二、最常见的适配失败，不是技术不会，而是写死了太多视觉假设

比如：

• 文本永远只有一行
• 卡片高度固定
• 图标和文案总能保持现在这个距离
• 某个颜色在任何背景下都够清晰

这些假设在单一环境下可能都成立，一旦环境变化，它们就会一起崩。

所以适配真正重要的不是“补判断”，而是少写这种脆弱假设。

三、动态字体最常暴露的问题，其实是布局层次没立稳

很多人一提动态字体，第一反应就是：

• 字体太大会不会超出

这当然是问题，但更深层的风险是：

• 某些结构本来就只在固定文案长度下成立
• 某些卡片本来就靠硬编码高度维持
• 某些图文关系本来就没有留出弹性

所以动态字体不是只在测试字号，而是在测试你的布局是不是只在“刚好这个尺寸”时才成立。

四、深色模式真正难的，也不是换一套颜色，而是层级和对比关系会不会失衡

很多页面切到深色后出问题，不是因为忘了改颜色，而是：

• 背景和文字层级关系没想清
• 强调色在浅色模式好看，在深色模式刺眼
• 次级信息在深色下对比度太低

也就是说，深色模式测试的不是“你有没有第二套颜色值”，而是你的视觉层次是不是足够清楚。

五、不同尺寸屏幕适配，本质上也不是“小屏补丁”，而是空间分配逻辑够不够稳

有些页面在大屏上看挺舒展，到了小屏就开始：

• 挤
• 断
• 换行后全乱

这说明问题通常不在小屏本身，而在于空间分配逻辑不稳。
比如：

• 哪些区域该弹性伸缩
• 哪些区域可以换行
• 哪些内容优先级更高

这些一开始没想清楚，设备一变就会暴露。

六、结论：真正的适配能力，本质上是页面对环境变化的弹性

如果只用一句话总结，我会说：

SwiftUI 页面适配深色模式、动态字体和不同尺寸屏幕，真正要做的不是最后补几个条件，而是一开始就别把页面写死在一种默认环境里。

当页面本身有弹性时，适配会自然很多；
没有弹性时，后期补丁通常会越来越多。