change color background with button

Question

Created Nov ’22

Replies 3

Boosts 0

Views 1.1k

Participants 3

i created a list with colors and i want when the user click red so all the screen was background red, if user click green so full background is green...

i don't know why but the var not change..

  var body: some View {
     
    NavigationView {
      List {
        Section {
          ScreenColorButtons(text: "Red", color: .red)
          ScreenColorButtons(text: "Green", color: .green)
          ScreenColorButtons(text: "Blue", color: .blue)
        }
      }
    }
  }
}

struct ScreenColorButtons: View {
   
  @State static var screenSelected: Color = Color.red
   
  var text: String
  var color: Color
   
  var body: some View{
    Button(action: {
      ScreenColorButtons.screenSelected = color
      print(ScreenColorButtons.screenSelected)
    }, label: {
      NavigationLink(text){}
    })
  }
}

the ScreenColorView:

struct ScreenColorView: View {

  @Environment(\.presentationMode) var presentationMode
   
  var body: some View {
    Color.ScreenColorButtons.screenSelected
  }
}

why the var not change and error to background??? thank for answer

Boost

Answer 1

Claude31 OP

Nov ’22

To set the background color, use ZStack:

  var body: some View {
            ZStack {
                Color.purple  // Or whatever color you want
                    .ignoresSafeArea()

0

Answer 2

ODev OP

Nov ’22

yes this i know but i want the user choose color from author view

0

Answer 3

darkpaw OP

Nov ’22

You don't need to use ZStack if you have a List, as you simply hide the scroll content background, and set the background colour.

Your original code didn't really make much sense. You were creating three instances of ScreenColorButtons and setting a @State var in each one, which only applies to that particular instance. You never actually linked the colour of the background with any of the buttons.

The following code works. It creates a @State var in the main view containing the buttons, and a @Binding var in the buttons themselves so when you click the button the bound var is updated.

import SwiftUI

struct ContentView: View {
	@State private var colorSelected: Color = Color.red
	var body: some View {
		List {
			ScreenColorButtons(colorSelected: $colorSelected, text: "Red", color: .red)
			ScreenColorButtons(colorSelected: $colorSelected, text: "Green", color: .green)
			ScreenColorButtons(colorSelected: $colorSelected, text: "Blue", color: .blue)
			ScreenColorButtons(colorSelected: $colorSelected, text: "Yellow", color: .yellow)
			ScreenColorButtons(colorSelected: $colorSelected, text: "Pink", color: .pink)
			ScreenColorButtons(colorSelected: $colorSelected, text: "White", color: .white)
			ScreenColorButtons(colorSelected: $colorSelected, text: "Gray", color: .gray)
			ScreenColorButtons(colorSelected: $colorSelected, text: "Black", color: .black)
		}
		.background(colorSelected)
		.scrollContentBackground(.hidden)
	}
}

struct ScreenColorButtons: View {
	@Binding var colorSelected: Color
	var text: String
	var color: Color

	var body: some View{
		Button(action: {
			colorSelected = color
			print(colorSelected)
		}, label: {
			Text(text)
		})
	}
}

struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
		ContentView()
	}
}

0