Change background SwiftUI

Hello
I made a custom Picker View but I don't have any idea on how to change the background color to grey when I press on one of the options
Here is the code:

Code Block
struct PickerView: View {
var arr: [String] = ["Easy", "Medium", "Hard"]
var h: CGFloat = 50
var w: CGFloat = 320
@ObservedObject var input: UserInput
var body: some View{
HStack(spacing: 40){
ForEach(0..<arr.count){ i in
HStack(spacing: 25){
Text(arr[i])
.bold()
.onTapGesture {
switch i{
case i: input.indi = i
default: return
}
print(i)
}
if(i < arr.count - 1){
Divider()
.frame(height: 25)
}
}
}
}.padding()
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color.gray, lineWidth: 3)
)
}
}
class UserInput: ObservableObject {
@Published var indi: Int = 0
}

Thank you for your time

I am not sure I understand what you want, but…

To get a blue background on the pickerView (the roundedRect), I modified as follows :
Code Block
}.padding()
.background(Color.blue) // <<<---- ADDED
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color.gray, lineWidth: 3)
)

What I want is (for example) when I tap on the Text(arr[0]) at line 12 the background becomes grey and if I tap on Text(arr[1]), Text(arr[0]) returns to be normal background and Text(arr[1]) becomes grey
This is just a quick hint.

Create a State didTap (here it changes the color of the whole picker, which may not be what you want ultimately, but that gives an idea I hope).
In fact, you should get a state var for each item in the picker.
But the problem is that you just have a Text, not a full frame around the text that you would change color.
May be you have to adapt your code.

Code Block
struct PickerView: View {
var arr: [String] = ["Easy", "Medium", "Hard"]
var h: CGFloat = 50
var w: CGFloat = 320
@State private var didTap:Bool = false
var body: some View{
HStack(spacing: 40){
ForEach(0..<arr.count){ i in
HStack(spacing: 25){
Text(arr[i])
.bold()
.onTapGesture {
self.didTap.toggle()
switch i {
case i: input.indi = i
default: return
}
print(i)
}
if(i < arr.count - 1){
Divider()
.frame(height: 25)
}
}
}
}.padding()
.background(didTap ? Color.blue : Color.yellow)
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color.gray, lineWidth: 3)
)
}
}

Note: I do not understand the interest of the switch here.
Just
Code Block
input.indi = i

should work, isn't it ?
I thought about this but in this way it would change the background of the entire RoundedRectangle and it's not what I want, but Thank you anyway
I guess it is not what you want.

To change this, you need to
  • create a view for each element of the picker

  • apply the proper rounding to each view

  • have a State for each element of the picker (an array)

  • apply the .background(didTap ? Color.blue : Color.yellow). to each of the subview in the picker.

So you have some more code to write, but that should not be too hard.

What I want is (for example) when I tap on the Text(arr[0]) at line 12 the background becomes grey and if I tap on Text(arr[1]), Text(arr[0]) returns to be normal background and Text(arr[1]) becomes grey

Why don't you put .background modifier to Text?
Code Block
struct PickerView: View {
var arr: [String] = ["Easy", "Medium", "Hard"]
var h: CGFloat = 50
var w: CGFloat = 320
@Environment(\.colorScheme) var colorScheme
var normalColor: Color {colorScheme == .dark ? .black : .white}
@ObservedObject var input: UserInput
var body: some View {
HStack(spacing: 40){
ForEach(0..<arr.count) { i in
HStack(spacing: 25) {
Text(arr[i])
.bold()
.onTapGesture {
input.indi = i
print(i)
}
.background(i == input.indi ? Color.gray : normalColor) //<-
if i < arr.count - 1 {
Divider()
.frame(height: 25)
}
}
}
}.padding()
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(Color.gray, lineWidth: 3)
)
}
}


Why don't you put .background modifier to Text?

Applying modifier to Text will only change the text frame, not the full "cell" of the picker.
I don't think that is the desired effect
Change background SwiftUI
 
 
Q