web-dev-qa-db-ja.com

SwiftUI NavigationViewでデフォルトのナビゲーションバースペースを削除する方法

私は（ほとんどの人と同様に）SwiftUIを初めて使用し、NavigationViewに埋め込んだリストの上にある空白を削除する方法を理解しようとしています

この画像では、リストの上に空白があります。

Current Version

私が達成したいのはこれです

Ideal Version

私は使ってみました

.navigationBarHidden(true)

しかし、これにより目立った変更はありませんでした。

私は現在このように私のnavigiationViewを設定しています

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

fileBrowserViewは、リストとセルがこのように定義されたビューです。

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

ここでの最終的な目標は、これらのセルをクリックしてファイルツリーのさらに深いところに移動できるため、より深いナビゲーションではバーに[戻る]ボタンを表示することですが、私の最初のビューのようにトップ。

iosswiftswiftuiswiftui-listswiftui-bug
40
Vapidant

NavigationViewの目的は、ビューの上にナビゲーションバーを追加することです。 iOSでは、2種類のナビゲーションバーがあります：大きいと標準です。

enter image description here

ナビゲーションバーが不要な場合：

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

大きなナビゲーションバーが必要な場合（通常はトップレベルのビューに使用されます）：

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

標準（インライン）ナビゲーションバーが必要な場合（通常はサブレベルのビューに使用されます）：

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

この回答がお役に立てば幸いです。

詳細情報： Apple Documentation

8
TheFlow_

これはSwiftUIに存在するバグです（still 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())
    }
}
4
Vatsal Manot

View Modifiersで簡単になりました：

//ViewModifiers.Swift

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

extension View {
    func hiddenNavigationBarStyle() -> some View {
        ModifiedContent(content: self, modifier: HiddenNavigationBar())
    }
}

例： enter image description here

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()
        }
    }
}
3
Peter Kreinz

私にとっては、.navigationBarTitleをNavigationViewに、Listにではなく犯人とした。これは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)
        }
    }
}

Navigation bar and list with no gap at the top

2
Genki

次のように、ネイティブViewプロトコルを拡張できます。

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

次に、例：

ZStack {
    *YOUR CONTENT*
}
.hideNavigationBar()
2
Hopreeeenjust

私にとっては、既存のNavigationViewをプッシュしていたからです。事実、一方が他方の内部にある。 NavigationViewから来ている場合は、NavigatonViewの内部にいるので、次の内部に作成する必要はありません。

1
RyanTCB

@graycampbellの回答に似ていますが、少し単純です。

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

タイトルは、移動先のビューの戻るボタンの横に表示されるため、設定する必要があります。

1
Fabian Streitel

@ Vatsal Manotによって与えられたアイデアを本当に気に入りました。
モディファイア名自体がナビゲーションバーを非表示にすることを示唆しているため、有用ではないと思うので、彼の回答からisHiddenプロパティを削除します。

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