trace tw
trace tw

Reputation: 327

how let button go to bottom right corner?

As the picture shows, I want the button to be in the bottom right corner.

https://i.imgur.com/GiVor8a.png

    var body: some View {
        ZStack {
            HStack {
                Color.black
            }

            Button(action: {}) {
                HStack {
                    Image(systemName: "rectangle.grid.1x2.fill")
                }
                .padding()
                    .background(Color.yellow)
                    .mask(Circle())
            }.frame(width: 60, height: 60)
            .border(Color.red, width: 1)
        }
    }

Upvotes: 6

Views: 9114

Answers (1)

Ketan Odedra
Ketan Odedra

Reputation: 1283

You can use Spacer() for that,

Here is Your Code :

ZStack {
            HStack {
                Color.black
            }

            VStack(alignment:.trailing) {
                Spacer()
                HStack {
                    Spacer()
                    Button(action: {}) {
                        HStack {
                            Image(systemName: "rectangle.grid.1x2.fill")
                        }
                        .padding()
                            .background(Color.yellow)
                            .mask(Circle())
                    }.frame(width: 60, height: 60)
                        .border(Color.red, width: 1)
                }
            }
        }

Upvotes: 13

Related Questions