SwiftUI内容缩放修饰符aspectRatio、scaledToFit和scaledToFill

在SwiftUI中aspectRatio、scaledToFit和scaledToFill修饰符，和宽高比、内容缩放相关，但使用场景不同。

1、aspectRatio

语法：

aspectRatio(_ aspectRatio: CGFloat? = nil, contentMode: ContentMode)

作用：设置视图的宽高比（aspect ratio），并指定缩放方式。

参数：

1）aspectRatio：可选 CGFloat，指定宽高比（宽 ÷ 高）。

例如 1 表示宽高相等（正方形），16/9 表示宽高比为 16:9。

如果传入 nil，SwiftUI 会尽量保持原始内容的宽高比。

2）contentMode：ContentMode 类型，有两种：

.fit：保持比例，缩放内容以适应可用空间（内容可能留空白）。

.fill：保持比例，填充可用空间（内容可能被裁剪）。

特点：

可以用于任意视图（矩形、图片、圆形等）。

可以明确指定比例，也可以使用原始内容比例。

灵活性高，适合对视图宽高比有明确要求的情况。

使用示例：

1）固定宽高比的矩形

Rectangle()
    .fill(Color.blue)
    .frame(width: 200)
    .aspectRatio(1, contentMode: .fit) // 宽高比 1:1

Rectangle 的宽度是 200，aspectRatio(1, .fit) 会自动将高度也设置为 200，保持正方形。

2）图片保持宽高比

Image("example")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 300)

没有指定具体的比例，SwiftUI 会使用图片原始比例。

.fit 表示图片会缩放到宽度 300，同时保持比例，可能会在上下留空白。

3）填充并裁剪

Image("example")
    .resizable()
    .aspectRatio(16/9, contentMode: .fill)
    .frame(width: 300, height: 200)
    .clipped()

强制宽高比为 16:9。

.fill 会填满 300×200 的空间，可能超出裁剪掉部分内容。

clipped() 保证超出部分不会显示。

2、scaledToFit()

作用：保持视图原始比例，缩放以 适应容器。

等价：aspectRatio(contentMode: .fit)

限制：通常用于 Image，尤其是可拉伸（resizable()）的图片。

特点：保持比例，不会裁剪。图片会完全显示，但可能在容器的某些方向留空白。

示例：

Image("example")
    .resizable()
    .scaledToFit()
    ..frame(width: 300)

3、scaledToFill()

作用：保持视图原始比例，缩放以 填满容器。

等价：aspectRatio(contentMode: .fill)

限制：通常用于 Image。

特点：会裁剪超出容器的部分。保持比例但填满整个容器。

示例：

Image("example")
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 200)
    .clipped() // 超出容器部分裁剪

总结

aspectRatio(CGFloat?, contentMode:) 适合任意视图，可以指定比例，使用 .fit / .fill。

scaledToFit()、scaledToFill() 通常用于Image图片，写法简洁，但不能自定义比例。

相关文章

SwiftUI设置图片尺寸：https://fangjunyu.com/2025/08/31/swift%e8%ae%be%e7%bd%ae%e5%9b%be%e7%89%87%e5%b0%ba%e5%af%b8/