站点图标 Codeun

SwiftUI 中自定义导航栏返回、后退按钮

Codeun

SwiftUI 暂时（Xcode 14，iOS 16）还没有原生的方法来自定义导航栏返回按钮的外观样式，我们可以通过使用 UIKit 的的方式做一点修改。

使用 UINavigationBar.appearance() 全局修改

例如下方代码，在App入口处设置，将更改所有 UINavigationBar 的默认返回图标

@main
struct CodeunDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onAppear {
                    UINavigationBar.appearance().backIndicatorImage = UIImage(systemName: "arrow.backward")
                    UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(systemName: "arrow.backward")
                }
        }
    }
}

单独设置页面的返回按钮

因为目前没有合适的原生的方法来自定义，这里建议关闭掉默认的导航栏返回，使用 toolbar 重新模拟一个返回按钮放置在相同位置，但是这样做会失去默认的边缘滑动返回效果。

示例代码

import SwiftUI

struct IndexView: View {
    
    @Environment(\.dismiss) private var dismiss
    // iOS 15 以下版本使用
    // @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("Hello, World!")
        }
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button {
                    dismiss()
                    // iOS 15 以下版本使用
                    // presentationMode.wrappedValue.dismiss()
                } label: {
                    HStack {
                        
                        Image(systemName: "arrow.backward")
                        Text("返回")
                    }
                }
            }
        }
    }
}
退出移动版