NavigationView 顶部的边界答案

【问题标题】：Boundary on top of NavigationViewNavigationView 顶部的边界
【发布时间】：2021-05-27 06:19:39
【问题描述】：

当我尝试更改导航视图页面的颜色时，我意识到顶部有一个奇怪的边界。我不知道它是什么或如何摆脱它。会有人碰巧知道吗？

父视图代码是显示我遇到问题的页面的视图。

父视图：

代码：

import Foundation
import SwiftUI
import UIKit


struct ContentView: View {

    
    
    // variable for view model
@ObservedObject var viewModel = VariableViewModel()
    

// SWIFT UI START
    var body: some View {
           
        // Main page
        NavigationView {
            ZStack {
                Color(.orange).edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
        VStack {
            
            HStack {
                Spacer()
            NavigationLink(destination:
                SettingsView()
            ){
                Image(systemName: "gearshape.fill").font(.system(size: 25))
            }
                
                Spacer()
                Spacer()
                Spacer()
                Spacer()
                Spacer()
                Spacer()
                
            NavigationLink(destination:
                Text("You")
            ){
            Image(systemName: "chart.bar.xaxis").font(.system(size: 25))
            }
                Spacer()
            }
            
            Text("Pick a mode!").font(.largeTitle).bold().offset(x: 0, y: 30)
            ZStack {
            VStack {
                
                Spacer()
                
                // ADDITION SECTION
                
                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Addition")
                                }
                ){
                    HStack {
                    Text("Addition")
                    Image(systemName: "plus.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }
                
                Spacer()
                
                // SUBTRACTION SECTION
                
                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Subtraction")
                                }
                ){
                    HStack {
                    Text("Subtraction")
                    Image(systemName: "minus.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }
                
                
                Spacer()
                
                // MULTIPLICATION SECTION

                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Multiplication")
                                            }
                ){
                    HStack {
                    Text("Multiplication")
                    Image(systemName: "multiply.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }

                
                Spacer()
                
                // DIVISION SECTION
                
                NavigationLink(destination:
                                VStack {
                                    Spacer()
                                    MathView(operatorName: "Division")
                                }
                ){
                    HStack {
                    Text("Division")
                    Image(systemName: "divide.square")
                    }.font(.largeTitle)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
                }
            }
            }.navigationBarHidden(true)
            
        }
        }
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

代码：

import SwiftUI

struct MathView: View {
    
    @ObservedObject var viewModel = VariableViewModel()
    
    let operatorName: String
    
    var body: some View {
        ZStack {
            Color.orange.edgesIgnoringSafeArea(.all)
            
            VStack {
                Spacer()
                
                NavigationLink(destination:
                MathContentView(operatorName: "Addition", operatorSymbol: "plus", difficultyNumber1: 5, difficultyNumber2: 5)
                ) {
                    Text("Easy")
                    .font(.title2)
                    .padding(35)
                    .foregroundColor(.white)
                    .background(Color(.systemGreen))
                    .cornerRadius(40)
                    .onAppear(perform: {
                        if operatorName == "Addition" {
                            self.viewModel.result = self.viewModel.num1 + self.viewModel.num2
                        } else if operatorName == "Subtraction" {
                            self.viewModel.result = self.viewModel.num1 - self.viewModel.num2
                        } else if operatorName == "Multiplication" {
                            self.viewModel.result = self.viewModel.num1 * self.viewModel.num2
                        };
                        withAnimation {
                            viewModel.resetVariables()
                            // numbers generator
                        }
                    })
                }
                
                Spacer()
            }
        }
    }
}

【问题讨论】：

请复制并粘贴您的代码，而不是包含它的图像
我道歉，我只是不知道该怎么做
@ZacharyF 把它粘贴进去。我们可以稍后编辑它。
很难在没有看到父视图的情况下准确地说出问题所在。这回答了你的问题了吗？ How to remove the default Navigation Bar space in SwiftUI NavigiationView
尝试将.navigationBarTitleDisplayMode(.inline)添加到顶视图，这里是ZStack。

标签： swift swiftui

【解决方案1】：

要删除NavigationView 下方的空白区域，请将.navigationBarTitleDisplayMode(.inline) 添加到顶视图：

ZStack {
    // ...
}
.navigationBarTitleDisplayMode(.inline)

然后，navigationViewTitle 和下面的内容之间的细线来自NavigationLink 中VStack 顶部的Spacer，它推动了MathView。

NavigationLink(destination:
    VStack {
        Spacer() // this causes the *slim line*
        MathView(operatorName: "Addition")
    }
)

您需要删除Spacer（以及VStack）：

NavigationLink(destination:
    MathView(operatorName: "Addition")
)

【讨论】：