Passing a Value ($0) to the State Var

Question

Created Dec ’20

Replies 2

Boosts 0

Participants 2

I have several vertical stacks of six horizontal buttons. And I want to open a modal sheet based on the button they click on.

Code Block import SwiftUI
struct ContentView: View {
    @State private var eventPresented = false
    @State private var selectedEventIndex = 3
    
    @State var shadowColors: [Color] = Array(repeating: Color.clear, count: 38)
    @State var titleColors: [Color] = Array(repeating: Color.black, count: 38)
    @State var fillColors: [Color] = Array(repeating: Color.clear, count: 38)
    @State var buttonTitles: [String?] = Array(repeating: nil, count: 38)
    @State var eventNumbers: [String?] = Array(repeating: nil, count: 38)
    
    var body: some View {
        VStack {
            VStack(spacing: 0.0) {
                HStack(spacing: 0.0) {
                    ForEach((0...6), id: \.self) {
                        Button(buttonTitles[$0] ?? "") {
                            eventPresented = true
                            selectedEventIndex = 5 // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
                        }
                        .foregroundColor(titleColors[$0])
                        .overlay(Text(eventNumbers[$0] ?? "").font(.footnote).foregroundColor(.blue).offset(x: -16, y: -16))
                        .buttonStyle(BorderlessButtonStyle())
                        .frame(width: 48, height: 48, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 2)
                                        .fill(fillColors[$0])
                                        .shadow(color: shadowColors[$0], radius: 2, x: 0, y: 0)
                        )
                        .sheet(isPresented: $eventPresented) {
                            EventView(eventVisible: self.$eventPresented, valueFromParent: self.$selectedEventIndex)
                        }
                    }
                }
                ...
                ...
                ...
                HStack(alignment: .top, spacing: 0.0) {
                    ForEach((35...36), id: \.self) {
                        Button(buttonTitles[$0] ?? "") {
                            eventPresented = true
                            selectedEventIndex = 5
                        }
                        .foregroundColor(titleColors[$0])
                        .overlay(Text(eventNumbers[$0] ?? "").font(.footnote).foregroundColor(.blue).offset(x: -16, y: -16))
                        .buttonStyle(BorderlessButtonStyle())
                        .frame(width: 48, height: 48, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 2)
                                        .fill(fillColors[$0])
                                        .shadow(color: shadowColors[$0], radius: 2, x: 0, y: 0)
                        )
                        .sheet(isPresented: $eventPresented) {
                            EventView(eventVisible: self.$eventPresented, valueFromParent: self.$selectedEventIndex)
                        }
                    }
                }
                .frame(width: 336.0, height: 48.0, alignment: .leading)
            }
        }
    }
}
struct EventView: View {
    @Binding var eventVisible: Bool
    @Binding var valueFromParent : Int
    var body: some View {
        VStack {
            Text("This is a sheet.")
            Button("OK") {
                self.eventVisible = false
                print("From parent: \(valueFromParent)")
            }
        }
        .frame(width: 240, height: 180)
    }
}

For now, I arbitrarily set eventPresented to 5, which will be passed to EventView. How can I set $0 to this state value like

Code Block eventPresented = $0

Thank you.

Answered by OOPer in 652714022

Seems to be the same issue as in this thread.

You just needs to clarify what is $0 in your code.

Code Block                 //...
                    ForEach((0...6), id: \.self) {
                        index in //<- Declare the argument of closure explicitly
                        //↓ And use `index` instead of `$0` below
                        Button(buttonTitles[index] ?? "") {
                            eventPresented = true
                            selectedEventIndex = index //<-
                        }
                        .foregroundColor(titleColors[index])
                        .overlay(Text(eventNumbers[index] ?? "").font(.footnote).foregroundColor(.blue).offset(x: -16, y: -16))
                        .buttonStyle(BorderlessButtonStyle())
                        .frame(width: 48, height: 48, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 2)
                                        .fill(fillColors[index])
                                        .shadow(color: shadowColors[index], radius: 2, x: 0, y: 0)
                        )
                        .sheet(isPresented: $eventPresented) {
                            EventView(eventVisible: self.$eventPresented, valueFromParent: self.$selectedEventIndex)
                        }
                    }
                //...

Closure Expressions

Closure Expression Syntax
Closure expression syntax has the following general form:
Code Block { (parameters) -> return type in
    statements
}

Seems you are too accustomed to use Shorthand Argument Names.

Boost

Answer 1

OOPer OP

Dec ’20

Accepted Answer

Seems to be the same issue as in this thread.

You just needs to clarify what is $0 in your code.

Code Block                 //...
                    ForEach((0...6), id: \.self) {
                        index in //<- Declare the argument of closure explicitly
                        //↓ And use `index` instead of `$0` below
                        Button(buttonTitles[index] ?? "") {
                            eventPresented = true
                            selectedEventIndex = index //<-
                        }
                        .foregroundColor(titleColors[index])
                        .overlay(Text(eventNumbers[index] ?? "").font(.footnote).foregroundColor(.blue).offset(x: -16, y: -16))
                        .buttonStyle(BorderlessButtonStyle())
                        .frame(width: 48, height: 48, alignment: .center)
                        .background(RoundedRectangle(cornerRadius: 2)
                                        .fill(fillColors[index])
                                        .shadow(color: shadowColors[index], radius: 2, x: 0, y: 0)
                        )
                        .sheet(isPresented: $eventPresented) {
                            EventView(eventVisible: self.$eventPresented, valueFromParent: self.$selectedEventIndex)
                        }
                    }
                //...

Closure Expressions

Closure Expression Syntax
Closure expression syntax has the following general form:
Code Block { (parameters) -> return type in
    statements
}

Seems you are too accustomed to use Shorthand Argument Names.

0

Answer 2

Tomato OP

Dec ’20

Seems to be the same issue as in this thread.

Yes. I thought so. I tried using it inside the button, which failed. I guess I need to go back to reading a book. I have one, but... Thanks a lot.

0