Question 68590 in IOS Swift Question posted in
The official documentation can be found here.

SwiftUI View is taking exceeding edges – Ios swift

I am learning SwiftUI and was trying to replicate an app. I ran into a problem where the view is taking up space outside the frame as well.
It looks like this:
screenshot

My code for the view is:

struct LessonsScreen: View {
    var body: some View {
        VStack (alignment: .leading) {
            HStack {
                Image(systemName: "arrow.left")
                    .font(.system(size: 30))
                Spacer()
                Image(systemName: "slider.horizontal.3")
                    .font(.system(size: 30))
            }
            
            Text("A2 - Elementary")
                .font(.system(size: 28, weight: .semibold))
                .padding()
            
            LessonCompletion(lessonNum: 1, text: "How are you?", color: .purple)
            
            Image("discussion")
                .cornerRadius(20)
                .frame(width: UIScreen.main.bounds.width, alignment: .center)
            
            LessonCompletion(lessonNum: 2, text: "Pronunciation", color: .green)
            LessonCompletion(lessonNum: 3, text: "Demonstrative pronouns", color: .red)
            LessonCompletion(lessonNum: 4, text: "Present continuous", color: .yellow)
            
            Button(action: {}, label: {
                Text("Get started")
                    .foregroundColor(.white)
                    .frame(width: UIScreen.main.bounds.width - 150, height: 70, alignment: .center)
                    .background(Color.black)
                    .cornerRadius(10)
                    .frame(width: UIScreen.main.bounds.width, alignment: .center)
                    .padding()
            })
        }
    }
}

Can anyone tell me where I messed up the formatting?

Tags:

2

Answers


  1. 0

    If you like to align the button in center in native SwiftUI way, you can use view modifier Spacer() inside HStack() instead of .frame, like this: (and same with ‘discussion’ Image)

    ...
            Button(action: {}, label: {
            HStack{
                Spacer()
                Text("Get started")
                    .foregroundColor(.white)
                    .frame(width: UIScreen.main.bounds.width - 150, height: 70, alignment: .center)
                    .background(Color.black)
                    .cornerRadius(10)
                    .padding()
                Spacer()
            }
        })

...
    Login or Signup to reply.
  2. 0

    In your button replace

       .frame(width: UIScreen.main.bounds.width, alignment: .center)

    with

       .frame(maxWidth: .infinity, alignment: .center)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search