SwiftUI 按钮的可触摸区域

Question

我尝试增加NavigationView内按钮的可触摸区域，即使区域变大也不起作用。我的代码如下：

var body: some View {
NavigationView {
    List(taskStore.tasks) { tasks in
        Text(tasks.name)
    }
.navigationBarTitle("Tasks")
.navigationBarItems(
    trailing: Button(action: { 
    self.modalIsPresented = true 
}){
     Image(systemName: "plus")
    .frame(width: 200, height: 200)
    .contentShape(Rectangle())
    .background(Color.yellow)
})}

翻译结果：

绿色区域可触摸，红色区域不可触摸。

我在网上找到了一个解决方案。但是这个解决方案只适用于不在NavigationView中的按钮。因此，如果我将按钮放在“某个视图”中，如下所示，则可以按照解决方案正常工作:

var body: some View {
Button(action: {self.modalIsPresented = true} ) {
Text("Default padding")
.padding(50)
.background(Color.yellow)
}}}

但是当我把按钮放在像我的代码中的导航视图中时，黄色区域是不可触摸的。如何使整个黄色区域（红框）可以像解决方案一样被触摸？谢谢:D

解决方案示例：

- user4909608

Answer 1

如果您想在导航栏中添加一个按钮，那么无论您尝试如何设置图像的框架，它只能在导航栏内可点击，并且NavigationView决定了高度，无论子元素（本例中的按钮）想要什么。

历史上，更改NavigationBar的高度是不被支持的：请参见这里的评论。

现在，你可以通过ZStacks来实现某些有趣的效果，例如将一个按钮放在导航视图的上方，但是您将无法在导航栏中放置大于设定高度的任何内容。

- SCooney

---

我想知道这个问题是否已经修复？是否有可能增加SwiftUI导航栏中按钮的点击区域？ - user4909608

Answer 2

如果您使用`.contentShape(Rectangle())`修饰符，我认为您可以在`.navigationBarItems(trailing:)`中找到所需的效果。或者，您可以使用其他形状来满足您的需求。然后根据需要调整`.frame`的大小以调整可点击区域。以下是快速的代码示例。

struct ContentView: View {
var body: some View {
    NavigationView {
        List {
            Text("Hello, World")
        }
    .navigationBarTitle(Text("Items"))
        .navigationBarItems(trailing: Button(action: {
            print("Do Something")
        }, label: {
            Image(systemName: "plus")
                .frame(width: 100, height: 50)
                .contentShape(Rectangle())
                .border(Color.red, width: 3)
                .background(Color.gray)
        }))
    }
  }
}

我希望这可以帮到你。

- Dan O'Leary

---

更新问题以反映您的答案。似乎不起作用。 - user4909608

非常抱歉。我已经花了45分钟来处理这个问题，你是对的。无论如何，我似乎无法在大于50个点的情况下使可点击区域垂直激活。我唯一的猜测是为了保留空间给.navigationBarTitle。但这只是一个猜测。我更新了我的代码以反映你使用系统图像的方式。也许其他人可以提供帮助。 - undefined

非常感谢您的尝试。我也花了类似的时间，但无法解决问题。我猜这可能是SwiftUI的一个bug，或者我需要增加导航栏的高度之类的。祝您好运。 - user4909608