a user profile screen in SwiftUI that includes an image, name, and a short bio, utilizing VStack, HStack, and Spacer for layout:

import SwiftUI

struct ProfileView: View {
    var body: some View {
        VStack {
            Image("profile_image") // Replace "profile_image" with your image asset name
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 150, height: 150)
                .clipShape(Circle())
                .padding(.top, 30)
            
            Text("John Doe")
                .font(.title)
                .fontWeight(.bold)
                .padding(.top, 20)
            
            Text("iOS Developer")
                .font(.headline)
                .foregroundColor(.gray)
                .padding(.top, 5)
            
            Divider()
                .padding(.vertical, 20)
            
            HStack {
                Text("Bio:")
                    .font(.headline)
                    .foregroundColor(.black)
                
                Spacer() // Pushes the following text to the right edge
                
                Text("Passionate about creating amazing apps with SwiftUI.")
                    .font(.body)
                    .foregroundColor(.black)
            }
            .padding(.horizontal, 20)
            
            Spacer() // Pushes all content to the top
            
            Text("Follow me on Twitter: @johndoe")
                .font(.footnote)
                .foregroundColor(.blue)
                .padding(.bottom, 20)
        }
        .padding()
    }
}

import SwiftUI

@main
struct ProfileApp: App {
    var body: some Scene {
        WindowGroup {
            ProfileView()
        }
    }
}

Explanation:

  1. ProfileView Struct:
    • Image: Displays a circular profile image with padding at the top.
    • Name and Role: Displays the user’s name as a title and their role as a subtitle.
    • Divider: Separates the name and bio sections with padding above and below.
    • Bio Section: Uses HStack to display “Bio:” text and the user’s bio, aligned horizontally with Spacer pushing the bio text to the right edge.
    • Spacer: Pushes all content to the top, ensuring the bio section stays near the bottom.
    • Footer: Displays a footer text with a link to follow the user on Twitter.
  2. ProfileApp Struct:
    • Sets up the main window of the app with ProfileView as its root view.

How to Use:

  • Replace "profile_image" with the name of your own image asset.
  • Copy the code into a new SwiftUI project in Xcode.
  • Run the project on a simulator or device to see the profile screen layout.