ios - 使用偏移时导航栏项目可点击区域切割

Question

在 SwiftUI 中，考虑这个导航栏:

下面是尾部 .navigationBarItems 的声明方式:

HStack(spacing: 0) {
    Button(action: {
        self.addListModal = true
    }, label: {
        NavBarImage(image: "plus")
    })
    // more buttons here

这是 NavBarImage 结构:

struct NavBarImage: View {
    var image: String

    var body: some View {
        ZStack {
            Rectangle().foregroundColor(Color.red).frame(width: 40, height: 45)
            Image(systemName: image)
        }
    }
}

红色在那里，所以我可以看到每个按钮的可点击区域应该是什么。这个带有 Rectangle 想法的 ZStack 是作为一种让图像更容易点击的方式介绍给我的。

现在，我想将项目向右移动，以便它们更符合下面的列表内容。我尝试将 .offset 添加到我的 HStack:

HStack(spacing: 0) {
    // buttons
}
.offset(x: 15, y: 0)

产生这个结果:

所以这对我来说看起来很完美。然而，问题是最右边的导航按钮的可点击区域在右侧被截断了。

我在这里用绿色说明了可点击区域的切断:

所述按钮的绿色区域不再记录任何点击。

我尝试在 HStack 上使用负尾随 .padding，但没有任何区别。有没有办法可以纠正这个问题，也许是通过在我的内容 View 的 init() 中使用一些 UINavigationBar 声明？

编辑:

我只是尝试将 .accessibility 添加到 Rectangle 中，结果是一样的:

Rectangle().foregroundColor(Color.red)
    .accessibility(label: Text(image))
    .frame(width: 40, height: 45)

Answer 1

尝试改用

HStack(spacing: 0) {
    // buttons
}
.padding(.trailing, 15)