TabView中的NavigationViews顯示不正確

我正在使用 SwiftUI 并希望構建一個分頁的 TabView，其中包含兩個可以水平切換的 NavigationView 頁面。下面的圖片顯示了它應該如何作業：

這是我上面示例的代碼：

struct ContentView: View {
var body: some View {
    
    TabView {
        Page1()
        
        Page2()
        
    }
    .tabViewStyle(.page)
    
}}

struct Page1: View {
var body: some View {
    NavigationView {
        ScrollView {
            Rectangle()
                .fill(.red)
                .frame(width: 100, height: 100)
        }
        .navigationTitle("Page 1")
    }
    .navigationViewStyle(StackNavigationViewStyle()) 
}}

struct Page2: View {
var body: some View {
    NavigationView {
        ScrollView {
            Rectangle()
                .fill(.blue)
                .frame(width: 100, height: 100)
        }
        .navigationTitle("Page 2")
        
    }
    .navigationViewStyle(StackNavigationViewStyle())
}}

除非有另一種方法，否則 NavigationViews 在 TabView 內很重要，這樣如果我向上滾動導航欄標題會切換到 .inline ，如下所示：

此外，我使用 StackNavigationViewStyle() 因為沒有它，當我在它們之間來回切換之前第一次打開應用程式時頁面不會顯示。StackNavigationViewStyle() 解決了這個問題，但問題仍然是當我第一次打開應用程式時，矩形被錯誤地放置在螢屏頂部。然后我必須切換到第二頁并回傳以使它們正確定位：

有人有想法嗎？

uj5u.com熱心網友回復：

一種解決方案是使用Tab 選擇引數。最好不要將 StackNavigationViewStyle() 與這些嵌入式 NavigationView 一起使用。您可能使用的是一個選擇器，它跟蹤您所在的頁面和一個存盤當前頁面的 State 變數。這樣，NavigationView 就在一個地方，并且為每個 TabView 項賦予了不同的標題。

struct ContentView: View {
    
    @State private var selectedTab = "1"
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                Page1()
                    .tag("1")
                    .navigationBarTitle("Page 1")

                Page2()
                    .tag("2")
                    .navigationBarTitle("Page 2")
            }
            .tabViewStyle(.page)
        }
    }
}

struct Page1: View {
var body: some View {
    ScrollView {
        Rectangle()
            .fill(.red)
            .frame(width: 100, height: 100)
    }
}}

struct Page2: View {
var body: some View {
    ScrollView {
        Rectangle()
            .fill(.blue)
            .frame(width: 100, height: 100)
    }
}}

更新 當您希望 NavigationTitle 在滾動時為 .inline 時，請使用以下代碼。

struct ContentView: View {
    
    @State private var selectedTab = "1"
    
    var body: some View {
        NavigationView {
            GeometryReader { proxy in
                ScrollView(showsIndicators: false) {
                    TabView(selection: $selectedTab) {
                        Page1()
                            .tag("1")
                            .navigationBarTitle("Page 1")

                        Page2()
                            .tag("2")
                            .navigationBarTitle("Page 2")
                    }
                    .tabViewStyle(.page)
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                    .frame(height: proxy.size.height)
                    .ignoresSafeArea()
                    
                }
            }
        }
    }
}

struct Page1: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 200)
        }
    }
}

struct Page2: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.blue)
                .frame(width: 200, height: 200)
        }
    }
}

標籤：迅速 代码 迅捷 导航视图 选项卡视图

上一篇：MacOSswiftUI將剪貼板中的文本復制到TextField欄位中

下一篇：UIActivityViewController處理取消動作|斯威夫特/Xcode