SwiftUI学习之 NavigationView

使用 NavigationView 来创建一个基于导航的应用程序,用户可以在其中遍历一系列的视图。用户通过选择你提供的 NavigationLink 来导航至目标视图。在 iPadOS 和 macOS 平台上,目标内容将会出现在下一列中,实现了自然的分屏浏览体验。而在其他平台,如 iOS(iPhone)或 tvOS,系统则会将新的视图推入视图堆栈,并启用平台特有的控制机制,例如后退按钮或滑动手势,来移除堆栈中的项,从而允许用户返回到之前的视图。

例子1:点击一个view跳转到详情页

import SwiftUI
struct ContentView: View {
    var body: some View {
        NavigationView {
                NavigationLink {
                    LandmarkDetai()
                } label: {
                    Text("去详情页")
                    .foregroundStyle(.black)
                    .padding()
                    .background(.red)
                }
        }
    }
}
  • NavigationView 创建一个基于导航的页面
  • NavigationLink用于在两个视图间建立导航连接,
  • NavigationLink默认会为它的标签(label)添加点击手势识别,以便用户可以通过触摸或点击标签来触发导航动作。

例子2:cell点击跳转到详情页


struct ContentView: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationLink {
                    LandmarkDetai()
                } label: {
                    LandmarkRow(landmark: landmark)
                }
            }
        }
    }
}

例子3:自定义返回按钮

import SwiftUI

struct LandmarkDetai: View {
    @Environment(\.dismiss) private var dismiss
    var body: some View {
        VStack {
        
        }
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    dismiss()// Implicitly calls dismiss.callAsFunction()
                    
                }) {
                    Image("back")
                }
                
            }
        }
        .ignoresSafeArea()
    }
}

  • 1、隐藏系统的返回按钮
  • 2、 ToolbarItem创建一个backButtonitem
  • 3、 获取系统环境变量dismiss,调用callAsFunction()使用dismiss环境值来获取给定环境中这个结构的实例。然后调用该实例来执行关闭操作。之所以可以直接调用这个实例,是因为它定义了一个callAsFunction()方法,当你调用这个实例时,Swift会自动调用这个方法。

你可以使用这个操作来实现以下功能:
1、关闭模态展示,如弹出面板(sheet)或浮动窗口(popover)。
2、从NavigationStack中弹出当前视图。
3、关闭使用WindowGroup或Window创建的窗口。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容