在 SwiftUI 中切换 UINavigationBar 外观

Question

我需要能够按需更改 SwiftUI 视图中的颜色。这不是根据需要为视图中的对象切换颜色的问题，但是如何为 NavigationBar 外观属性做到这一点？这是我在视图初始化时设置导航栏外观的方法。点击按钮会更改按钮颜色，但不会更改导航栏的外观。使用不同的 theme1 值重新启动应用程序将显示正确的颜色，但点击按钮只会更改按钮颜色，而不会更改 NavBar 的外观。

struct ContentView: View {
@State private var theme1 = true
init() {
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.titleTextAttributes = [.foregroundColor: theme1 ? UIColor.red : UIColor.yellow]
    navBarAppearance.largeTitleTextAttributes = [.foregroundColor: theme1 ? UIColor.red : UIColor.yellow]
    navBarAppearance.backgroundColor = theme1 ? UIColor.yellow : UIColor.red
    UINavigationBar.appearance().standardAppearance = navBarAppearance
    UINavigationBar.appearance().compactAppearance = navBarAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
    UINavigationBar.appearance().tintColor = theme1 ? UIColor.red : UIColor.yellow
}
var body: some View {
    NavigationView {
        VStack {
            Button("Toggle Style") {
                theme1.toggle()
            }
            .padding(8)
            .foregroundColor(theme1 ? Color(.red): Color(.yellow))
            .background(RoundedRectangle(cornerRadius: 10)
                            .fill(theme1 ? Color(.yellow) : Color(.red)))
        }
        .navigationTitle("Theme Picker")
    }
}

}

Answer 1

因为我们在代码中使用 UIKit，所以我们必须先杀死 View，然后创建我们想要的：

---

版本 1：

import SwiftUI

struct ContentView: View {
    @State private var theme1 = true

    var body: some View {
        
        if theme1 {
            CustomView(theme: $theme1)
        }
        else {
            CustomView(theme: $theme1)
        }
  
    }
}

---

struct CustomView: View {
    
    @Binding var theme1: Bool
    
    init(theme: Binding<Bool>) {
        
        _theme1 = theme
        
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.titleTextAttributes = [.foregroundColor: theme1 ? UIColor.red : UIColor.yellow]
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: theme1 ? UIColor.red : UIColor.yellow]
        navBarAppearance.backgroundColor = theme1 ? UIColor.yellow : UIColor.red
        UINavigationBar.appearance().standardAppearance = navBarAppearance
        UINavigationBar.appearance().compactAppearance = navBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
        UINavigationBar.appearance().tintColor = theme1 ? UIColor.red : UIColor.yellow
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Button("Toggle Style") {
                    theme1.toggle()
                }
                .padding(8)
                .foregroundColor(theme1 ? Color(.red): Color(.yellow))
                .background(RoundedRectangle(cornerRadius: 10)
                                .fill(theme1 ? Color(.yellow) : Color(.red)))
            }
            .navigationTitle("Theme Picker")
        }
    }
    
}

---

版本 2：

这是我推荐的一种方式：考虑到这一点，我们应该对 navigationTitle 自己负责，比如何时应该显示、隐藏或变小。 . .

---

import SwiftUI

struct ContentView: View {
    
    @State private var theme1 = true
    
    var body: some View {
        
        NavigationView {
            
            ZStack {
                
                theme1 ? Color.yellow.ignoresSafeArea() : Color.red.ignoresSafeArea()
                
                Color.white.cornerRadius(20).padding()
                
                VStack {
                    
                    Button(action: { theme1.toggle() }, label: {
                        Text("Toggle Style")
                            .bold()
                            .padding(8)
                            .background(theme1 ? Color.yellow : Color.red)
                            .cornerRadius(10)
                    })
                    
                }
                
            }
            
        }
        .overlay(navigationTitle, alignment: .topLeading)
        .foregroundColor(theme1 ? Color.red : Color.yellow)
        .accentColor(theme1 ? Color.red : Color.yellow)
        
    }
    
    var navigationTitle: some View {
        
        return Text("Theme Picker").font(Font.largeTitle.bold()).padding().offset(y: 30)
    }

}