วิธีการ: สร้างปุ่ม Swift UI

ฉันวางเฟรมเหล่านี้ไว้ในมุมมองของฉันว่าฉันต้องการวางปุ่มอย่างไร แต่ยังใหม่สำหรับการใช้งานที่รวดเร็ว - UI และพยายามหาวิธีทำสิ่งนี้ให้ถูกต้อง ฉันสามารถนำปุ่มไปวางบนสแต็กเหนือสีพื้นหลังของ VStack ได้หรือไม่? VStack เป็นวิธีที่ถูกต้องในการเข้าถึงสิ่งนี้ด้วยหรือไม่?

รหัสสำหรับอ้างอิง:

   //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

ในการสร้างปุ่มให้รวดเร็วคุณใช้คำสั่งปุ่มแล้วดำเนินการเช่นนี้

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

}

ในการเพิ่มปุ่มใน VStacks คุณทำได้

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

แต่มุมมองนั้นคุณต้องการงานจริงๆคุณไม่ควรฮาร์ดโค้ดตำแหน่งของแต่ละสแต็กและเพิ่มเฟรมให้กับแต่ละสแต็กหากคุณสามารถใช้ SWiftUI 2.0 อ่านข้อมูลเกี่ยวกับการใช้ LazyVGrid https://developer.apple.com/documentation/swiftui/lazyvgrid