54Hex
54Hex

Reputation: 57

How can I make a button with an image work?

I want to make a button, using my own image. But when I tried it it doesn't work. What I wanted the button to do is to open the URL. I'm not sure what went wrong despite trying other methods.

Code is written in SwiftUI. Also, there are no errors shown in my code. Any leads, please.

    import SwiftUI

struct ContentView: View {
    
    @Environment(\.openURL) var openURL
    
    var body: some View {
        
        ZStack {
            
            Text("Whoami?")
                .font(.system(size: 35.0, weight: .bold, design: .rounded))
                .offset(x: -110, y: -360)
            
            //name
            LinearGradient(gradient: Gradient(colors: [Color.white, Color.black]), startPoint: .bottomLeading, endPoint: .trailing)
                .mask(Text("text").font(Font.system(size: 30)).fontWeight(.semibold))
                .frame(width: 370)
                .offset(x: 75, y: -280)
            //bio
            LinearGradient(gradient: Gradient(colors: [Color.white, Color.black]), startPoint: .bottomLeading, endPoint: .trailing)
                .mask(Text("text").font(Font.system(size: 25)).fontWeight(.semibold))
                .frame(width: 350)
                .offset(x: -20, y: -100)
            //image
            Image("Keb")
                .resizable()
                .frame(width: 125, height: 125)
                .clipShape(Circle())
                .shadow(radius: 10)
                .overlay(Circle().stroke(Color.black, lineWidth: 5))
                .offset(x: -120, y: -250)
            
            //github
            
            Button(action:  {
                openURL(URL(string: "https://github.com/")!)
                print("tapped")
            }) {
                Image("git")
                    .resizable()
                    .offset(x: 10, y: -230)
                    .frame(width: 50, height: 50)
                    
            }
            
            //ig
            Button(action: {
                openURL(URL(string: "https://instagram.com/")!)
                print("tapped")
            }) {
                Image("ig2")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .offset(x: 70, y: -225)
   
            }
 
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Upvotes: 0

Views: 54

Answers (1)

Raja Kishan
Raja Kishan

Reputation: 18904

Set offset and frame out side button

Button(action:  {
    openURL(URL(string: "https://github.com/")!)
    print("tapped")
}) {
    Image("git")
        .resizable()
}
.offset(x: 10, y: -230) // <- Here
.frame(width: 50, height: 50) // <- Here

The issue is you are setting frame and offset to image view which is inside the button but your button position is not changing it still has an original frame. You can check by giving background color to the button.

Upvotes: 1

Related Questions