使用 SwiftUI 移动带有图像的按钮

Posted 2023-02-24

【中文标题】使用 SwiftUI 移动带有图像的按钮

【英文标题】：Moving button with image with SwiftUI

【发布时间】：2020-06-24 20:35:20

【问题描述】：

我是第一次使用 SwiftUI，正在努力创建一个页面。在提供的屏幕截图中，我有一个按钮，一旦按下该按钮就应该移动到另一个页面，这是绿色突出显示的区域，但红色突出显示的是您必须单击才能进入导航页面的位置。我觉得它与 ZStack 有关，但我似乎无法弄清楚。

Button(action: 
                self.isActive = true
            ) 
            ZStack 
                Image(uiImage: #imageLiteral(resourceName: "Group 897")).renderingMode(.original).frame(width: 30, height: 60).padding(.top, 16).offset(x:103, y:-105)
               
            
         

基本上我的问题是：如何使按钮触发器移动到图像移动到的位置？

SwiftUI screenshot

【参考方案1】：

我认为这是由您的.offset(x:103, y:-105) 引起的，您更改了按钮的视觉位置（按钮的图像），但可点击的仍然停留在同一位置。

尝试使用 Stack 架构来定位您的按钮，例如：

VStack 
   HeadingBar() // your heading bar
   HStack  
     Spacer() // move you button to trailing of screen, then just indent with padding
     Button().padding(.trailing, 10)
    // end of HStack
   RemainingView() // rest of your page
 // end of VStack

如果你想使用偏移量，你必须这样做：

Button(action: 
                self.isActive = true
            ) 
                Image("yourImage")
            
            .offset(x:103, y:-105)

但 Stack 架构更适合布局，因为您的应用在所有设备上看起来都相似..

【参考方案2】：

意识到我的错误。我不得不将偏移量从图像上移到按钮上。