图片样式#

这些修饰符专门用于控制图像视图的缩放、布局与渲染方式。

scaleToFit#

定义#

1scaleToFit?: boolean

描述#

将图像按比例缩放，使其完整地适配容器尺寸，保持原始宽高比例，不进行裁剪。

等效于 SwiftUI 的：

1.aspectRatio(contentMode: .fit)

行为说明#

• 保留图像的原始宽高比
• 图像完全显示在容器内
• 如果图像比例与容器不一致，可能会留白

示例#

1<Image
2  filePath="path/to/photo.jpg"
3  scaleToFit={true}
4/>

scaleToFill#

定义#

1scaleToFill?: boolean

描述#

将图像按比例缩放，使其填满整个容器，保持宽高比，但图像可能会被裁剪以适配。

等效于 SwiftUI 的：

1.aspectRatio(contentMode: .fill)

行为说明#

• 图像完全填充容器
• 保持原始宽高比
• 如果比例不同，图像边缘可能会被截断

示例#

1<Image
2  imageUrl="https://example.com/banner.jpg"
3  scaleToFill={true}
4/>

aspectRatio#

定义#

1aspectRatio?: {
2  value?: number | null
3  contentMode: "fit" | "fill"
4}

描述#

强制视图按照指定的宽高比例进行布局，可以选择使用 fit 或 fill 模式控制适配方式。

• value: 设置具体的宽高比，例如 16 / 9；设为 null 表示保持图像原始比例。
• contentMode："fit" 表示缩放适配容器但完整显示，"fill" 表示缩放填满容器可能被裁剪。

示例：设置 3:2 比例并适配显示#

1<Image
2  filePath="path/to/photo.jpg"
3  aspectRatio={{
4    value: 3 / 2,
5    contentMode: "fit"
6  }}
7/>

示例：保持原始比例并填满容器#

1<Image
2  systemName="photo"
3  aspectRatio={{
4    value: null,
5    contentMode: "fill"
6  }}
7/>

imageScale#

定义#

1imageScale?: "small" | "medium" | "large"

描述#

设置 SF Symbols 图像的渲染缩放级别，不会影响视图的实际布局大小，仅影响图像本身的显示尺寸。

• "small"：较小尺寸
• "medium"：默认尺寸
• "large"：较大尺寸

仅适用于通过 systemName 创建的系统图标图像。

示例#

1<Image
2  systemName="bolt.fill"
3  imageScale="large"
4/>

总结对比#