如何删除默认的导航栏空间在SwiftUI导航视图

我是SwiftUI的新手(像大多数人一样)，试图弄清楚如何删除我嵌入在NavigationView中的List上面的一些空白。

在此图像中，您可以看到列表上方有一些空白。

我想要完成的是:

我试过用:

.navigationBarHidden(true)

但这并没有带来任何明显的变化。

我现在像这样设置我的navigationview:

NavigationView {
    FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
        .navigationBarHidden(true)
}

其中FileBrowserView是一个带有List和FileCells的视图，定义如下:

List {
   Section(header: Text("Root")) {
       FileCell(name: "Test", fileType: "JPG",fileDesc: "Test number 1")
       FileCell(name: "Test 2", fileType: "txt",fileDesc: "Test number 2")
       FileCell(name: "test3", fileType: "fasta", fileDesc: "")
    }
}

我想指出的是，这里的最终目标是，您将能够单击这些单元格来更深入地导航到文件树中，因此在更深入的导航中应该在栏上显示一个后退按钮，但在我的初始视图中，我不希望顶部出现这样的任何东西。

当前回答

视图修改器使它变得简单:

//ViewModifiers.swift

struct HiddenNavigationBar: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}

extension View {
    func hiddenNavigationBarStyle() -> some View {
        modifier( HiddenNavigationBar() )
    }
}

例子:

import SwiftUI

struct MyView: View {
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                HStack {  
                    Spacer()
                    Text("Hello World!")
                    Spacer()
                }
                Spacer()
            }
            .padding()
            .background(Color.green)
            //remove the default Navigation Bar space:
            .hiddenNavigationBarStyle()
        }
    }
}

2020-03-02 15:37:25

其他回答

这是一个存在于SwiftUI中的错误(在Xcode 11.2.1中仍然存在)。我写了一个ViewModifier来修复这个问题，基于现有答案的代码:

public struct NavigationBarHider: ViewModifier {
    @State var isHidden: Bool = false

    public func body(content: Content) -> some View {
        content
            .navigationBarTitle("")
            .navigationBarHidden(isHidden)
            .onAppear { self.isHidden = true }
    }
}

extension View {
    public func hideNavigationBar() -> some View {
        modifier(NavigationBarHider())
    }
}

2019-11-24 15:50:05

视图修改器使它变得简单:

//ViewModifiers.swift

struct HiddenNavigationBar: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}

extension View {
    func hiddenNavigationBarStyle() -> some View {
        modifier( HiddenNavigationBar() )
    }
}

例子:

import SwiftUI

struct MyView: View {
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                HStack {  
                    Spacer()
                    Text("Hello World!")
                    Spacer()
                }
                Spacer()
            }
            .padding()
            .background(Color.green)
            //remove the default Navigation Bar space:
            .hiddenNavigationBarStyle()
        }
    }
}

2020-03-02 15:37:25

我有一个类似的问题，当工作在一个应用程序，TabView应该显示一旦用户登录。

正如@graycampbell在他的评论中建议的那样，TabView不应该嵌入到NavigationView中，否则“空白”将会出现，即使使用.navigationBarHidden(true)

我使用ZStack来隐藏NavigationView。注意，对于这个简单的示例，我使用@State和@Binding来管理UI可见性，但是您可能希望使用更复杂的东西，例如环境对象。

struct ContentView: View {

    @State var isHidden = false

    var body: some View {
        
        ZStack {
            if isHidden {
                DetailView(isHidden: self.$isHidden)
            } else {
                NavigationView {
                    Button("Log in"){
                        self.isHidden.toggle()
                    }
                    .navigationBarTitle("Login Page")
                }
            }
        }
    }
}

当我们按下Log In按钮时，初始页面消失，DetailView被加载。当我们切换注销按钮时，登录页面重新出现

struct DetailView: View {
    
    @Binding var isHidden: Bool
    
    var body: some View {
        TabView{
            NavigationView {
                Button("Log out"){
                    self.isHidden.toggle()
                }
                .navigationBarTitle("Home")
            }
            .tabItem {
                Image(systemName: "star")
                Text("One")
            }
        }
    }
}

2020-07-24 04:18:18

如果你将视图的标题设置为内联的，你想要删除空间，这并不需要在带有NavigationView的视图上完成，但也需要在导航的视图上完成。

.navigationBarTitle("", displayMode: .inline)

然后简单地改变导航栏的外观

init() {
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    UINavigationBar.appearance().shadowImage = UIImage()
}

在持有初始NavigationView的视图上。

如果您想在屏幕之间更改外观，请在适当的视图中更改外观

2020-08-14 12:29:03

iOS 14 +

有一个专用的修改器，使导航栏占用更少的空间:

.navigationBarTitleDisplayMode(.inline)

EDIT

在某些情况下，仍然需要添加.navigationBarHidden(true)

2020-11-02 20:38:47

如何删除默认的导航栏空间在SwiftUI导航视图

推荐文章

最新文章

标签