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 重新模拟一个返回按钮放置在相同位置，但是这样做会失去默认的边缘滑动返回效果。
- 使用
.navigationBarBackButtonHidden(true)隐藏关闭页面的返回按钮 - 使用
toolbar添加一个导航工具栏 - 在
toolbar中添加ToolbarItem按钮，设置.navigationBarLeading放在默认返回按钮位置 - 自定义
ToolbarItem返回按钮的外观样式 - 使用
.dismiss()实现返回上一页效果- iOS 15 及以上版本使用
@Environment(\.dismiss) private var dismiss - iOS 15 以下版本使用
@Environment(\.presentationMode) var presentationMode
- iOS 15 及以上版本使用
示例代码
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("返回")
}
}
}
}
}
} 本文自 https://www.codeun.com 发布，相应代码均自主编写并严格审阅和测试，完整代码中包含丰富的学习笔记和使用方式、实用技巧。
· 如若转载，请注明出处：https://www.codeun.com/archives/1057.html ·