使用 TabView 时 NavigationView 滚动中断

Question

使用下面的代码，我的 TabView 出现了非常奇怪的滚动行为，在应用启动时调用了 LoginView：

struct LoginView: View {
    @State private var presentContent = false
    
    var body: some View {
        
        
        return NavigationView {
            ZStack{
                NavigationLink(
                    destination: ContentView(),
                    isActive: $presentContent,
                    label: {
                        EmptyView()
                    })
                
                Button("TEst") {
                    self.presentContent.toggle()
                }
            }
            
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView{
            Group{
                List{
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                }
            }
            .navigationTitle("Transactions")
            .tabItem {
                Image(systemName: "list.dash")
                Text("Transactions")
            }
            Group{
                List{
                    Text("Item 11")
                    Text("Item 12")
                    Text("Item 13")
                }
            }
            .navigationTitle("Summary")
            .tabItem {
                Image(systemName: "list.dash")
                Text("Summary")
            }
        }
    }
}

知道这可能会导致什么吗？

这里是逐字逐句的问题：点击 LoginView 中的按钮跳转到 ContentView 后，我看到了第一个选项卡。现在我向上滚动列表，它超出了屏幕边框，这是不正确的。

更新：添加下面的应用启动代码以强调“LoginView 在应用启动时被调用：”：

struct TabTestApp: App {
    var body: some Scene {
        WindowGroup {
            LoginView()
        }
    }
}

Answer 1

在 TabView 中使用 NavigationView 而不是 Group。您拥有的登录视图未显示甚至未使用。这将解决滚动问题。

编辑：添加登录名会添加其他不清楚的元素。您需要一个数据模型来自己处理登录详细信息，但一个简单的方法可能是这样的。

class LoginModel: ObservableObject {
    @Published var loggedin: Bool = false
}

struct Login: View {
    @ObservedObject var model: LoginModel
    @Environment(\.dismiss) var dismiss
    var body: some View {
        NavigationView {
            List {
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        dismiss()
                        print("if successful login handle here and dismiss")
                    }, label: {
                        Label("Close", systemImage: "xmark")
                            .labelStyle(.iconOnly)
                    })
                }
            }
        }
    }
}

struct ContentView: View {
    @StateObject var loginmodel =  LoginModel()
    @State var sheet: Bool = false
    
    var body: some View {
        TabView {
            NavigationView {
                VStack {
                    if !loginmodel.loggedin {
                        Button(action: {
                            sheet.toggle()
                        }, label: {
                            Label("Login", systemImage: "person.circle.fill")
                        })
                    } else {
                        List {
                            NavigationLink("Item 1", destination: Text("Item 1"))
                            NavigationLink("Item 2", destination: Text("Item 2"))
                            NavigationLink(destination: Text("Item 3")) {
                                Text("Item 3")
                            }
                        }
                    }
                }
                .navigationTitle("Transactions")
            }
            .sheet(isPresented: $sheet) {
                Login(model: loginmodel)
            }
            .tabItem {
                Label("Transactions", systemImage: "list.dash")
            }
            
            NavigationView {
                List {
                    Text("Item 11")
                    Text("Item 12")
                    Text("Item 13")
                }
                .navigationTitle("Summary")
            }
            .tabItem {
                Label("Summary", systemImage: "chart.line.uptrend.xyaxis")
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                List {
                    // Either or navigation link if needed
                    NavigationLink("Item 1", destination: Text("Item 1"))
                    NavigationLink("Item 2", destination: Text("Item 2"))
                    NavigationLink(destination: Text("Item 3")) {
                        Text("Item 3")
                    }
                }
                .navigationTitle("Transactions")
            }
            .tabItem {
                Label("Transactions", systemImage: "list.dash")
            }
            
            NavigationView {
                List {
                    Text("Item 11")
                    Text("Item 12")
                    Text("Item 13")
                }
                .navigationTitle("Summary")
            }
            .tabItem {
                Label("Summary", systemImage: "chart.line.uptrend.xyaxis")
            }
        }
    }
}

Answer 2

好的，我已经把整个代码改成了

//
//  ContentView.swift
//  TabTest
//
//  Created by Max on 2022-05-04.
//

import SwiftUI

struct LoginView: View {
    @Environment(\.presentationMode) var presentationMode
    @State private var presentContent = false
    
    var body: some View {
        return NavigationView {
            ZStack{
                Button("Login") {
                    presentationMode.wrappedValue.dismiss()
                }
            }
        }
    }
}

struct ContentView: View {
    @State private var isPresented = false
    
    
    var body: some View {
        TabView{
            NavigationView{
                List{
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                }
                .navigationTitle("Transactions")
                .navigationBarBackButtonHidden(true)
            }
            .tabItem {
                Image(systemName: "list.dash")
                Text("Transactions")
            }
            
            NavigationView{
                List{
                    Text("Item 11")
                    Text("Item 12")
                    Text("Item 13")
                }
                .navigationTitle("Summary")
                .navigationBarBackButtonHidden(true)
            }
            .tabItem {
                Image(systemName: "list.dash")
                Text("Summary")
            }
        }
        .onAppear{
            self.isPresented = true
        }
        .fullScreenCover(isPresented: $isPresented, content: LoginView.init)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

现在它似乎真的起作用了。从未想过 fullScreenCover - 谢谢！ :)

使用 TabView 时 NavigationView 滚动中断

NavigationView scrolling broken when using TabView

swiftui

swiftui-tabview

swiftui-navigationview