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()
}
相关推荐
Warren9837 分钟前
Lua 脚本在 Redis 中的应用
java·前端·网络·vue.js·redis·junit·lua
mCell1 小时前
JavaScript 运行机制详解:再谈 Event Loop
前端·javascript·浏览器
帧栈5 小时前
开发避坑指南(27):Vue3中高效安全修改列表元素属性的方法
前端·vue.js
max5006005 小时前
基于桥梁三维模型的无人机检测路径规划系统设计与实现
前端·javascript·python·算法·无人机·easyui
excel5 小时前
使用函数式封装绘制科赫雪花(Koch Snowflake)
前端
萌萌哒草头将军6 小时前
Node.js v24.6.0 新功能速览 🚀🚀🚀
前端·javascript·node.js
持久的棒棒君7 小时前
启动electron桌面项目控制台输出中文时乱码解决
前端·javascript·electron
麦兜*8 小时前
【swift】SwiftUI动画卡顿全解:GeometryReader滥用检测与Canvas绘制替代方案
服务器·ios·swiftui·android studio·objective-c·ai编程·swift
小离a_a8 小时前
使用原生css实现word目录样式,标题后面的...动态长度并始终在标题后方(生成点线)
前端·css
郭优秀的笔记9 小时前
抽奖程序web程序
前端·css·css3