swift - 在 SwiftUI 中使用 Image 和 SFSymbols 时如何获得统一的视图大小？

Question

这是我的观点：

我希望所有框（红色矩形）的大小相同（高度彼此相等，宽度彼此相等）。它们不需要是方形的。

当我使用 Image(systemname:) 创建视图时，它们具有不同的内在大小。如何在不硬编码大小的情况下使它们具有相同的大小。

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)
                    }
                    .padding()
                    .background(.white)
                    .border(.red)
                }
            }
            .border(Color.black)
        }
}

Answer 1

如果您想标准化尺寸，您可以使用 aPreferenceKey来测量最大尺寸并确保所有其他尺寸都扩展到该尺寸：

struct ContentView: View {
    let symbols = [ "camera", "comb", "diamond", "checkmark.square"]
    @State private var itemSize = CGSize.zero
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(Array(symbols), id: \.self) { item in
                VStack {
                    Image(systemName: item).font(.largeTitle)
                }
                .padding()
                .background(GeometryReader {
                    Color.clear.preference(key: ItemSize.self,
                                           value: $0.frame(in: .local).size)
                })
                .frame(width: itemSize.width, height: itemSize.height)
                .border(.red)
            }.onPreferenceChange(ItemSize.self) {
                itemSize = $0
            }
        }
        .border(Color.black)
    }
}

struct ItemSize: PreferenceKey {
    static var defaultValue: CGSize { .zero }
    static func reduce(value: inout Value, nextValue: () -> Value) {
        let next = nextValue()
        value = CGSize(width: max(value.width,next.width),
                       height: max(value.height,next.height))
    }
}