CODEWITHSUNDEEP
swiftbuttonswiftui
SwiftDeveloper
SwiftDeveloper

Reputation: 7370

SwiftUi bottom left button dont show

I have some SwiftUI function. I want to show my button in bottom left, but it shows top left.

struct NewRecordButton: View {

    var body: some View {

        ZStack (alignment: .bottomTrailing) {
            HStack (alignment: .bottom) {
                Spacer()
                Button(action:  { },
                       label: {
                           Text("⌂")
                               .font(.system(.largeTitle))
                               .frame(width: 35, height: 30)
                               .foregroundColor(Color.white)
                               .padding(.bottom,4)
                })  .background(Color.black)
                    .cornerRadius(10)
                    .shadow(color: Color.black.opacity(0.3),
                            radius: 3,
                            x: 3,
                            y: 3)
            }
        }
    }
}

Any ideas?

Upvotes: 0

Views: 1148

Answers (2)

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119302

Although it's possible, but you should try NOT to use dummy views to arrange other views!

For pushing a view down, you should use a VStack and a Spacer together 

VStack { 
    Spacer()
    // bottomView
}

So it should be like:

ZStack {
    VStack {
        Spacer() // This will push it down, since it is in a `VStack`
        HStack {

            Button("⌂") {}
                .font(.largeTitle)
                .frame(width: 35, height: 30)
                .foregroundColor(.white)
                .padding(.bottom, 4)

                .background(Color.black)
                .cornerRadius(10)
                .shadow(color: Color.black.opacity(0.3), radius: 3, x: 3, y: 3)

            Spacer() // This will push it left, since it is in a `HStack`
        }
    }
}

Upvotes: 1

Asperi
Asperi

Reputation: 257711

Here is possible variant

ZStack (alignment: .bottomTrailing) {
    Rectangle().fill(Color.clear)
    HStack (alignment: .bottom){
        Button(action:  {

        }, label: {
            Text("⌂")
                .font(.system(.largeTitle))
                .frame(width: 35, height: 30)
                .foregroundColor(Color.white)
                .padding(.bottom,4)


        })
            .background(Color.black)
            .cornerRadius(10)
            .shadow(color: Color.black.opacity(0.3),
                    radius: 3,
                    x: 3,
                    y: 3)

        Spacer()
    }
}

Upvotes: 2

Related Questions