SOLVED: How can I change BackgroundColor while using NavigationStack?

@rakhyunkim

Dec '23

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

@ygeras

Dec '23

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

3

@rakhyunkim

Dec '23

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

@ygeras

Dec '23

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

@rakhyunkim

Dec '23

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

thanks!!

.scrollContentBackground(.hidden)

2

	@rakhyunkim Dec '23 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
	@ygeras Dec '23 Background color for what? For the expense row or for the whole screen? Provide more detailed description what you are trying to achieve... 3
	@rakhyunkim Dec '23 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
	@ygeras Dec '23 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
	@rakhyunkim Dec '23 Thank you so much!! I didn`t know I should use this thanks!! `.scrollContentBackground(.hidden)` 2

Reply to this topic…