SwiftUI VStack 间距：无法正常工作

Posted 2023-02-24

【中文标题】SwiftUI VStack 间距：无法正常工作

【英文标题】：SwiftUI VStack spacing: not working properly

【发布时间】：2020-04-10 20:58:35

【问题描述】：

我有一个 SwiftUI VStack，它位于一个滚动视图、一个几何阅读器和一个导航视图内，代码如下：

struct RezeptList: View 

    @Environment(\.colorScheme) var colorScheme: ColorScheme
    @EnvironmentObject private var recipeStore: RecipeStore

    @State private var searching = false
    @State private var searchText = ""
    @State private var showingAddRecipeView = false

    var body: some View 
        NavigationView
            GeometryReader  geo in
                ScrollView 
                    SearchBar(searchText: self.$searchText, isSearching: self.$searching)
                    VStack(spacing: 30) 

                        ForEach(self.recipeStore.recipes.filter$0.name.hasPrefix(self.searchText) || self.searchText == "") recipe in
                            NavigationLink(destination:
                            RezeptDetail(recipe: recipe).environmentObject(self.recipeStore)) 
                                Card(rezept: recipe,width: geo.size.width - 20)
                            
                            .buttonStyle(PlainButtonStyle())
                        

                        .navigationBarItems(trailing: Button(action: 
                            self.showingAddRecipeView = true
                        )
                            Image(systemName: "square.and.pencil")
                                .foregroundColor(.primary)
                            
                        .padding()
                        )
                    
                    .padding(.bottom)
                    .navigationBarTitle("Rezepte")
                    .sheet(isPresented: self.$showingAddRecipeView) 
                        AddRecipeView(isPresented: self.$showingAddRecipeView)
                            .environmentObject(self.recipeStore)
                    
                
            
        
    

    init() 
        UINavigationBar.appearance().tintColor = UIColor.label
    

但无论间距多少，它看起来都是这样的： Image

但我注意到，当我移动 .navigationBarItems 修饰符时它可以工作，但是一旦你点击 navigationLink，应用就会崩溃。

【参考方案1】：

SwiftUI 有时在放置某些修饰符时会出现奇怪的行为问题。

在您的情况下，如果您将 .navigationBarItems 移动到 navigationBarTitle 之后，它应该可以解决此问题，并且您将恢复您的 VStack 间距。

.navigationBarTitle("Rezepte")
.navigationBarItems(trailing: Button(action: 
    self.showingAddRecipeView = true
, label: 
    Image(systemName: "square.and.pencil")
        .foregroundColor(.primary)
).padding())

此外，我发现这些与导航相关的修饰符最好靠近NavigationView，而不是在层次结构中的深处。

---

示例（基于您的视图层次结构）：

struct ContentView: View 
    @State var isShowing: Bool = false
    
    var body: some View 
        NavigationView 
            GeometryReader  (geo) in
                ScrollView 
                    VStack(spacing: 60) 
                        ForEach(0...10, id:\.self)  (index) in
                            NavigationLink(destination: Text(String(index))) 
                                Text("Button")
                            
                        
                    
                    .navigationBarTitle("Title")
                    .navigationBarItems(trailing: Button(action: 
                        self.isShowing = true
                    , label: 
                        Image(systemName: "square.and.pencil")
                    ))
                    .sheet(isPresented: self.$isShowing) 
                        Button(action: 
                            self.isShowing = false
                        ) 
                            Text("Dismiss")
                        
                    
                
            
        
    

【讨论】：

如果我将navigationBarItemsModifier 向下移动到navigationLink 的嵌套视图中，我将无法工作，它会立即自行关闭onAppear

@EichenherzMo 我在操场上测试了这个答案，它可以解决spacing 问题。但是，自动关闭的工作表似乎是另一个问题。也许AddRecipeView 将showingAddRecipeView 设置回false onAppear。

感谢我自己通过将 ForEach 修改为：``ForEach(0..