SwiftUI视图中的间距不正确

Question

Xcode 11.2.1，Swift 5

我在SwiftUI中有一个自定义视图，我一直在摆弄一段时间，以尝试摆脱添加的额外空间。我无法确定这是SwiftUI本身的错误还是我做错了。

查看：

struct Field: View {
    @Binding var text: String
    var title: String
    var placeholderText: String
    var leftIcon: Image?
    var rightIcon: Image?
    var onEditingChanged: (Bool) -> Void = { _ in }
    var onCommit: () -> Void = { }

    private let height: CGFloat = 47
    private let iconWidth: CGFloat = 16
    private let iconHeight: CGFloat = 16


    init(text: Binding<String>, title: String, placeholder: String, leftIcon: Image? = nil, rightIcon: Image? = nil, onEditingChanged: @escaping (Bool) -> Void = { _ in }, onCommit: @escaping () -> Void = { }) {
        self._text = text
        self.title = title
        self.placeholderText = placeholder
        self.leftIcon = leftIcon
        self.rightIcon = rightIcon
        self.onEditingChanged = onEditingChanged
        self.onCommit = onCommit
    }

    var body: some View {

        VStack(alignment: .leading, spacing: 3) {
            Text(title.uppercased())
                .font(.caption)
                .fontWeight(.medium)
                .foregroundColor(.primary)
                .blendMode(.overlay)

            Rectangle()
                .fill(Color(red: 0.173, green: 0.173, blue: 0.180))
                .blendMode(.overlay)
                .cornerRadius(9)
                .frame(height: height)
                .overlay(
                    HStack(spacing: 16) {
                        if leftIcon != nil {
                            leftIcon!
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: iconWidth, height: iconHeight)
                                .foregroundColor(.secondary)
                        }
                        ZStack(alignment: .leading) {
                            if text.isEmpty {
                                Text(placeholderText)
                                    .foregroundColor(.secondary)
                                    .lineLimit(1)
                                    .truncationMode(.tail)
                            }
                            TextField("", text: $text, onEditingChanged: onEditingChanged, onCommit: onCommit)
                                .foregroundColor(.white)
                                .lineLimit(1)
                                .truncationMode(.tail)
                        }

                        Spacer()

                        if rightIcon != nil {
                            rightIcon!
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: iconWidth, height: iconHeight)
                                .foregroundColor(.secondary)
                        }


                    }
                    .padding(.horizontal, 16)
            )
        }
    }
}

当我像这样创建它的实例时：

struct ContentView: View {
    @State var text = ""

    let backgroundGradient = Gradient(colors: [
        Color(red: 0.082, green: 0.133, blue: 0.255),
        Color(red: 0.227, green: 0.110, blue: 0.357)
    ])

    var body: some View {
        ZStack {
            LinearGradient(gradient: backgroundGradient, startPoint: .top, endPoint: .bottom)
                .edgesIgnoringSafeArea(.all)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

            Field(text: $text, title: "field", placeholder: "Required", leftIcon: Image(systemName: "square.and.pencil"), rightIcon: Image(systemName: "info.circle"))
                .padding(.horizontal, 30)

        }
        .onAppear {
            UIApplication.shared.windows.forEach { window in
                window.overrideUserInterfaceStyle = .dark
            }
        }
    }
}

乍看之下，它的行为似乎与预期的一样：

在用户尝试在该字段中键入后出现问题。右侧图标和文本之间的间距太大，导致其在必要时被截断得更早。

您可以看到，文本字段和右图标之间的间距（多余的间距）比文本字段和左图标之间的间距（正确的间距）大得多。

Field的所有元素在所有边上的间距应为16。由于某些原因，TextField没有占据足够的空间，因此它与右图标的间距小于所需的16。

如何确定此间距？​​

Xcode 11.2.1，Swift 5我在SwiftUI中有一个自定义视图，并且我一直在摆弄一段时间，以尝试摆脱添加的额外空间。我无法判断这是否是SwiftUI中的错误...

Answer 1

您具有以下内容：