「SwiftUI」页面自定义右滑关闭

隐藏NavigationBarBackButton时,实现右滑关闭页面

引言:现在的大多数iOS App都有右滑关闭页面的功能,众多iPhone用户也都习惯了这种操作

当使用系统自带的NavigationBarBackButton时可以很轻松实现这个功能,但系统自带的BackButton通常会带上个页面的Title,并且需求通常需要自定义NavigationBar,就需要隐藏系统自带的返回摁钮,这时右滑返回的功能也消失了,这非常头疼

1.先看使用系统返回摁钮时操作

代码:

swift 复制代码
import SwiftUI

//父页面
struct IndexView: View {
    var body: some View {
        NavigationView{
            VStack {
                NavigationLink {
                    ChildView()
                } label: {
                    Text("jump to ChileView")
                }
            }
            .navigationBarTitle("首页", displayMode: .inline)
        }
       
        
    }
}
//子页面
struct ChildView: View {
    var body: some View {
        VStack {
            Text("ChildView")
        }
        .navigationBarTitle("子页面", displayMode: .inline)
    }
        
}
ps:可以发现子页面的返回摁钮会显示父页面的title,这通常是不符合页面UI的需求,但此时是可以满足右滑跳转的
2.当隐藏掉返回Button时操作

代码:

swift 复制代码
import SwiftUI

//父页面
struct IndexView: View {
    var body: some View {
        NavigationView{
            VStack {
                NavigationLink {
                    ChildView()
                } label: {
                    Text("jump to ChileView")
                }
            }
            .navigationBarTitle("首页", displayMode: .inline)
        }
       
        
    }
}
//子页面
struct ChildView: View {
    @Environment(\.presentationMode) var presentionation  //点了确定后 让本页面关闭消失的变量
    var body: some View {
        VStack {
            Text("ChildView")
        }
        .navigationBarTitle("子页面", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(
           leading:
            Button(action: {
                self.presentionation.wrappedValue.dismiss()
            }, label: {
                Image(systemName: "chevron.left")
                    .foregroundColor(Color.black)
            })
        )
    }
        
}
ps:这时我们可以满足UI的需求和设计,但是右滑返回的功能跟着BackButton一起隐藏掉了,这时功能就出现了缺失

3.这时候只需要给UINavigationController添加额外的代理和方法即可实现

新增代理代码:

swift 复制代码
import SwiftUI

//右滑返回
extension UINavigationController: UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self
    }

    public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return viewControllers.count > 1
    }
}
原代码不变:
swift 复制代码
import SwiftUI

//父页面
struct IndexView: View {
    var body: some View {
        NavigationView{
            VStack {
                NavigationLink {
                    ChildView()
                } label: {
                    Text("jump to ChileView")
                }
            }
            .navigationBarTitle("首页", displayMode: .inline)
        }
       
        
    }
}
//子页面
struct ChildView: View {
    @Environment(\.presentationMode) var presentionation  //点了确定后 让本页面关闭消失的变量
    var body: some View {
        VStack {
            Text("ChildView")
        }
        .navigationBarTitle("子页面", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(
           leading:
            Button(action: {
                self.presentionation.wrappedValue.dismiss()
            }, label: {
                Image(systemName: "chevron.left")
                    .foregroundColor(Color.black)
            })
        )
    }
        
}
添加上这个extension后UINavigationControl就可以实现右滑返回,返回通过NavigationLink跳转到当前页面的上一个页面(fullScreenCover无法跳转返回),所以添加上这个代理就可以实现右滑返回并且能够满足UI页面设计
相关推荐
Lexiaoyao202 天前
SwiftUI 字体系统详解
swiftui·swift
1024小神3 天前
theos工具来编译xcode的swiftUI项目为ipa文件
macos·swiftui·xcode
东坡肘子4 天前
MCP 崛起与苹果的 AI 框架设想 | 肘子的 Swift 周报 #077
人工智能·swiftui·swift
YungFan5 天前
SwiftUI-国际化
ios·swiftui·swift
1024小神9 天前
xcode开发swiftui项目的时候,怎么调试ui占位和ui大小
ui·ios·swiftui
东坡肘子11 天前
给毛孩子照相 | 肘子的 Swift 周报 #076
swiftui·swift·apple
coooliang13 天前
【iOS】SwiftUI 路由管理(NavigationStack)
ios·swiftui·swift
东坡肘子18 天前
OpenAI 向美政府状告 DeepSeek:他不讲武德!| 肘子的 Swift 周报 #075
人工智能·swiftui·swift
东坡肘子25 天前
期待与失望的循环:苹果的 AI 困境与韧性 | 肘子的 Swift 周报 #074
人工智能·swiftui·swift
刘架构1 个月前
第1章:项目概述与环境搭建
ios·swiftui