CODEWITHSUNDEEP
uinavigationbarswiftui
Khant Thu Linn
Khant Thu Linn

Reputation: 6143

Change the navigation bar color

I am learning swiftui and i write very simple list like this. 

NavigationView {

    List {
        Toggle(isOn: $isFemale) {
            Text("Voice: \(self.isFemale == true ? "Female":"Male")").font(.system(size: 17)).bold()
            }.padding(4)

        NavigationButton(destination: LanguagePage()) {
            VStack(alignment: .leading) {
                Text("Change Language").font(.system(size: 17)).bold().padding(4)
                Text("English - English").font(.system(size: 17)).font(.system(.body)).padding(4)
            }
        }


        .navigationBarTitle(Text("Settings"), displayMode: .large)}

How can I change navigation bar colour? Currently, it is translucent. How can I change to opaque?

Upvotes: 2

Views: 4859

Answers (2)

Imran
Imran

Reputation: 2543

You can use the Appearance APIs to change to navigation bar title and background colors


init() { // for navigation bar title color
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
// For navigation bar background color 
UINavigationBar.appearance().backgroundColor = .green
   }     
NavigationView {

    List {
        Toggle(isOn: $isFemale) {
            Text("Voice: \(self.isFemale == true ? "Female":"Male")").font(.system(size: 17)).bold()
            }.padding(4)

        NavigationLink(destination: LanguagePage()) {
            VStack(alignment: .leading) {
                Text("Change Language").font(.system(size: 17)).bold().padding(4)
                Text("English - English").font(.system(size: 17)).font(.system(.body)).padding(4)
            }
        }
        .navigationBarTitle(Text("Settings"), displayMode: .large)}

Upvotes: 1

nigong
nigong

Reputation: 1755

Using XCode 11.0 beta 5 (11M382q), I got it working with following:

struct TableWithNavTitle: View {

    var body: some View {
        // For navigation bar background color
        UINavigationBar.appearance().backgroundColor = .red

        return NavigationView {
            List(0..<5) { item in
                NavigationLink("\(item)", destination: Text("\(item)"))
            }.navigationBarTitle("Title")
        }
    }
}

Upvotes: 2

Related Questions