Cách xóa không gian Thanh điều hướng mặc định trong SwiftUI NavigiationView

Tôi chưa quen với SwiftUI (giống như hầu hết mọi người) và đang cố gắng tìm cách xóa một số khoảng trắng phía trên Danh sách mà tôi đã nhúng trong NavigationView

Trong hình ảnh này, bạn có thể thấy rằng có một số khoảng trắng phía trên Danh sách

Điều tôi muốn đạt được là

Tôi đã thử sử dụng

.navigationBarHidden(true)

nhưng điều này không tạo ra bất kỳ thay đổi đáng chú ý nào.

Tôi hiện đang thiết lập điều hướng của mìnhXem như thế này

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

trong đó FileBrowserView là dạng xem có Danh sách và Ô được định nghĩa như thế này

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: "")
}
}

Tôi muốn lưu ý rằng mục tiêu cuối cùng ở đây là bạn có thể nhấp vào các ô này để điều hướng sâu hơn vào cây tệp và do đó sẽ hiển thị nút Quay lại trên thanh khi điều hướng sâu hơn, nhưng tôi không muốn bất kỳ điều gì ở hàng đầu như vậy trong lần xem ban đầu của tôi.

Đối với một số lý do, SwiftUI đòi hỏi rằng bạn cũng thiết lập .navigationBarTitlecho .navigationBarHiddencông việc đúng cách.

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

Cập nhật

Như @Peacemoon đã chỉ ra trong các nhận xét, thanh điều hướng vẫn bị ẩn khi bạn điều hướng sâu hơn trong ngăn xếp điều hướng, bất kể bạn có đặt navigationBarHiddenthànhfalse hưởng quang cảnh tiếp theo. Như tôi đã nói trong phần bình luận, đây là kết quả của việc triển khai kém từ phía Apple hoặc chỉ là tài liệu tồi tệ (ai biết được, có thể có một cách "đúng" để thực hiện điều này).

Dù là gì đi nữa, tôi đã đưa ra một giải pháp có vẻ như tạo ra kết quả mong muốn của người đăng ban đầu. Tôi do dự khi đề xuất nó bởi vì nó có vẻ hacky không cần thiết, nhưng không có bất kỳ cách dễ dàng nào để ẩn và hiện thanh điều hướng, đây là cách tốt nhất tôi có thể làm.

Ví dụ này sử dụng ba dạng xem - View1có một thanh điều hướng ẩn View2và View3cả hai đều có các thanh điều hướng hiển thị với tiêu đề.

struct View1: View {
    @State var isNavigationBarHidden: Bool = true

    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                NavigationLink("View 2", destination: View2(isNavigationBarHidden: self.$isNavigationBarHidden))
            }
            .navigationBarTitle("Hidden Title")
            .navigationBarHidden(self.isNavigationBarHidden)
            .onAppear {
                self.isNavigationBarHidden = true
            }
        }
    }
}

struct View2: View {
    @Binding var isNavigationBarHidden: Bool

    var body: some View {
        ZStack {
            Color.green
            NavigationLink("View 3", destination: View3())
        }
        .navigationBarTitle("Visible Title 1")
        .onAppear {
            self.isNavigationBarHidden = false
        }
    }
}

struct View3: View {
    var body: some View {
        Color.blue
            .navigationBarTitle("Visible Title 2")
    }
}

Thiết navigationBarHiddenđể falsetrên quan điểm sâu sắc hơn trong việc điều khiển chồng dường như không ghi đè đúng sở thích của quan điểm cho rằng ban đầu thiết lập navigationBarHiddenđể true, do đó chỉ workaround tôi có thể đưa ra đã sử dụng một ràng buộc phải thay đổi sở thích của quan điểm ban đầu khi mới chế độ xem được đẩy lên ngăn xếp điều hướng.

Như tôi đã nói, đây là một giải pháp hacky, nhưng không có giải pháp chính thức từ Apple, đây là giải pháp tốt nhất mà tôi có thể nghĩ ra.

Mục đích của a NavigationViewlà thêm thanh điều hướng trên đầu chế độ xem của bạn. Trong iOS, có 2 loại thanh điều hướng: lớn và tiêu chuẩn.

