How to add text on button with Image-CodePudding

enter image description here

I'm having trouble adding text to the bottom of a button. Each time the inscription is in the center and I have to have it at the bottom as in the picture

struct Main_view: View {
    var body: some View {
        ZStack{
            Color(App_Color.background_color)
                .edgesIgnoringSafeArea(.all)
            //ZStack{
                Button (action: {})
                {
                    VStack{
                        ZStack{
                            VStack{
                                Image("Image")
                                    .resizable()
                                    .frame(width: 120, height: 120)
                                    .cornerRadius(30)
                                Text("ZWIERZĘTA")
                                    .foregroundColor(Color.orange)
                                    .bold()
                                    .padding(-30)
                                    //.font(.custom("AmaticSC-Regular", size: 15))
                            }
                            
                        }
                    }
                }
            //}
        }
    }
}

enter image description here`

Only how it works when I give .padding(-30). is there any solution to this problem?

CodePudding user response：

You can use .offset(y: -30)

struct Main_view: View {
    var body: some View {
        ZStack{
            Color(App_Color.background_color)
                .edgesIgnoringSafeArea(.all)
            //ZStack{
                Button (action: {})
                {
                    VStack{
                        ZStack{
                            VStack{
                                Image("Image")
                                    .resizable()
                                    .frame(width: 120, height: 120)
                                    .cornerRadius(30)
                                Text("ZWIERZĘTA")
                                    .foregroundColor(Color.orange)
                                    .bold()
                                    .offset(y: -30) //---> here
                                    //.font(.custom("AmaticSC-Regular", size: 15))
                            }
                            
                        }
                    }
                }
            //}
        }
    }
}

CodePudding user response：

Try below code:

   Button (action: {})
    {
        VStack{
            ZStack{
                VStack{
                   Image("Image")
                        .resizable()
                        .frame(width: 120, height: 120)
                        .cornerRadius(30)
                }
            }
            .overlay( Text("ZWIERZĘTA")
                        .foregroundColor(Color.orange)
                        .bold(), alignment: .bottom)
        }
    }