从 SwiftUI 中的表单中删除分隔线

Posted 2023-02-23

【中文标题】从 SwiftUI 中的表单中删除分隔线

【英文标题】：Remove Separator Line from Form in SwiftUI

【发布时间】：2021-02-01 00:18:44

【问题描述】：

我有一个在 SwiftUI 中创建的静态表（或 SwiftUI 中的表单），除了分隔两个静态单元格的线之外，我对每个表的工作方式都很满意。见下图。

我尝试了一些方法，但似乎没有任何效果。您可以在其中看到它们被注释掉。

struct Settings_CheckedView: View 
    
    @Environment(\.managedObjectContext) private var viewContext
    @Environment(\.settings) private var settings
    
    @State private var picker1 = 2
    @State private var picker2 = 2
    
    //Tried this first, doesn't seem to affect it.
    /*init() 
        UITableView.appearance().separatorStyle = .none
    */
    
    var body: some View 
        Form 
            Section(header: Text("COMPLETED ITEM BEHAVIOR")) 
                VStack 
                    HStack 
                        Text("Auto-Delete Completed Items")
                        Spacer()
                    
                    Picker("", selection: $picker1) 
                        Text("Off").tag(0)
                        Text("Immediately").tag(1)
                        Text("Delay").tag(2)
                    
                    .pickerStyle(SegmentedPickerStyle())
                    .onChange(of: picker1, perform:  value in
                        settings.autoDeleteSegment = Int16(value)
                        viewContext.trySave("Updating auto-delete segment value in Settings", loc: "Settings_CheckedView")
                    )
                
                VStack 
                    HStack 
                        Text("Delay Time Interval")
                        Spacer()
                    
                    Picker("", selection: $picker2) 
                        Text("5 mins").tag(0)
                        Text("15 mins").tag(1)
                        Text("1 Hr").tag(2)
                        Text("24 Hrs").tag(3)
                    
                    .pickerStyle(SegmentedPickerStyle())
                    .onChange(of: picker2, perform:  value in
                        settings.deleteDelaySegment = Int16(value)
                        self.viewContext.trySave("Updating delay time interval segment value in Settings", loc: "Settings_CheckedView")
                    )
                
                .isHidden(picker1 == 2 ? false: true)
            
        
        .navigationBarTitle(Text("Completed Items"))
        .navigationBarColor(UIColor.ezDarkAquaSet)
        .onAppear(perform: 
            self.picker1 = Int(settings.autoDeleteSegment)
            self.picker2 = Int(settings.deleteDelaySegment)
            
            //Tried this second, also no affect
            //UITableView.appearance().separatorStyle = .none
        )
        .listSeparatorStyle(style: .none) //Last try, also no affect, see code for this below.
    


extension View 
    func listSeparatorStyle(style: UITableViewCell.SeparatorStyle) -> some View 
        ModifiedContent(content: self, modifier: ListSeparatorStyle(style: style))
    


struct ListSeparatorStyle: ViewModifier 
    let style: UITableViewCell.SeparatorStyle
    
    func body(content: Content) -> some View 
        content
            .onAppear() 
                UITableView.appearance().separatorStyle = self.style
            
    

因此，您基本上可以从上到下看到我尝试过的内容，但没有任何效果。它们基本上都是实现.separatorStyle 的不同方式。当我尝试在 UIKit 中做这样的事情并且这被称为静态 UITableView 时，这正是我要删除它的方法。但我不确定我在这里做错了什么。我在网上找到的所有示例都是引用列表而不是表单，所以也许这就是它不起作用的原因。有什么建议吗？

【参考方案1】：

只需用另一个 VStack 将 Section 内的 2 个 VStack 包裹起来，该行就会消失

    ...
    Section(header: Text("COMPLETED ITEM BEHAVIOR")) 
        VStack 
            VStack 
                HStack 
                    Text("Auto-Delete Completed Items")
                    Spacer()
                
                ...
            
            VStack 
                HStack 
                    Text("Delay Time Interval")
                    Spacer()
                
                ...
            
        
    
    ...

【讨论】：

Lmao 这个黑客！

【参考方案2】：

为每个组件添加.listRowSeparator(.hidden)

 TextField("Enter first name", text: $firstName)
     .textFieldStyle(.roundedBorder)
     .listRowSeparator(.hidden)
 TextField("Enter last name", text: $lastName)
     .textFieldStyle(.roundedBorder)
     .listRowSeparator(.hidden)