Nếu bạn không muốn có thanh điều hướng:

FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))

Nếu bạn muốn một thanh điều hướng lớn (thường được sử dụng cho các chế độ xem cấp cao nhất của bạn):

NavigationView {
    FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
    .navigationBarTitle(Text("Title"))
}

Nếu bạn muốn có một thanh điều hướng tiêu chuẩn (nội tuyến) (thường được sử dụng cho các chế độ xem cấp phụ):

NavigationView {
    FileBrowserView(jsonFromCall: URLRetrieve(URLtoFetch: applicationDelegate.apiURL))
    .navigationBarTitle(Text("Title"), displayMode: .inline)
}

Hy vọng câu trả lời này sẽ giúp ích cho bạn.

Thông tin thêm: Tài liệu Apple

Xem Công cụ sửa đổi giúp dễ dàng:

//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() )
    }
}

Thí dụ:

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()
        }
    }
}

Tôi cũng đã thử tất cả các giải pháp được đề cập trên trang này và chỉ thấy giải pháp @graycampbell là giải pháp hoạt động tốt, với các hoạt ảnh hoạt động tốt. Vì vậy, tôi đã cố gắng tạo ra một giá trị mà tôi có thể sử dụng trên toàn ứng dụng mà tôi có thể truy cập ở mọi nơi bằng ví dụ về hackingwithswift.com

Tôi đã tạo ra một ObservableObject lớp học

class NavBarPreferences: ObservableObject {
    @Published var navBarIsHidden = true
}

Và chuyển nó sang chế độ xem ban đầu trong SceneDelegate tương tự

var navBarPreferences = NavBarPreferences()
window.rootViewController = UIHostingController(rootView: ContentView().environmentObject(navBarPreferences))

Sau đó, trong ContentView chúng ta có thể theo dõi đối tượng có thể quan sát này như vậy và tạo liên kết đến SomeView:

struct ContentView: View {
    //This variable listens to the ObservableObject class
    @EnvironmentObject var navBarPrefs: NavBarPreferences

    var body: some View {
        NavigationView {
                NavigationLink (
                destination: SomeView()) {
                    VStack{
                        Text("Hello first screen")
                            .multilineTextAlignment(.center)
                            .accentColor(.black)
                    }
                }
                .navigationBarTitle(Text(""),displayMode: .inline)
                .navigationBarHidden(navBarPrefs.navBarIsHidden)
                .onAppear{
                    self.navBarPrefs.navBarIsHidden = true
            }
        }
    }
}

Và sau đó khi truy cập chế độ xem thứ hai (SomeView), chúng tôi ẩn nó một lần nữa như thế này:

struct SomeView: View {
    @EnvironmentObject var navBarPrefs: NavBarPreferences

    var body: some View {
        Text("Hello second screen")
        .onAppear {
            self.navBarPrefs.navBarIsHidden = false
        }
    } 
}

Để giữ cho bản xem trước hoạt động, hãy thêm NavBarPreferences vào bản xem trước như sau:

struct SomeView_Previews: PreviewProvider {
    static var previews: some View {
        SomeView().environmentObject(NavBarPreferences())
    }
}

Đây là một lỗi có trong SwiftUI ( vẫn còn như Xcode 11.2.1). Tôi đã viết một ViewModifierđể sửa lỗi này, dựa trên mã từ các câu trả lời hiện có:

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())
    }
}

Bạn có thể mở rộng giao thức Chế độ xem gốc như thế này:

extension View {
    func hideNavigationBar() -> some View {
        self
            .navigationBarTitle("", displayMode: .inline)
            .navigationBarHidden(true)
    }
}

Sau đó, chỉ cần gọi ví dụ:

ZStack {
    *YOUR CONTENT*
}
.hideNavigationBar()

Nếu bạn đặt tiêu đề là nội tuyến cho Chế độ xem mà bạn muốn xóa không gian trên đó, thì việc này không cần phải được thực hiện trên chế độ xem có Chế độ xem điều hướng, nhưng chế độ này cũng được điều hướng.

.navigationBarTitle("", displayMode: .inline)

sau đó chỉ cần thay đổi giao diện của Thanh điều hướng

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

