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

Question

我有一个SwiftUI的NavigationView，其中有一个Button作为导航栏的左侧项。似乎只有当用户点击那个小的Image时，按钮的动作才会触发。我能否使可点击区域更大，而不影响导航栏的高度？

我尝试为Image添加.frame，但这使得导航栏变得太大。

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")
                        }
                    })
            }
    }
}

- Kristoffer Jälén

---

在此处查看原因和解决方案。链接 - Asperi

或者使用.imageScale(.large)和/或.padding()会有帮助吗？ - cbjeukendrup

你可以使用.contentShape(Rectangle())来保持原始尺寸，同时扩大点击区域。 - sfung3

@cbjeukendrup。.imageScale(.large) 对我有用。你可以把它作为答案。谢谢。 - Kristoffer Jälén

Answer 1

以下任一修饰词都可以帮助：

.imageScale(.large)

SFSymbols 的图像有三种尺寸：

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

---

.padding()

在图像周围添加填充。填充区域还应可点击。

- cbjeukendrup

---

你如何解决所创建的间隙？它不是“默认”位置... - LetsGoBrandon

@LorisFoe 你是指在使用 padding 时吗？我认为我需要了解更多关于你的特定情况才能给出一个好的答案。也许 .offset(x: CGFloat, y: CGFloat) 可以做些什么？ - cbjeukendrup

只需创建一个导航视图，并在 .navigationBarItems(trailing : 中添加 Image(systemName: "plus").imageScale(.large).padding()，您就会看到我所说的错误。也许偏移量可以解决问题，但是 x 是多少？我们需要撤回的默认填充值是多少...？ - LetsGoBrandon

@LorisFoe 我明白你的意思。你可以考虑以下几点：1.也许只需要使用.imageScale(.large)，不需要添加padding。2.你可以仅在指定的边缘上添加padding（例如：.padding([.top, .leading, .bottom])）。3.你可以设置一个指定数量的padding并使用偏移量，像这样：.padding(8.0).offset(x: 8.0)。你还可以查看这个页面获取更多示例。希望这有所帮助！ - cbjeukendrup

加号图标的问题在于我真的需要两侧都有填充，否则人们必须在加号蓝色部分进行像素精确的点击。但是你的填充和偏移相同值的hack似乎是一个不错的解决方案。谢谢 - LetsGoBrandon

使用填充和偏移将导航栏按钮放在视觉上正确的位置，但我发现如果您在屏幕的最边缘（在填充/偏移区域）轻击它仍然不会被注册为轻击。似乎在SwiftUI中，可轻敲的导航栏内容在屏幕的极右边有一个硬性限制。我在这里看到其他人记录了这种行为：https://dev59.com/U1MH5IYBdhLWcg3wpgtd - Jeremy

Answer 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
                        }
                    })
            }
    }
}

编程愉快...

- bhargav K