SwiftUI Tabbar 在选项卡的视图中保留 navigationBarTitle 位置 [英] SwiftUI Tabbar persists navigationBarTitle position in tab's views

问题描述

如何阻止一个选项卡的滚动视图的偏移量受到其他选项卡的偏移量的影响?

How can I stop a tab's scrollview's offset being affect by other tab's offset?

我不想每次显示新标签时都强制滚动视图到顶部，而只是希望新标签不受我查看的最后一个标签的滚动位置的影响.

I don't want to force the scroll view to the top every time you show a new tab, but just want the new tabs to be not affected by the scroll position of the last tab I viewed.

import SwiftUI

enum Tab {
    case First, Second, Third
    
    var title: String {
        switch self {
        case .First:
            return "First"
        case .Second:
            return "Second"
        case .Third:
            return "Third"
        }
    }
}

struct ContentView: View {
    @State var selectedTab = Tab.First
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                FirstView()
                    .tabItem {
                        Text("First")
                    }.tag(Tab.First)
                SecondView()
                    .tabItem {
                        Text("Second")
                    }.tag(Tab.Second)
                ThirdView()
                    .tabItem {
                        Text("Third")
                    }.tag(Tab.Third)
            }.navigationBarTitle(selectedTab.title, displayMode: .automatic)
            .navigationBarHidden(false)
        }
    }
}

struct FirstView: View {
    let data = [1,2,3,4,5,6,7,8,9,10]
    var body: some View {
        ScrollView(showsIndicators: true) {
            VStack {
                ForEach(data, id: \.self) { item in
                    Text("\(item)")
                        .frame(minWidth: 0, idealWidth: 100, maxWidth: .infinity, minHeight: 0, idealHeight: 100, maxHeight: .infinity, alignment: .center)
                }
            }
        }
    }
}

struct SecondView: View {
    let data = [1,2,3,4,5,6,7,8,9,10]
    var body: some View {
        ScrollView(showsIndicators: true) {
            VStack {
                ForEach(data, id: \.self) { item in
                    Text("\(item)")
                        .frame(minWidth: 0, idealWidth: 100, maxWidth: .infinity, minHeight: 0, idealHeight: 100, maxHeight: .infinity, alignment: .center)
                }
            }
        }
    }
}

struct ThirdView: View {
    let data = [1,2,3,4,5,6,7,8,9,10]
    var body: some View {
        ScrollView(showsIndicators: true) {
            VStack {
                ForEach(data, id: \.self) { item in
                    Text("\(item)")
                        .frame(minWidth: 0, idealWidth: 100, maxWidth: .infinity, minHeight: 0, idealHeight: 100, maxHeight: .infinity, alignment: .center)
                }
            }
        }
    }
}

推荐答案

因为你使用了一个 NavigationView，所以它保留了自己的状态.使每个标签的 NavigationView 独立.

It is because you use one NavigationView, so it preserves own state. Make NavigationView independent for each tab.

使用 Xcode 12/iOS 14 测试

Tested with Xcode 12 / iOS 14

struct ContentView: View {
    @State var selectedTab = Tab.First
    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                FirstView()
                    .navigationBarTitle(Tab.First.title)
            }
            .tabItem {
                Text("First")
            }.tag(Tab.First)
            NavigationView {
                SecondView()
                    .navigationBarTitle(Tab.Second.title)
            }
            .tabItem {
                Text("Second")
            }.tag(Tab.Second)
            NavigationView {
                ThirdView()
                    .navigationBarTitle(Tab.Third.title)
            }
            .tabItem {
                Text("Third")
            }.tag(Tab.Third)
        }
    }
}

这篇关于SwiftUI Tabbar 在选项卡的视图中保留 navigationBarTitle 位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！