导航栏项目到屏幕边缘

Question

问题

添加自定义导航按钮会限制按钮的可触摸区域，从而使按下变得更加困难，从而降低用户体验。我希望 V 形的左侧有一些空间，但它不会延伸到前缘。我也不想添加填充，因此 V 形更靠右。

更详细地了解我所尝试的...

内置后退按钮

• 转到屏幕边缘
• 有文字（不想要）

通过工具栏项自定义后退按钮

已设置背景灰色以突出显示触摸区域

• 不会到达屏幕边缘
• 减少触摸面积，因此有时按到最左边的按钮会错过

    .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                AppBackButton(action: {
                    self.dismiss()
                })
                .background(.gray)
            }
        }

通过带有负填充的工具栏项目自定义后退按钮

• 看起来已经到了边缘
• 仍然不会拾取领先安全区之外的触摸事件

    .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                AppBackButton(action: {
                    self.dismiss()
                })
                .background(.gray)
                .padding(.leading, -16)
            }
        }

我不仅仅是想删除文本。理想情况下，我希望所有按钮图像都达到边框，但可触摸区域延伸到边缘，就像默认的后退按钮一样。我怎样才能实现这个目标？

Answer 1

我能够重现您的问题。

这确实看起来不一致，不可能创建一个与本机后退按钮行为相同的

ToolbarItem

。

作为解决方法，您可以使用叠加层：

struct Subview: View {

    @Environment(\.dismiss) private var dismiss

    var body: some View {
        VStack {
            Text("Subview")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .navigationBarBackButtonHidden()
        .overlay(alignment: .topLeading) {
            AppBackButton(action: {
                self.dismiss()
            })
            .background { Color.gray }
        }
//        .toolbar {
//            ToolbarItem(placement: .navigationBarLeading) {
//                AppBackButton(action: {
//                    self.dismiss()
//                })
//                .background(.gray)
//            }
//        }
    }
}