How to create swift UI view

To create a SwiftUI view, you can follow the basic principles outlined in the SwiftUI essentials session. Here are the steps:

1. Start with a View: In SwiftUI, views are the basic building blocks of user interfaces. Every pixel you see on screen is defined by a view. Views in SwiftUI are declarative, compositional, and state-driven.

2. Declarative Syntax: You describe what view you want in your user interface, and SwiftUI produces the result. For example, you can create text, images using SF symbols, and controls like buttons. Here is a simple example of a horizontal stack containing a label, a spacer, and a text:

   struct ContentView: View {
       var body: some View {
           HStack {
               Label("Label", systemImage: "star")
               Spacer()
               Text("End Text")
           }
       }
   }
   

3. Compositional Views: SwiftUI allows you to compose views together. For example, you can use containers like HStack, VStack, and ZStack to arrange your views. Here is an example of a vertical stack:

   struct ContentView: View {
       var body: some View {
           VStack {
               Text("Hello, World!")
               Text("Welcome to SwiftUI")
           }
       }
   }
   

4. State-Driven Views: SwiftUI views are driven by state. You can use state properties to manage the data that your views display. For example, you can create a button that updates a text view when tapped:

   struct ContentView: View {
       @State private var count = 0
   
       var body: some View {
           VStack {
               Text("Count: \(count)")
               Button("Increment") {
                   count += 1
               }
           }
       }
   }
   

5. Custom Views: You can also create custom views by composing existing views and adding your own styles and behaviors. For example, creating a custom card view:

   struct CardView: View {
       var title: String
       var subtitle: String
   
       var body: some View {
           VStack {
               Text(title)
                   .font(.headline)
               Text(subtitle)
                   .font(.subheadline)
           }
           .padding()
           .background(Color.gray.opacity(0.2))
           .cornerRadius(10)
       }
   }
   

For more detailed information and examples, you can refer to the SwiftUI essentials session from WWDC 2024.