How to: Create buttons Swift UI

Question

I have these frames positioned on my view, exactly how I need buttons placed but am new to swift - UI and trying to figure out how to do this the right way. Can I somehow bring the button onto the stack above the background color of the VStack? Also is VStack the correct way to approach this?

Code for reference :

   //Todays List
                        VStack(alignment: .leading) {
                            Color.black
                                                          .frame(width: 205, height: 70, alignment: .center)
                                                          .position(x: 80, y: 80)
                            
                        
                               
                          
                            
 
                            
                        }
                        
                        //Tomorrows List
                        VStack(alignment: .leading) {
                                                   
                                                   Color.black
                                                       .frame(width: 205, height: 70, alignment: .center)
                                                       .position(x: 290, y: 80)
                                                   
                                               }
                        
                        //This Month
                        VStack(alignment: .leading) {
                            
                            Color.blue
                                .frame(width: 205, height: 70, alignment: .center)
                                .position(x: 80, y: 150)
                            
                        }
                        
                        //Next Month
                        VStack(alignment: .leading) {
                                                
                                                Color.blue
                                                    .frame(width: 205, height: 70, alignment: .center)
                                                    .position(x: 290, y: 150)
                                                
                                            }
                        
                        //3% Yeild Or Higher
                        VStack(alignment: .leading) {
                            
                            Color.red
                                .frame(width: 205, height: 70, alignment: .center)
                                .position(x: 80, y: 215)
                            
                        }
                        
                        //5% Yield Or Higher
                        VStack(alignment: .leading) {
                                                
                                                Color.red
                                                    .frame(width: 205, height: 70, alignment: .center)
                                                    .position(x: 290, y: 215)
                                                
                                            }
                        
                        //App Help
                        VStack(alignment: .leading) {
                            
                            Color.green
                                .frame(width: 205, height: 70, alignment: .center)
                                .position(x: 80, y: 285)
                            
                        }
                        
                        //Exit App / TBD
                        VStack(alignment: .leading) {
                                                   
                                                   Color.yellow
                                                       .frame(width: 205, height: 70, alignment: .center)
                                                       .position(x: 290, y: 285)
                                                   
                                               }
                        
                    }


  [1]: https://i.stack.imgur.com/Fe64N.png

What exactly are you trying to do? Do you want to have each of your cells to be buttons? Or do you need VStacks because you need more complex views which just include a button? — pawello2222, Jul 02 '20 at 17:58
@pawello2222 I would like all VStacks to contain buttons because they are apart of a more complex view. The vstack buttons will update data within the view controller they are nested in. — Joshua, Jul 02 '20 at 18:01
@Joshua Your question is still too broad. Please see [A Beginner’s Guide to SwiftUI Buttons](https://www.appcoda.com/swiftui-buttons/) — pawello2222, Jul 02 '20 at 18:06
@Joshua This might help you as well: [SwiftUI Grid Layout](https://stackoverflow.com/questions/62577296/swiftui-grid-layout/62577721#62577721) — pawello2222, Jul 02 '20 at 18:07
@Joshua And in SwiftUI you don't usually need `.position(x: 80, y: 80)`. Make use of Stacks and Spacers and let SwiftUI position the views for you. — pawello2222, Jul 02 '20 at 18:09

score 0 · Answer 1 · answered Jul 02 '20 at 18:46

To add a button in you VStacks you do this

VStack(alignment: .leading) {
     Button(action: {
           // Write your action here
     }) {
           Color.blue
     }
     .frame(width: 205, height: 70, alignment: .center)
     .position(x: 80, y: 150)
}

But that view you have really need some work, you shouldn't hardcode the position of each stack and add the frame to each of them, if it's possible for you to use SWiftUI 2.0 read something about using LazyVGrid https://developer.apple.com/documentation/swiftui/lazyvgrid

score 0 · Accepted Answer · answered Jul 03 '20 at 05:40

To make a button is swift ui you use the button command and then an action like this

VStack { Button(action: {//Code for you button to do something)}) {
            Text("LOGIN")
            //you can add text to the button by just adding text in the curly brackets and add modifiers to id such as .padding() or .cornerRadius

}

How to: Create buttons Swift UI

2 Answers2