.aspectRatio()的用法

在 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. 注意事项

1. 必须先调用 .resizable()

   如果图片不可缩放（未设置 .resizable()），.aspectRatio 不会生效。

2. 裁剪风险

   使用 .fill 时，超出视图的部分会被裁剪（类似 clipsToBounds = true）。

3. 性能优化

   对大图片进行动态比例计算可能影响性能，建议预缩放或使用合适尺寸的资源。

---

总结

方法	说明
.aspectRatio(ratio, .fit)	按比例适应，可能留白
.aspectRatio(ratio, .fill)	按比例填充，可能裁剪
.scaledToFit()	快捷方式，等同于 .fit
.scaledToFill()	快捷方式，等同于 .fill

适用于图片、形状、自定义视图等需要控制比例的场合。