3
votes

I'm trying to change my navigationBarTitle Color (not background). I tried a couple solution but my title text color only changes when I scroll down. Not changing when screen open.

enter image description here

var body: some View {
  ZStack{
    NavigationView{
      ScrollView{
        LazyVStack{
          ForEach(storeArray,id:\.id) { item in
            Image(uiImage: (item.banner?.url)!.load())
                .resizable()
                .frame(width: CGFloat(UIScreen.main.bounds.width * 0.9), height: CGFloat((UIScreen.main.bounds.width / CGFloat((item.banner?.ratio) ?? 1))))
                .cornerRadius(12)
                .shadow(radius: 4)
                .aspectRatio(CGFloat((item.banner?.ratio)!), contentMode: .fit)
          }
        }
      }
      .navigationBarTitle(Text("United App").foregroundColor(.blue))
      .background (NavigationConfigurator { nc in
          nc.navigationBar.titleTextAttributes = [.foregroundColor : UIColor.blue]
      })
    }
    .onAppear {
        if isOpened != true {
            getStoreResponse()
        }
    }
2

2 Answers

3
votes

You need to add the same for large title

.background (NavigationConfigurator { nc in
    
    nc.navigationBar.titleTextAttributes = [.foregroundColor : UIColor.blue]
    nc.navigationBar.largeTitleTextAttributes = [.foregroundColor : UIColor.blue]
    
})

the alternate is to use appearance instead of configurator, but it should be done in init of view (before NavigationView created) like

init() {
    UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.blue]
    UINavigationBar.appearance().largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.blue]
}
1
votes

You can also use a more complete approach:

    init() {
        let coloredAppearance = UINavigationBarAppearance()

            // for inline displayMode
            coloredAppearance.titleTextAttributes = [.font : UIFont(name: "Georgia", size: 20)!, NSAttributedString.Key.foregroundColor: UIColor.blue]
            
            // for automatic and large displayMode
            coloredAppearance.largeTitleTextAttributes = [.font : UIFont(name: "Georgia", size: 20)!, NSAttributedString.Key.foregroundColor: UIColor.black]
            
            // or
            
            // for inline displayMode
    //        coloredAppearance.titleTextAttributes = [.font:UIFont.preferredFont(forTextStyle: .title1), NSAttributedString.Key.foregroundColor: UIColor.blue]
            // for automatic and large displayMode
    //        coloredAppearance.largeTitleTextAttributes = [.font:UIFont.preferredFont(forTextStyle: .title1), NSAttributedString.Key.foregroundColor: UIColor.black]

            // to make everything work normally
            UINavigationBar.appearance().standardAppearance = coloredAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    }
    var body: some View {
        NavigationView {
            Text("Screnn")
                .navigationBarTitle("Title", displayMode: .inline)
        }
        // Do not forget this
        // that means only show one view at a time no matter what device I'm working
        .navigationViewStyle(StackNavigationViewStyle())
    }

The result is as follows:

enter image description here