swiftui返回上个页面编程式返回presentationMode使用

我们使用NavigationLink实现导航到第二个页面的时候,配置了.navigationBarHidden(true),不显示子页面的导航菜单,而是我们自己定义了一个返回按钮操作,点击这个按钮才返回上个页面。这就用到了环境变量presentationMode的使用。

父页面配置

在父页面配置子页面的导航不显示,并使用NavigationLink实现页面跳转:

子页面配置

在子页面中使用Environment配置presentationMode变量绑定到变量presentationMode上,在点击返回按钮的时候,执行presentationMode.wrappedValue.dismiss()函数就可以返回到上个页面:

演示代码:

Swift 复制代码
//
//  ContentDetail.swift
//  SwiftBook
//
//  Created by song on 2024/7/10.
//

import SwiftUI

struct ContentDetail: View {
    // 评论内容
    @State var commit = ""
    // 轮播图
    @State var imgIndex = 1
    // 返回上个页面
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        // 内容详情
        VStack {
            // 头部
            HStack {
                Image(systemName: "chevron.left")
                    .font(.system(size: 24)).onTapGesture {
                        presentationMode.wrappedValue.dismiss()
                    }
                Image("xigua")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .mask(Circle())
                Text("负债老刘要上岸")
                Spacer()
                Button(action: {}, label: {
                    Text("关注")
                        .padding(.horizontal)
                        .padding(.vertical, 4)
                        .foregroundColor(.red)
                        .overlay {
                            RoundedRectangle(cornerRadius: 20).stroke(.red, lineWidth: 1)
                        }
                })
                Button(action: {}, label: {
                    Image(systemName: "square.and.arrow.up.fill")
                        .foregroundColor(.black)
                })
            }.padding(.horizontal)
            // 内容区域
            ScrollView(showsIndicators: false) {
                // 图片轮播
                TabView(selection: $imgIndex,
                        content: {
                            Image("xigua")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .tag(1)
                            Image("liulian")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .tag(2)
                            Image("hongyou")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .tag(3)
                        })
                        .tabViewStyle(.page)
                        .frame(height: 560)
                // 标题
                HStack {
                    Text("全世界最大的骗局就是山姆超市")
                        .font(.title2)
                        .padding(.horizontal)
                    Spacer()
                }
                // 评论内容
                HStack {
                    VStack {
                        ForEach(0 ..< 100) { index in
                            HStack {
                                Image("putao")
                                    .resizable()
                                    .frame(width: 30, height: 30)
                                    .mask(Circle())
                                VStack(alignment: .leading) {
                                    Text("自在\(index)")
                                        .foregroundStyle(.secondary)
                                    Text("别认为山姆会员都是骗子")
                                    Text("昨天 21:22 北京")
                                        .foregroundStyle(.secondary)
                                }
                                Spacer()
                                Image(systemName: "heart")
                            }.padding(.horizontal)
                        }
                    }
                    Spacer()
                }
            }
            // 底部功能
            HStack {
                TextField("说点什么...", text: $commit)
                    .padding(5)
                Spacer()
                HStack {
                    Image(systemName: "heart")
                    Text("13")
                }
                HStack {
                    Image(systemName: "star")
                    Text("13")
                }
                HStack {
                    Image(systemName: "message")
                    Text("13")
                }
            }.padding()
        }
        .ignoresSafeArea(edges: .bottom)
    }
}

#Preview {
    ContentDetail()
}
相关推荐
CRMEB定制开发5 分钟前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
imber6 分钟前
Framer Motion & GSAP 实现酷炫动画
前端
ygming12 分钟前
Q43- code973- 最接近原点的 K 个点 + Q44- code347- 前 K 个高频元素
前端·算法
ygming14 分钟前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a14 分钟前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽14 分钟前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku17 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)22 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江39 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码39 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端