在 SwiftUI 中，.aspectRatio 是一个修饰符（modifier），用于控制视图（通常是图片或自定义视图）的 宽高比（Aspect Ratio），确保其按特定比例缩放或适应布局。它通常与 .resizable() 一起使用来调整图片的显示方式。
1. 基本语法
.aspectRatio 有两种主要用法：
(1) 指定比例值
.aspectRatio(CGFloat, contentMode: ContentMode)
- 参数：
CGFloat：宽高比（width / height）。contentMode：.fit（适应，可能留白）或.fill（填充，可能裁剪）。
示例（强制视图保持 16:9 比例）：
Image("example")
.resizable()
.aspectRatio(16/9, contentMode: .fit) // 宽度:高度 = 16:9
(2) 使用 CGSize 计算比例
.aspectRatio(CGSize, contentMode: ContentMode)
- 参数：
CGSize(width: x, height: y)：计算比例x / y。
示例（保持图片原始比例）：
let imageSize = CGSize(width: 300, height: 200) // 假设图片原始尺寸
Image("example")
.resizable()
.aspectRatio(imageSize, contentMode: .fit) // 比例 3:2
2. contentMode 的两种模式
| 模式 | 说明 | 效果 |
|---|---|---|
.fit | 保持比例，完整显示在视图内（可能留白） | ⬜️↔️（适应） |
.fill | 保持比例，填满整个视图（可能裁剪） | ⬜️🔍（填充） |
示例对比：
Image("landscape")
.resizable()
.aspectRatio(2, contentMode: .fit) // 适应（可能留白）
.frame(width: 200, height: 200)
Image("landscape")
.resizable()
.aspectRatio(2, contentMode: .fill) // 填充（可能裁剪）
.frame(width: 200, height: 200)
3. 常见使用场景
(1) 保持图片原始比例
Image("photo")
.resizable()
.aspectRatio(contentMode: .fit) // 自动计算原始宽高比
(2) 强制视图按比例缩放
Rectangle()
.fill(Color.blue)
.aspectRatio(1.0, contentMode: .fit) // 正方形（1:1）
(3) 结合 GeometryReader 动态计算比例
GeometryReader { proxy in
Image("banner")
.resizable()
.aspectRatio(proxy.size.width / proxy.size.height, contentMode: .fill)
}
4. 与 .scaledToFit() / .scaledToFill() 的关系
.scaledToFit()=.aspectRatio(contentMode: .fit).scaledToFill()=.aspectRatio(contentMode: .fill)
等效写法：
// 以下两行等效
Image("cat").resizable().scaledToFit()
Image("cat").resizable().aspectRatio(contentMode: .fit)
5. 注意事项
-
必须先调用
.resizable()
如果图片不可缩放（未设置.resizable()），.aspectRatio不会生效。 -
裁剪风险
使用.fill时，超出视图的部分会被裁剪（类似clipsToBounds = true）。 -
性能优化
对大图片进行动态比例计算可能影响性能，建议预缩放或使用合适尺寸的资源。
总结
| 方法 | 说明 |
|---|---|
.aspectRatio(ratio, .fit) | 按比例适应，可能留白 |
.aspectRatio(ratio, .fill) | 按比例填充，可能裁剪 |
.scaledToFit() | 快捷方式，等同于 .fit |
.scaledToFill() | 快捷方式，等同于 .fill |
适用于图片、形状、自定义视图等需要控制比例的场合。
