播面

在 SwiftUI 中，要让 Image 能够改变大小并适应 Frame，你需要使用 .resizable() 修饰符。

关键点： Image 视图默认是显示图片的原始像素尺寸的。只有添加了 .resizable()，它才会根据可用空间或指定的 Frame 进行缩放。

以下是标准写法和步骤：

1. 基本用法

Image("yourImageName")
    .resizable() // 1. 开启缩放功能（必须放在 frame 之前）
    .frame(width: 200, height: 200) // 2. 设置 Frame 大小

2. 保持纵横比 (Aspect Ratio)

直接使用 .resizable() 可能会导致图片变形（拉伸或挤压）。通常我们需要配合 .scaledToFit() 或 .scaledToFill() 来保持图片的原始比例。

方案 A：适应 (Fit) - 图片完整显示

图片会尽可能大，但保证完整显示在 Frame 内。Frame 可能会留有空白。

Image("avatar")
    .resizable()
    .scaledToFit() // 等同于 .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)
    .background(Color.gray) // 为了看清 Frame 边界

方案 B：填充 (Fill) - 填满 Frame

图片会放大以填满整个 Frame。图片通常会超出 Frame 的边界（被裁剪）。

Image("avatar")
    .resizable()
    .scaledToFill() // 等同于 .aspectRatio(contentMode: .fill)
    .frame(width: 200, height: 200)
    .clipped() // 重要：裁剪掉超出 Frame 的部分

总结：修饰符的顺序很重要

请务必遵守以下顺序，否则代码可能不起作用：

1. Image(...)
2. .resizable() (必须是第一个)
3. .scaledToFit() 或 .scaledToFill() (可选，但推荐)
4. .frame(...)