如何删除SwiftUI中`Form`的顶部空间? [英] How to remove top space of `Form` in SwiftUI?

问题描述

如何在 NavigationView 中顶部对齐 Form.我有以下内容，当我从正文中删除 NaviagationView 时，Form 顶部对齐.使用 NavigationView 后，我得到了中间的间距(添加了红色框以显示空间).我可以在 Form 上使用 .padding(.top, -20) ，但是虽然它可以工作，但它会稍微扭曲.

How do I top align a Form within a NavigationView. I have the below, when I remove NaviagationView from the body, the Form is top aligned. With NavigationView in place, I get spacing in between(red box added to show space). I can use .padding(.top, -20) on the Form but while this works it skews things slightly.

NavigationView {
    Form {
        VStack {
            HStack {
                Text("Name:").underline().font(.headline)
                TextField("Name", text: $routine.name)
                
            }
            roundPicker()
            TimeSelectionView(stateName: "A", stateDuration: "0:30", stateBackground: "#df405a")
            TimeSelectionView(stateName: "B", stateDuration: "1:30", stateBackground: "#4ea1d3")
            TimeSelectionView(stateName: "C", stateDuration: "3:00", stateBackground: "#4f953b")
        }
    }
    .navigationBarTitle("Create", displayMode: .inline)
    .navigationBarItems(trailing:
        Button(action: {
            //Save Routine
            self.routine.rounds = self.roundsArray[self.rounds]
            
            print("Workout Name: \(self.routine.name)")
            print("Workout Rounds: \(self.routine.rounds)")
            }, label: {
                Text("Save")
            }
        )
    )
} 

推荐答案

SwiftUI Form 实际上是底层的分组样式 UITableView 并且是默认的 tableHeaderView.所以你可以像这样删除它:

SwiftUI Form is actually a grouped style UITableView under the hood and that is default tableHeaderView. So you can remove it like this:

struct ContentView: View {
    
    init() { // this can be done in `onAppear` modifier if you need to restore the appereance later on `onDisappear`
        UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: Double.leastNonzeroMagnitude))
    }
    
    var body: some View {
        ,,,
    }
}

iOS 14

Apple 正在限制 appearance hack 并且设置 tableHeaderView 的框架就是其中之一，因此我们需要通过添加以下步骤来深入挖掘:

iOS 14

Apple is limiting the appearance hack and setting the tableHeaderView's frame is one of them so we need to dig more around by adding these steps:

init() {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.heightAnchor.constraint(equalToConstant: 0).isActive = true
    UITableView.appearance().tableHeaderView = view
}

2.强制重新加载表:

约束已添加，但需要重新加载.SwiftUI 不允许您手动重新加载列表.所以我们需要添加一个虚拟视图和一个虚拟的 state 来欺骗它:

@State var loaded = false // need for stay update
,,,

    List {

        if loaded {
            Text("Actual content of the list")

        } else {
            Text("Dummy content. Not important")
                .onAppear {
                    loaded = true // need for instatnt force update 
                }
        }

    }

---

注 1:

永远不要对任何数字进行硬编码(例如 -35 表示插入！).数字因设备、平台和状态等而异.

---

Note1:

Try never hard-code any numbers (like -35 for inset!). Numbers vary on different devices and platforms and states and etc.

.zero 框架不起作用.如果你使用 frame for iOS 13 或 UIKit，你应该至少传递一个最小高度.

.zero frame is not working. You should pass at least a minimum height if you use frame for iOS 13 or UIKit.

所有方法都是hacks，Apple 正试图限制对UITableView 等底层类型的访问.因此，请及时了解最新信息并努力为社区提供帮助.

All methods are hacks and Apple is trying to restrict access to underlying types like UITableView. So stay up to date and try to help the community.

通过投票和评论为社区做出贡献.所以人们会更有动力去未知的地方挖掘，给我们带来很酷的东西.

Contribute to the community by upvoting and commenting. So people will be more motivated to dig in unknown places and bring us cool stuff.

由于我们使用 Appearance 代理，因此任何更改都将应用于应用程序中的所有 TableView.可以存储原始Appearance的状态->应用新样式 onAppear 并根据需要恢复原始 onDisaper.

Since we are using the Appearance proxy, any change will be applied to all TableViews in the app. You can store the state of the original Appearance -> apply the new style onAppear and restore the original onDisaper if needed.

这篇关于如何删除SwiftUI中`Form`的顶部空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！