在 SwiftUI 中切换 UINavigationBar 外观

如何解决在 SwiftUI 中切换 UINavigationBar 外观

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

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")
    }
}

}

解决方法

因为我们在代码中使用了 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)
    }

}