SF Symbol 图片不同大小

Question

我在应用程序中使用 SF 符号，发现它们都以不同的大小呈现，这使得元素列表难以对齐。确保 SF 符号以相同大小显示的最佳方法是什么，所以它们都排成一列，其他元素也排成一排。我确信我可以硬编码帧的宽度和高度，但这会破坏动态类型，我想保留它。

这是我编写的一些示例代码来演示这一点：

struct LayoutTest: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack(alignment: .top) {
                Image(systemName: "figure.walk").background(Color.red)
                Text("Value 1").background(Color.red)
            }
            HStack(alignment: .top) {
                Image(systemName: "phone").background(Color.red)
                Text("Value 2").background(Color.red)
            }
            HStack(alignment: .top) {
                Image(systemName: "figure.step.training").background(Color.red)
                Text("Value 3").background(Color.red)
            }
        }.font(.title)
    }
}

Answer 1

您使用frame 为您的图像提供固定高度和宽度，并使其成为scaledToFit 例如-

Image(systemName: "figure.walk")
    .resizable()
    .scaledToFit()
    .frame(width: 20, height: 20)