aspectRatio

This article is extracted from the chat log with AI. Please identify it with caution.

在 SwiftUI 中，aspectRatio 是一个用于控制视图宽高比的核心修饰符，它能够根据内容或容器尺寸动态调整视图的比例。以下是其详细使用方法和典型场景：

一、基础使用方法#

1. 语法与参数#

.aspectRatio(_ ratio: CGFloat?, contentMode: ContentMode)

• ratio：宽高比（width / height），若为 nil 则根据视图内容自动计算（如 Image 的原始比例）。 • contentMode： • .fit：保持比例，确保视图完全在父容器内显示（可能留白）。 • .fill：保持比例，填充父容器（可能裁剪超出部分）。

2. 直接设置比例#

通过数值指定固定宽高比：

Image("example")
    .resizable()
    .aspectRatio(16/9, contentMode: .fit)  // 固定 16:9 比例

3. 基于内容自适应#

若省略 ratio，则根据视图内容（如 Image 的原始尺寸）自动计算比例：

Image("dog")
    .resizable()
    .aspectRatio(contentMode: .fill)  // 根据图片原始比例填充

二、典型使用场景#

1. 图片适配与裁剪#

• 适配容器尺寸：
结合 .frame 和 .clipped() 实现动态缩放并裁剪：

Image("landscape")
    .resizable()
    .aspectRatio(contentMode: .fill)  // 填充容器
    .frame(width: 300, height: 200)   // 父容器尺寸
    .clipped()                        // 裁剪超出部分

• 响应式图片列表：
在 HStack 或 LazyVGrid 中统一图片比例：

LazyVGrid(columns: columns) {
    ForEach(photos) { photo in
        Image(photo.name)
            .resizable()
            .aspectRatio(1, contentMode: .fit)  // 1:1 正方形缩略图
    }
}

2. 动态布局响应#

• 容器约束下的比例保持：
当父容器尺寸变化时，保持子视图宽高比：

GeometryReader { proxy in
    Rectangle()
        .fill(Color.blue)
        .aspectRatio(2/1, contentMode: .fit)  // 宽高比 2:1
        .frame(maxWidth: proxy.size.width)    // 随父容器宽度变化
}

• 与动画结合：
实现形状变换动画（如圆形 ↔ 矩形）：

@State private var isExpanded = false

Button(action: { withAnimation { isExpanded.toggle() } }) {
    Rectangle()
        .aspectRatio(isExpanded ? 1 : 2, contentMode: .fill)  // 动态比例
}

3. 复合布局优化#

• 多视图比例同步：
在 VStack 或 HStack 中统一子视图比例：

HStack(spacing: 10) {
    Image("icon1").aspectRatio(1, contentMode: .fit)
    Image("icon2").aspectRatio(1, contentMode: .fit)
    Text("Label").aspectRatio(2, contentMode: .fit)  // 文本区域宽高比 2:1
}

4. 跨平台适配#

• SF Symbols 图标比例控制：
调整系统图标在不同设备上的显示比例：

Image(systemName: "heart.fill")
    .aspectRatio(1, contentMode: .fit)  // 确保圆形图标不变形
    .frame(width: 40)

三、进阶技巧与注意事项#

1. 与 `frame` 的优先级#

• 若同时设置 .frame 和 .aspectRatio，布局计算顺序会影响最终效果：

Image("cat")
    .resizable()
    .frame(width: 200)                // 固定宽度
    .aspectRatio(1, contentMode: .fit)  // 高度 = 200/1 = 200

2. 内容模式的冲突#

• 使用 .fill 时需结合 .clipped() 避免内容溢出：

Circle()
    .aspectRatio(1, contentMode: .fill)
    .frame(width: 100, height: 50)    // 实际显示为椭圆
    .clipped()                        // 裁剪为圆形

3. 性能优化#

• 对复杂视图（如动态生成的内容）建议预计算比例，减少布局计算次数：

let aspectRatio = image.size.width / image.size.height
MyCustomView()
    .aspectRatio(aspectRatio, contentMode: .fit)

四、总结表格#

场景	修饰符组合	效果
图片适配容器	`.resizable().aspectRatio(contentMode: .fit)`	完整显示不裁剪
卡片式设计背景图	`.aspectRatio(16/9, contentMode: .fill).clipped()`	填充并裁剪为指定比例
动态响应布局	`@State` 变量 + `.aspectRatio` 动态比例	实现形状动画变换
跨平台图标统一	`Image(systemName:)` + `.aspectRatio(1)`	确保圆形/方形图标不变形

通过灵活运用 aspectRatio，开发者可以实现从简单图片适配到复杂动态布局的全场景比例控制，其核心逻辑是通过 比例约束 和 内容模式 的协同作用，使视图在不同容器环境下保持视觉一致性。