SwiftUI create View and func with button tapped. Is this possible?

Question

When the "Add Circle" button is pressed, Circle() will be created in VStack. Clicking "Add Function for Circle" button will add frame, trim, stroke functions to Circle(). Do you think this is possible? Edit: I added code.

Can't add it directly like a View without ForEach? As you can see, there is no Circle() on my code screen, and when I press the button, I want to create a circle on the code screen (SwiftUI file) and preview screen.

Code:

struct SampleView: View {
    var body: some View {
      VStack(spacing: 20) {
        
        // Circle here....
        //Circle()
        
        Button(action: {
          //Add Circle
          //Circle()
        }) {
          Text("Add Circle")
        }
        
        Button(action: {
          //Add Function
          //frame, stroke, trim... etc.
        }) {
          Text("Add Function for Circle")
        }
      }
    }
}

show your code as text, not a picture.

workingdog support Ukraine
– workingdog support Ukraine

2022-02-01 11:46:09 +00:00
Commented Feb 1, 2022 at 11:46 — workingdog support Ukraine
– workingdog support Ukraine, Commented Feb 1, 2022 at 11:46

Frederik Mrozek · Accepted Answer · 2022-02-01 13:45:01Z

This code does what you want. It chooses a random color. You can expand the CircleStyle struct as you need to and add border, shadow and other styles to it.

struct CircleStyle {
    let id: Int
    let color: Color
    let shadowColor: Color
    let shadowRadius: Double
}

struct ContentView: View {

    let colorList: [Color] = [.red, .blue, .green, .yellow]

    @State var shapeList = [CircleStyle]()

    @State var maxId = 0

    var body: some View {
        VStack {
            // Here the circles are stacked
            ForEach(shapeList, id: \.id) { shapeStyle in
                Circle()
                    .foregroundColor(shapeStyle.color)
                    .shadow(color: shapeStyle.shadowColor, radius: shapeStyle.shadowRadius)
            }
        
            Button(action: {
                // Here the circle styles are created
                // You can also edit the styles with another action
                maxId += 1
                self.shapeList.append(CircleStyle(id: maxId, color: colorList.randomElement()!, shadowColor: colorList.randomElement()!, shadowRadius: Double.random(in: 0...20)))
            }) {
                Text("Add")
            }
        }
    }
}

It looks like this:

workingdog support Ukraine · Accepted Answer · 2022-02-01 14:09:14Z

0

you can easily add buttons to the VStack, as for functions as you call modifiers, you can apply the same principle, using some @State var and add them to the desired button. It's up to you which button you want to add modifiers to.

Adding buttons to the VStack:

struct ContentView: View {
    @State var circles = 0

    var body: some View {
        VStack (spacing: 20){
            ForEach(0..<circles, id: \.self) { n in
                Circle().frame(width: 44, height: 44) // <-- replace 44 with var
            }
            Button(action: { circles += 1 } ) {
                Text("Add circle")
            }
            Button(action: {
                // you can do the rest, using var for use in frame width etc...
            } ) {
                Text("Add function for circle")
            }
        }
    }
    
}

EDIT-1: only 1 button

struct ContentView: View {
    @State var showCircles = false
    @State var w: CGFloat = 66
    @State var h: CGFloat = 66

    var body: some View {
        VStack (spacing: 20){
            if showCircles {
                Circle().frame(width: w, height: h)
            }
            Button(action: { showCircles = true } ) {
                Text("Add circle")
            }
            Button(action: {
                w = 22
                h = 22
            } ) {
                Text("Add function for circle")
            }
        }
    }
    
}

edited Feb 1, 2022 at 14:09

answered Feb 1, 2022 at 12:20

workingdog support Ukraine

38.9k5 gold badges47 silver badges52 bronze badges

4 Comments

Ufuk Köşker Over a year ago

Thank you for your answer but Can't add it directly like a View without ForEach? As you can see, there is no Circle() on my code screen, and when I press the button, I want to create a circle on the code screen (SwiftUI file) and preview screen.

workingdog support Ukraine Over a year ago

updated my answer with just 1 button. Is this what you want?

Ufuk Köşker Over a year ago

I thought about it but this is not what I want to do.

workingdog support Ukraine Over a year ago

can you explain what you want? Does a circle appear when you tap on the "Add" button?

Collectives™ on Stack Overflow

SwiftUI create View and func with button tapped. Is this possible?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related