SwiftUI：iOS 15 中的 NavigationBar 和 TabBar 出现故障

Question

在 SwiftUI 中，我想为我的视图使用背景色，同时将 navigationViewStyle 设置为 .stack，以强制 single-column 堆栈导航 Plus-sized 设备。

    var body: some View {
        TabView {
            NavigationView {
                ScrollView {
                    ForEach(0..<100) { _ in
                        Text("Hello, world!")
                            .padding()
                    }
                    .frame(maxWidth: .infinity)
                }
                .navigationTitle("Demo")
//                .background(Color.yellow) // I can do this …
            }
//            .navigationViewStyle(.stack) // … or this, but not both!
            .tabItem {
                Label("Demo", systemImage: "swift")
            }
        }
    }

但是，当我同时执行这两项操作时，向下滚动时导航栏不会折叠。导航栏和标签栏也没有背景。

当我只设置背景，而忽略设置 navigationViewStyle 的那一行时，在纵向模式或更小的设备上一切看起来都很好。但是在横向的 Plus-size 设备上，它看起来像这样：

所以我想如果不设置 navigationViewStyle 我真的做不到。

我该怎么做才能解决这个问题？这是应该由 Apple 修复的错误吗？非常感谢所有帮助。

Answer 1

在 ScrollView

上使用 .navigationViewStyle 视图修饰符

struct ContentView: View {
    var body: some View {
           TabView {
               NavigationView {
                   ScrollView {
                       ForEach(0..<100) { _ in
                           Text("Hello, world!")
                               .padding()
                       }
                       .frame(maxWidth: .infinity)
                   }
                   .navigationTitle("Demo")
                   .background(Color.yellow)
                   .navigationViewStyle(.stack)

               }
               .tabItem {
                   Label("Demo", systemImage: "swift")
               }
           }
       }
}

更新

我想，这是一个错误。它不起作用。

1

如果您所有的 ScrollView 都具有相同的背景，请在一个视图上使用一次。

struct ScrollViewBackground: ViewModifier {
    
    let color: Color
    
    func body(content: Content) -> some View {
        content
            .ignoresSafeArea(edges: .horizontal)
            .onAppear {
                UIScrollView.appearance().backgroundColor = UIColor(color)
            }
    
    }
}

extension View {
    func setBackgroundColor(color: Color) -> some View {
        return self.modifier(ScrollViewBackground(color: color))
    }
}

2

使用 introspect 访问底层 UIScrollView 并更改其背景。您还需要在 ScrollView 上使用 .ignoresSafeArea(edges: .horizontal)。

ScrollView {
    Text("Item 2")
}
.introspectScrollView { scrollView in
    scrollView.backgroundColor = UIColor(color.yellow)
}

SwiftUI：iOS 15 中的 NavigationBar 和 TabBar 出现故障

SwiftUI: Malfunctioning NavigationBar and TabBar in iOS 15

ios

swiftui

swiftui-navigationview

ios15

更新

1

2