UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: How can I change BackgroundColor while using NavigationStack?

Forums > 100 Days of SwiftUI

How can I change background color of whole screen while using NavigationStack? I tried several ways but didn`t work at all i used Color.yellow --> not working, backgroundColor also not working


struct ContentView: View {

    @State var expense = Expense()

    var body: some View {

        NavigationStack {

            VStack {

                List {
                    ForEach(expense.items) { item in
                        Text(item.name)
                    }
                    .onDelete(perform: removeRow)
                }
            }
            .navigationTitle("Expense")
            .toolbar {
                Button("Add expense", systemImage: "plus") {
                    let addExpense = ExpenseItem(name: "Test", type: "Personal", amount: 0.0)
                    expense.items.append(addExpense)
                }
            }
        }
    }
    func removeRow(at offsets: IndexSet) {
        expense.items.remove(atOffsets: offsets)
    }
}

2      

Background color for what? For the expense row or for the whole screen? Provide more detailed description what you are trying to achieve...

3      

I tried to change a background color of a view, when I use a navigationStack I can`t change a background color.

// Example 1.
VStack {
Text("")
}
.background(Color.yellow)

Example 2.
VStack {
Color.yellow
Text("")
}

this is not working

2      

Once again, I am not sure what exactly you are trying to achieve but try this.

struct ContentView: View {
    @State var expense = Expense()

    var body: some View {

        NavigationStack {
            VStack {
                List {
                    ForEach(expense.items) { item in
                        Text(item.name)
                            // with this you can manage background of rows
                            // you can set your color or use dynamic ones like below
                            .listRowBackground( item.type == "Personal" ? Color.blue : Color.green)
                    }
                    .onDelete(perform: removeRow)
                }

            }
            .scrollContentBackground(.hidden) // will hide default background for scroll content
            .background(Color.yellow) // now you can use whatever background you need
            .navigationTitle("Expense")
            .toolbar {
                Button("Add expense", systemImage: "plus") {
                    let addExpense = ExpenseItem(name: "Test", type: "Personal", amount: 0.0)
                    let addBisnessExpense = ExpenseItem(name: "Test2", type: "Business", amount: 0.0)
                    expense.items.append(addExpense)
                    expense.items.append(addBisnessExpense)

                }
            }
        }
    }
    func removeRow(at offsets: IndexSet) {
        expense.items.remove(atOffsets: offsets)
    }
}

3      

Thank you so much!! I didn`t know I should use this

thanks!!

.scrollContentBackground(.hidden)

2      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.