SwiftUI：表单周围的行

我简化了我的代码，删除了几个部分，使它对您来说更短。但是，您可以想象，表单中有更多的部分和我想要的一些行为，因此帧大小比代码所需的长

好吧，问题是：虽然我尝试了很多方法，但我不明白为什么在右边有一条线，而在左边没有。另外，在我的原始代码中有更多的节，在表单结束后继续的行看起来也很奇怪

由于我没有使用边框或覆盖，默认行为是什么？是否有任何方法可以在不使用它们的情况下修复此问题？如果没有，将导航和滚动视图置于此边框内并使其看起来对称的最佳方式是什么：

以下是屏幕截图和代码：

导入快捷界面
@可用（iOS 13.0，*）
公共结构ContentView:视图{
@国家私营部门变量性别=0
@国家私有var title=“”
@国家私有var firstName=“”
@国家私有变量lastName=“”
@国营私营var街=“”
@国家私有变量zip=“”
@国营私营var city=“”
@国家专用var电话=“”
@国家私人var电子邮件=“”
init（）{
UITableView.appearance（）.backgroundColor=.clear
UINavigationBar.appearance（）.setBackgroundImage（UIImage（），用于：。默认值）
}
公共结构ClearButton:ViewModifier{
@绑定变量文本：字符串
公共初始化（文本：绑定）{
self.\u text=文本
}
公共函数体（内容：content）->一些视图{
HStack{
内容
垫片（）
图像（系统名称：“乘法。圆。填充”）
.foregroundColor（.secondary）
.不透明度（文本=“”？0:1）
.ONTAPPORATE{self.text=”“}
}
}
}
公共机构：一些看法{
滚动视图{
//在代码的后续步骤中：
//如果我想添加更多的部分，我想要向下滚动功能，即使导航视图保持在
//屏幕中间的弹出框作为背景保持半瞬态
导航视图{
形式{
部分（标题：文本（“个人数据”）。位置（x:45，y:17））{
TextField（“名字”，text:$firstName）.修饰符（ClearButton（text:$firstName））
TextField（“姓氏”，text:$lastName）.修饰符（ClearButton（text:$lastName））
}
章节（标题：文本（“性别”）。位置（x:20，y:1））{
选择器（选择：$性别，标签：文本（“”），内容：{
文本（“男性”）。标记（0）
文本（“女性”）。标签（1）
}).pickerStyle（SegmentedPickerStyle（））
}
节（标题：文本（“地址”）。位置（x:12，y:17））{
TextField（“Street”，text:$Street）.修饰符（ClearButton（text:$Street））
HStack{
TextField（“ZIP”，text:$ZIP）
.键盘类型（.decimalPad）
.框架（宽度：90）
.modifier（ClearButton（文本：$zip））
TextField（“城市”，文本：$City）
.框架（宽度：225.0）
.modifier（ClearButton（文本：$city））
}
}
节（标题：文本（“Kontakt”）。位置（x:12，y:17））{
TextField（“电话号码”，text:$Phone）。键盘类型（.decimalPad）。修饰符（ClearButton（text:$Phone））
TextField（“电子邮件地址”，text:$email）。修饰符（ClearButton（text:$email））
}
}
.frame（maxWidth:无穷大，maxHeight:无穷大）
.navigationBarTitle（“表单”，显示模式：。内联）
}
.padding（[.前导，.尾随]，30）
.框架（宽：394，高：861）
}
}
}

import SwiftUI

@available(iOS 13.0, *)
public struct ContentView: View {
    
    @State private var gender = 0
    @State private var title = ""
    @State private var firstName = ""
    @State private var lastName = ""
    @State private var street = ""
    @State private var zip = ""
    @State private var city = ""
    @State private var phone = ""
    @State private var email = ""
    
    init(){
        UITableView.appearance().backgroundColor = .clear
        UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    }
    
    public struct ClearButton: ViewModifier {
        @Binding var text: String
        
        public init(text: Binding<String>) {
            self._text = text
        }
        
        public func body(content: Content) -> some View {
            HStack {
                content
                Spacer()
                Image(systemName: "multiply.circle.fill")
                    .foregroundColor(.secondary)
                    .opacity(text == "" ? 0 : 1)
                    .onTapGesture { self.text = "" }
            }
        }
    }
    
    public var body: some View {
        ScrollView {
        // In the next steps of the code:
        // if I want to add more sections, I want the scroll down feature even though the navigation view stays in the
        // middle of the screen as a popover as the background stays semi-transient
            NavigationView {
                Form {
                    Section(header: Text("Personal Data").position(x:45, y: 17)) {
                        TextField("First Name", text: $firstName).modifier(ClearButton(text: $firstName))
                        TextField("Last Name", text: $lastName).modifier(ClearButton(text: $lastName))
                    }
                    Section(header: Text("Gender").position(x:20, y: 1)) {
                        Picker(selection: $gender, label: Text(""), content: {
                            Text("Male").tag(0)
                            Text("Female").tag(1)
                        }) .pickerStyle(SegmentedPickerStyle())
                    }
                    Section(header: Text("Address").position(x:12, y: 17)) {
                        TextField("Street", text: $street).modifier(ClearButton(text: $street))
                        HStack {
                            TextField("ZIP", text: $zip)
                                .keyboardType(.decimalPad)
                                .frame(width: 90)
                                .modifier(ClearButton(text: $zip))
                            TextField("City", text: $city)
                                .frame(width: 225.0)
                                .modifier(ClearButton(text: $city))
                        }
                    }
                    Section(header: Text("Kontakt").position(x:12, y:17)) {
                        TextField("Phone number", text: $phone).keyboardType(.decimalPad).modifier(ClearButton(text: $phone))
                        TextField("E-Mail Address", text: $email).modifier(ClearButton(text: $email))
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .navigationBarTitle("Form", displayMode: .inline)
            }
            .padding([.leading, .trailing], 30)
            .frame(width: 394, height: 861)
        }
    }
}