如何制作带有图像的按钮？

Posted 2023-02-24

【中文标题】如何制作带有图像的按钮？

【英文标题】：How can I make a button with an image work?

【发布时间】：2021-06-26 05:20:57

【问题描述】：

我想用我自己的图像制作一个按钮。但是当我尝试它时它不起作用。我想要按钮做的是打开 URL。尽管尝试了其他方法，但我不确定出了什么问题。

代码是用 SwiftUI 编写的。此外，我的代码中没有显示错误。请提供任何线索。

    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()
    

【问题讨论】：

欢迎来到 SO。请包含代码，而不是代码图像，这些代码不能被屏幕阅读器复制/粘贴、搜索、阅读等。您确定您的图片资源中有名为“git”的图片吗？

另外，请添加错误或问题。

已更新。我的代码中没有错误。图像已显示，但按钮不起作用。

什么不起作用？图像不显示？网址无效？

offset 让我想知道您是否真的在点击Button。如果删除偏移量会怎样？

【参考方案1】：

设置偏移量并框出侧边按钮

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

问题是您正在为按钮内部的图像视图设置框架和偏移量，但您的按钮位置没有改变，它仍然具有原始框架。您可以通过为按钮提供背景颜色来进行检查。

【讨论】：

非常感谢！我一直在弄清楚为什么它不起作用......以及它是如何工作的！谢谢

@Conqueriings 很高兴为您提供帮助。如果对您有帮助，您可以接受答案。