SwiftUI中使用Image和SFSymbols时如何实现视图尺寸统一？

问题当前效果 #

解决方法 #

你可以通过fixedSize配合最大宽高约束实现无硬编码的尺寸统一，核心逻辑是让外层容器自动适配所有子元素的最大固有尺寸，再让所有子元素撑满父容器分配的空间。

修改后的完整代码如下：

struct InconsistentSymbolSizes: View {
    let symbols = [ "camera", "comb", "diamond", "checkmark.square"]
    var body: some View {
        HStack(spacing: 0) {
            ForEach(Array(symbols), id: \.self) { item in
                VStack {
                    Image(systemName: item)
                        .font(.largeTitle)
                        .scaledToFit()
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .padding()
                .background(.white)
                .border(.red)
            }
        }
        .fixedSize()
        .border(Color.black)
    }
}

原理解释 #

• 给每个红色边框容器添加maxWidth: .infinity、maxHeight: .infinity，允许子元素撑满父容器分配的所有可用空间
• 给外层HStack添加fixedSize()修饰符，让HStack不会拉伸到填满父视图，而是根据所有子元素的最大固有宽高计算自身尺寸，刚好适配内容
• 这种实现完全不需要写死任何宽高数值，所有尺寸都会自动适配符号的最大固有尺寸，修改符号大小（比如把font改成.title）时也不需要额外调整布局代码

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