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()
}
相关推荐
飞天狗23 分钟前
线上Bug一直复现不了?我用Sentry把错误追踪效率提升了10倍
前端
Slice_cy25 分钟前
对前端工程化的理解
前端
Slice_cy26 分钟前
状态机设计理念与实现
前端
星栈27 分钟前
LiveView 的生命周期:mount、handle_event 和 Socket 到底怎么运转
前端·前端框架·elixir
yingyima31 分钟前
JWT Token 解析与安全实践速查:5 问 5 答直击要害
前端
kyriewen2 小时前
我用 Codex 重写了同事维护三年的代码,他没说谢谢——而是找了领导
前端·javascript·ai编程
OpenTiny社区2 小时前
从零开发 AI 聊天页要两周?试试这款 Vue3 垂直对话组件库 TinyRobot,直接开箱即用
前端·vue.js·github
铁皮饭盒2 小时前
S3已成为文件存储标准,阿里/腾讯/华为云都支持,Bun率先原生支持
前端·javascript·后端
Cobyte2 小时前
22.Vue Vapor 组件 props 的实现
前端·javascript·vue.js
lichenyang4532 小时前
从 has.showToast 看 ASCF 的 API 调用链路
前端