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()
}
相关推荐
Jiaberrr1 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy1 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白1 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、1 小时前
Web Worker 简单使用
前端
web_learning_3211 小时前
信息收集常用指令
前端·搜索引擎
tabzzz1 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百2 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao2 小时前
自动化测试常用函数
前端·css·html5
键盘敲没电2 小时前
【iOS】KVC
ios·objective-c·xcode
吾吾伊伊,野鸭惊啼2 小时前
2024最新!!!iOS高级面试题,全!(二)
ios