trên dạng xem chứa NavigationView ban đầu.

Nếu bạn muốn thay đổi Giao diện từ màn hình này sang màn hình khác, hãy thay đổi giao diện trong các dạng xem thích hợp

Đối với tôi, tôi đã áp dụng .navigationBarTitlecho NavigationViewvà không phải Listlà thủ phạm. Điều này phù hợp với tôi trên Xcode 11.2.1:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: DetailView()) {
                    Text("I'm a cell")
                }
            }.navigationBarTitle("Title", displayMode: .inline)
        }
    }
}

Tương tự như câu trả lời của @graycampbell nhưng đơn giản hơn một chút:

struct YourView: View {

    @State private var isNavigationBarHidden = true

    var body: some View {
        NavigationView {
            VStack {
                Text("This is the master view")
                NavigationLink("Details", destination: Text("These are the details"))
            }
                .navigationBarHidden(isNavigationBarHidden)
                .navigationBarTitle("Master")
                .onAppear {
                    self.isNavigationBarHidden = true
                }
                .onDisappear {
                    self.isNavigationBarHidden = false
                }
        }
    }
}

Đặt tiêu đề là cần thiết vì nó được hiển thị bên cạnh nút quay lại trong các dạng xem bạn điều hướng đến.

Đối với tôi, đó là bởi vì tôi đã đẩy NavigationView của mình từ một cái hiện có. Trên thực tế, có một cái bên trong cái kia. Nếu bạn đến từ NavigationView, bạn không cần phải tạo một cái bên trong cái tiếp theo vì bạn đã ở trong NavigatonView.

Thực sự yêu thích ý tưởng do @Vatsal Manot đưa ra Để tạo công cụ sửa đổi cho điều này.
Xóa thuộc isHiddentính khỏi câu trả lời của anh ấy, vì tôi không thấy nó hữu ích vì bản thân tên công cụ sửa đổi gợi ý rằng ẩn thanh điều hướng.

// Hide navigation bar.
public struct NavigationBarHider: ViewModifier {

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

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

Tôi đã gặp sự cố tương tự khi làm việc trên một ứng dụng mà TabView sẽ được hiển thị sau khi người dùng đăng nhập.

Như @graycampbell đã đề xuất trong nhận xét của anh ấy, TabView không nên được nhúng vào NavigationView, nếu không "khoảng trống" sẽ xuất hiện, ngay cả khi sử dụng .navigationBarHidden(true)

Tôi đã sử dụng một ZStackđể ẩn NavigationView. Lưu ý rằng đối với ví dụ đơn giản này, tôi sử dụng @Statevà @Bindingquản lý khả năng hiển thị giao diện người dùng, nhưng bạn có thể muốn sử dụng thứ gì đó phức tạp hơn, chẳng hạn như đối tượng môi trường.

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")
                }
            }
        }
    }
}

Khi chúng ta nhấn nút Đăng nhập, trang đầu tiên sẽ biến mất và Chế độ xem chi tiết được tải. Trang Đăng nhập xuất hiện lại khi chúng tôi bật nút Đăng xuất

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")
            }
        }
    }
}

Giải pháp của tôi cho vấn đề này giống với @Genki và @Frankenstein đề xuất.

Tôi đã áp dụng hai công cụ sửa đổi cho danh sách bên trong (KHÔNG phải là NavigationView) để loại bỏ khoảng cách:

.navigationBarTitle("", displayMode: .automatic)
.navigationBarHidden(true) 

Trên NavigationView bên ngoài, sau đó được áp dụng .navigationBarTitle("TITLE")để đặt tiêu đề.

SwiftUI 2

Có một công cụ sửa đổi chuyên dụng để làm cho thanh điều hướng chiếm ít không gian hơn:

.navigationBarTitleDisplayMode(.inline)

Không còn cần phải ẩn thanh điều hướng hoặc đặt tiêu đề của nó.

Thử đặt NavigationViewbên trong a GeometryReader.

GeometryReader {
    NavigationView {
        Text("Hello World!")
    }
}

Tôi đã trải qua hành vi kỳ lạ khi NavigationViewchế độ xem gốc.