自定义导航栏

隐藏体系导航栏,运用自定义按钮放置在导航栏上。

  1. use .navigationBarBackButtonHidden() modifier to hide the system Back button
  2. add @Environment(.presentationMode) var presentation to the View, so it can be dismissed in code
  3. add a replacement back button to the navigation bar which performs self.presentation.wrappedValue.dismiss()

这个计划最大的问题是掩盖体系规范的导航回来按钮。因而默许的侧滑回来手势和长按回来按钮显现层级的行为就没有了。

完整代码:

struct DetailView: View {
    @Environment(.dismiss) private var dismiss
    var body: some View {
        Text("Detail View")
            .navigationTitle("Detail Title")
            .navigationBarBackButtonHidden(true)            
            // 1
            .toolbar {
                // 2
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {
                        // 3
                        dismiss()
                    } label: {
                        // 4
                        HStack {
                            Image(systemName: "arrow.backward")
                            Text("Custom Back")
                        }
                    }
                }
            }
    }
}

修正 UINavigationBar appearance

SwiftUI 没有提供接口修正导航栏回来按钮的接口。

但是目前 SwiftUI 的导航运用的是 UIKit 的 NavigationBar,因而能够运用 appearance 进行设置:

UINavigationBar.appearance().backIndicatorImage = UIImage(systemName: "arrow.backward")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(systemName: "arrow.backward")

方位

经过这种方式无法调理图片的方位,因而想要调理 padding 只能经过图标的素材图片里增加空白边距实现。

在这之前需求先阐明一下默许回来图标的方位。默许的是间隔左面 8,右边6,具体底部11。最小高度18。

SwitUI Tips:修正导航栏回来图标

如果高度改变,间隔底部的边距是固定的。

SwitUI Tips:修正导航栏回来图标

SwitUI Tips:修正导航栏回来图标