SwiftUI Simple Screen example

Creating a simple screen in SwiftUI involves setting up a basic user interface with a few common elements. Here, I’ll guide you through creating a simple screen with a title, a text field, and a button.

1. Create a New SwiftUI Project:

• Open Xcode.
• Select “Create a new Xcode project.”
• Choose “App” and click “Next.”
• Enter your project name, select “SwiftUI” for the User Interface, and click “Next.”
• Choose a location to save your project and click “Create.”

2. Set Up the Simple Screen:

In the ContentView.swift file, you can define a simple SwiftUI screen. Below is an example of how you might set up a screen with a title, a text field, and a button:

import SwiftUI

struct ContentView: View {
 @State private var name: String = ""
 
 var body: some View {
 VStack {
   // Title
   Text("Welcome to SwiftUI")
   .font(.largeTitle)
   .padding()
 
   // Text Field
   TextField("Enter your name", text: $name)
   .textFieldStyle(RoundedBorderTextFieldStyle())
   .padding()
   
  VStack {
     // Button
     Button(action: {
       print("Button tapped! Name: \(name)")
     }) {
       Text("Submit")
       .padding()
       .background(Color.blue)
       .foregroundColor(.white)
       .cornerRadius(8)
     }

      // Button
      Button(action: {
          name = ""
          print("clear text field")
      }) {
          Text("Clear")
          .padding()
          .background(Color.blue)
          .foregroundColor(.white)
          .cornerRadius(8)
       }

    }
   }
   .padding()
 }
}

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 ContentView()
 }
}

Explanation

1. VStack: This is a vertical stack that arranges its children (title, text field, and button) vertically.
2. Text: This displays a static text (“Welcome to SwiftUI”) with a large font and some padding.
3. TextField: This allows user input. The @State property wrapper is used to keep track of the text field's input. The textFieldStyle modifier applies a rounded border style to the text field, and padding adds space around it.
4. HStack: This is a horizontal stack that arranges two buttons (Submit, Clear) horizontally.
5. Button: This creates a tappable button. The action closure is executed when the button is tapped, and in this case, it prints the entered name to the console. The button's label (the text inside the button) is styled with padding, a blue background, white text color, and rounded corners.
6. Button: This creates a tappable button. The action closure is executed when the button is tapped, and in this case, it clears the field name and print “clear text field” to the console. The button's label (the text inside the button) is styled with padding, a blue background, white text color, and rounded corners.
7. Padding: Padding is applied to the entire VStack to add space around all elements.

Running the App

1. Ensure your simulator is running (or connect a physical device).
2. Click the play button in Xcode to build and run the app.
3. You should see a simple screen with a title, a text field, and a button. Enter a name into the text field and tap the button to see the name printed in the Xcode console.
4. By tapping the Clear button will remove the text in the textfield and print “clear text field” to the console.

This simple SwiftUI screen demonstrates the basics of arranging views, handling user input, and responding to user actions. You can extend this example by adding more functionality and styling as needed.

Github

https://github.com/faraz-zafar/SwiftUI_Simple_Screen_Example