SwiftUI 导航栏项目中难以点击的按钮

Posted 2023-02-24

【中文标题】SwiftUI 导航栏项目中难以点击的按钮

【英文标题】：Hard to tap button in SwiftUI navigation bar items

【发布时间】：2020-03-03 19:55:27

【问题描述】：

我有一个 SwiftUI NavigationView 和一个 Button 作为领先的导航栏项目。似乎只有当用户点击那个小Image 时才会触发按钮操作。我可以在不影响导航栏高度的情况下将可点击区域变大吗？

我尝试将.frame 添加到Image，但这会使导航栏太大。

import SwiftUI

struct ContentView: View 
    var body: some View 
        NavigationView 
            Text("Foo")
                .navigationBarTitle(Text("Title"), displayMode: .inline)
                .navigationBarItems(leading:
                    HStack 
                        Button(action: 
                            print("tapped")
                        ) 
                            Image(systemName: "info.circle")
                        
                    )
            
    

【问题讨论】：

查看原因及解决方法here

或者可以使用.imageScale(.large)和/或.padding()帮助？

您可以使用.contentShape(Rectangle()) 来保留大小，但让点击框更大。

@cbjeukendrup .imageScale(.large) 为我工作。你可以把它作为一个答案。谢谢。

【参考方案1】：

（其中一个）以下修饰符可能会有所帮助：

.imageScale(.large)

来自 SFSymbols 的图像具有三种尺寸：

.small 用于内联文本时 .medium 用作图标 .large 用作导航栏或底部栏中的按钮

---

.padding()

在图像周围添加填充。填充也应该是可点击的。

【讨论】：

如何解决造成的差距？这不是“默认”位置...

@LorisFoe 你的意思是在使用padding 时？我想我必须更多地了解你的具体情况才能给出一个好的答案。也许.offset(x: CGFloat, y: CGFloat) 可以做点什么？

只需创建一个导航视图并输入.navigationBarItems(trailing : 和Image(systemName: "plus").imageScale(.large).padding()，您就会看到我所说的错误。是的，也许偏移量可以起作用，但是 x 是多少？我们将要收回的默认填充值是多少...？

@LorisFoe 我明白你的意思。您可以考虑以下几点： 1. only .imageScale(.large) 并离开填充物可能已经足够了。 2. 您可以仅在指定的边缘添加填充（例如：.padding([.top, .leading, .bottom])。3.您可以设置指定数量的填充并使用偏移量，如下所示：@ 987654333@。您还可以查看this page 了解更多示例。希望对您有所帮助！

加号图标的问题是我真的需要在每一边进行填充，否则人们必须在加号的蓝色部分点击像素精度。但是您对填充和偏移相同值的破解似乎是一个很好的解决方案。谢谢

【参考方案2】：

试试这个

struct ContentView: View 
    var body: some View 
        NavigationView 
            Text("Foo")
                .navigationBarTitle(Text("Title"), displayMode: .inline)
                .navigationBarItems(leading:
                    HStack 
                        Button(action: 
                            print("tapped")
                        ) 
                            Image(systemName: "info.circle").imageScale(.large) //Here is the change in image scale property
                        
                    )
            
    

快乐编码...