SwiftUI 按钮的可触摸区域

Posted 2023-02-24

【中文标题】SwiftUI 按钮的可触摸区域

【英文标题】：SwiftUI Touchable Area of a Button

【发布时间】：2020-02-29 00:46:13

【问题描述】：

我正在尝试增加 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

解决方案示例：

【参考方案1】：

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

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

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

【讨论】：

我想知道这是否已修复？是否可以在导航栏中增加 swiftUI Button 的 hitbox？

【参考方案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)
        ))
    
  

我希望这会有所帮助。

【讨论】：

更新了问题以反映您的答案。好像不行。

我很抱歉。在过去的 45 分钟里，我一直在努力，你是对的。我似乎无法在任何大于 50 点的情况下垂直激活可点击区域。我唯一的猜测是为 .navigationBarTitle 节省了空间。但这只是一个猜测。我更新了我的代码以反映您对系统映像的使用。也许其他人可以提供帮助。

也非常感谢您的尝试。我花了类似的时间，无法修复它。我假设这是一个 SwiftUI 错误，或者我需要增加导航栏的高度或其他东西。干杯。