SwiftUI中如何调整ellipsis系统图标大小且不拉伸变形？

我编写了如下View代码：

struct ContentView: View {
    
    var body: some View {
        
        Image(systemName: "ellipsis")
            .resizable()
            .aspectRatio(1, contentMode: .fit)
            .foregroundColor(.yellow)        
        
    }
}

生成的图标存在变形问题（如图所示：）。请问如何让该图标填充可用空间的同时不发生变形？

问题根源是你强制给图标设置了1:1的宽高比，而系统图标"ellipsis"本身是横向的非正方形比例，强制等比会导致拉伸变形。以下两种方法可以解决这个问题：

方法1：保持图标原始比例适配空间 #

移除手动指定的aspectRatio(1, contentMode: .fit)，改用scaledToFit()（或等价的aspectRatio(contentMode: .fit)），让图标自动按原始比例适配可用空间：

struct ContentView: View {
    
    var body: some View {
        
        Image(systemName: "ellipsis")
            .resizable()
            .scaledToFit()
            .foregroundColor(.yellow)        
        
    }
}

scaledToFit()会让图标在不超出可用空间的前提下尽可能放大，同时严格保持原始宽高比，完全避免变形。

方法2：填充指定方向空间并保持比例 #

如果需要图标填满某一方向（比如横向）的可用空间，同时保持比例，可以结合scaledToFill()、frame和clipped()：

struct ContentView: View {
    
    var body: some View {
        
        Image(systemName: "ellipsis")
            .resizable()
            .scaledToFill()
            .frame(maxWidth: .infinity) // 横向填满可用空间
            .clipped() // 裁剪超出纵向边界的部分
            .foregroundColor(.yellow)        
        
    }
}

这种方式下图标会横向铺满空间，纵向按原比例缩放，超出部分会被裁剪，图标本身不会变形。

内容的提问来源于stack exchange，提问作者zumzum