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

解决方案示例：

Answer 1

如果您想要导航栏中的按钮，则无论您尝试将图像的框架设置在什么位置，它都只能在导航栏中单击，并且 NavigationView 确定该高度，无论孩子是什么 -按钮，在这种情况下 - 可能需要。

历史上不支持改变 NavigationBar 的高度：见 cmets here

现在你可以用 ZStacks 做一些时髦的事情——在导航视图的顶部放一个按钮，也许——但你不能在导航栏内放置任何大于设置高度的东西。

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

我希望这会有所帮助。