Change the position of a shape

Question

Created Dec ’21

Replies 5

Boosts 0

Views 1.9k

Participants 2

Hi everyone, do you know the command to change the position of a shape. I want to change the position of a Rectangle and draw it to the right, this was the code that I tried: But it shows me that blue frame around and when I click on it (since it is a button) I can’t click outside that frame. Please help me…

Thank you in advance ;)

Answered by Claude31 in 699523022

I tested this that seems to give the result you expect:

                            Button {
                                
                            } label: {
                                Rectangle()
                                    .frame(width: 180, height: 80)
                                    .foregroundColor(Color(.systemBlue))
                                    .opacity(0.5)
                                    .cornerRadius(60)
//                                    .position(x: 90, y: 44)
                                
                            }
                            .frame(width: 180, height: 80)
                            .position(x: 90, y: 44)

Button frame.png

However, clicking on label: { does not give the right frame…

Thanks to tell if there is still a problem (then please explain precisely what you'd expect and what you get) ; don't forget to close the thread if that works.

Boost

Answer 1

Claude31 OP

Dec ’21

Not sure to understand the question.

Which rectangle ? The rounded blue one is the one you have defined.

When you change position (x: 250), rectangle moves to the right.

Could you post the compete code (in code, not as a screen capture).

May be what you want is set the frame on the Label, not the Rectangle ?

            Button {

            } label: {
                Rectangle()
                    //                   .frame(width: 240, height: 90)
                    .foregroundColor(Color(.systemBlue))
                    .opacity(0.5)
                    .cornerRadius(60)
                    //                    .position(x: 125.5, y: 155)
            }
            .frame(width: 240, height: 90, alignment: .center)

0

Answer 2

Balvir-255 OP

Dec ’21

Here's the code, it isn't easy to explain... but if you copy/paste my code you'll notice that there is a frame around the rounded rectangle that I've created and that frame isn't aligned with the "rounded rectangle" so when I try to click on the rounded rectangle, because it is a button, I can't click on any side of it, the click works only if I touch the part that covers the frame. It is clear, now? Don't worry if you try to paste my code, you'll notice that there is something that isn't working.

                           GridItem(.flexible()),
                           GridItem(.flexible())]

struct ContentView: View {
    var body: some View {

        GeometryReader { geometry in
            VStack{
                Spacer()
                ZStack {
                    LazyVGrid(columns: columns) {
                        Group {
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                        }
                        Group {
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            Circle()
                                .frame(width: 100, height: 100)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                            
                            Rectangle()
                                .frame(width: 200, height: 80)
                                .foregroundColor(Color(.systemBlue))
                                .opacity(0.5)
                                .cornerRadius(60)
                                .position(x: 114, y: 55)
                            Circle()
                        }

                    }
                }

                Spacer()
            }
        }
        
    }
}

0

Answer 3

Balvir-255 OP

Dec ’21




let columns: [GridItem] = [GridItem(.flexible()),
                           GridItem(.flexible()),
                           GridItem(.flexible()),
                           GridItem(.flexible())]



struct ContentView: View {

    var body: some View {
            GeometryReader { geometry in

                    VStack{
                        
                        Spacer(minLength: 290)
                      

                        ZStack {
                        
                            LazyVGrid(columns: columns) {
                                Group {

                                    Button {
                                        
                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)
                                    }

                                    Button {
                                        
                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)
                                    }

                                    Button {
                                        
                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)
                                    }

                                    Button {

                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)
                                    }

                                    Button {

                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)
                                    }

                                    Button {

                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)
                                    }
                            }

                            Group { 

                                Button {       

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }

                                Button {

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }

                                Button {

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }

                                Button {

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }
                                
                                Button {                                  

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }

                                Button {

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }

                                Button {
                    
                                } label: {
                                    Rectangle()
                                        .frame(width: 180, height: 80)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                        .cornerRadius(60)
                                        .position(x: 90, y: 44)

                                }  
                                Spacer()                             
                                Button {

                                } label: {
                                    Circle()
                                        .frame(width: 90, height: 90)
                                        .foregroundColor(Color(.systemBlue))
                                        .opacity(0.5)
                                }

                                    Button {

                                    } label: {
                                        Circle()
                                            .frame(width: 90, height: 90)
                                            .foregroundColor(Color(.systemBlue))
                                            .opacity(0.5)

                                        }
                                }
                            }
                        }
                    }
                        Spacer()
                }
            }
        }

0

Answer 4

Claude31 OP

Dec ’21

Accepted Answer

I tested this that seems to give the result you expect:

                            Button {
                                
                            } label: {
                                Rectangle()
                                    .frame(width: 180, height: 80)
                                    .foregroundColor(Color(.systemBlue))
                                    .opacity(0.5)
                                    .cornerRadius(60)
//                                    .position(x: 90, y: 44)
                                
                            }
                            .frame(width: 180, height: 80)
                            .position(x: 90, y: 44)

Button frame.png

However, clicking on label: { does not give the right frame…

Thanks to tell if there is still a problem (then please explain precisely what you'd expect and what you get) ; don't forget to close the thread if that works.

0

Answer 5

Balvir-255 OP

Dec ’21

Yes now it is working!! Thanks very very much for sharing your time with me to resolve this problem 🥰

0