SwiftUI - Navigation

富婆E

已于 2023-07-12 18:25:17 修改

阅读量693

点赞数

CC 4.0 BY-SA版权

分类专栏： Apple开发文章标签： SwiftUI Navigation

于 2021-11-19 09:26:19 首次发布

本文链接：https://blog.csdn.net/lovechris00/article/details/121415057

Apple开发专栏收录该内容

144 篇文章

订阅专栏

文章目录

https://developer.apple.com/documentation/swiftui/navigationview

https://developer.apple.com/documentation/swiftui/navigationlink

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

https://developer.apple.com/documentation/swiftui/toolbaritemplacement/navigation

简单跳转

struct ContentView : View
{
    var body: some View
    {
            NavigationView
            {
                NavigationLink(destination: Text("Detail Page") )
                {
                    Text("Go detail Page >")
                        .font(.system(size: 36))
                }
                .navigationBarTitle("Index Page")
                .accentColor(Color.orange)
            }
          
    }
}

跳转到自定义页面

struct ContentView : View
{
    var body: some View
    { 
            NavigationView
            {
                HStack
                {
                    NavigationLink(destination: MyDetailView(message: "Detail Page #2") )
                    {
                        Text("Go detail Page #2 >")
                    }
                    .navigationBarTitle("Index Page #1")
                }
            }
            
    }
}

struct MyDetailView: View
{
    let message: String

    var body: some View
    {
        Text(message)
            .font(.largeTitle)
    }
}

Image 的 navigationBarTitle

会在 preview 中显示，在模拟器中不显示

{
            Image("SwiftUI")
                .navigationBarTitle("About SwiftUI")
      ...
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        NavigationView
        {
            ContentView()
        }
    }
}
#endif

navigationBarTitle

在这里插入图片描述


struct ContentView : View
{
    var body: some View
    {
        NavigationView
        { 
            Text("SwiftUI's NavigationView")
                .navigationBarTitle(Text("SwiftUI"), displayMode: .large)
             
//            Text("SwiftUI's NavigationView")
//                .navigationBarTitle(Text("SwiftUI"), displayMode: .inline)
//                .navigationBarHidden(true)
//            Text("SwiftUI's NavigationView")
            
//            Text("SwiftUI's NavigationView")
//                .navigationBarTitle(Text("SwiftUI"))
        }
    }
}

NavigationItem

在这里插入图片描述


struct TrailingButtons : View
{
    var body: some View
    {
        HStack
        {
            Button(action: {
                print("Download the data")
            }) {
                Image(systemName: "icloud.and.arrow.down.fill")
            }
            
            Button(action: {
                print("Edit the data")
            }) {
                Image(systemName: "pencil.tip.crop.circle")
            }
        }
    }
}

struct ContentView : View
{
    var body: some View
    {
        NavigationView
        {
            Text("SwiftUI's NavigationView")
                .navigationBarTitle(Text("SwiftUI"))
                .navigationBarItems(leading:  Button(action: {
                   print("Go to index page")
                }) {
                   Text("Index")
                }, trailing: TrailingButtons())
        }
    }
}

跳转到图片详情页

在这里插入图片描述

import SwiftUI

struct InfoModel : Hashable
{
    var description : String
    var pictureName : String
}

struct ContentView : View
{
    var messages : [InfoModel]
    
    var body: some View
    {
        NavigationView
        {
            List
            {
                ForEach(messages, id: \.self)
                { message in
                    NavigationLink(destination: DetailView(imageName: message.pictureName))
                    {
                        Text(message.description)
                    }
                }
            }
            .navigationBarTitle("Pictures List")
        }
    }
}

struct DetailView : View
{
    var imageName : String
    var body: some View
    {
        Image(imageName)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider
{
    static var previews: some View
    {
        let model1 = InfoModel(description: "A lady with a horse", pictureName: "Picture1")
        let model2 = InfoModel(description: "An African animal with a very long neck", pictureName: "Picture2")
        
        return ContentView(messages: [model1, model2])
    }
}
#endif

NavigationLinkAndGoBack

在这里插入图片描述

DetailView.swift


import SwiftUI

struct DetailView: View
{
    var preView : ContentView
    
    var body: some View
    {
        Text("< Go back").onTapGesture
        {
            self.preView.toggleValue()
        }
        .navigationBarHidden(true)
        .navigationBarTitle("")
    }
}

ContentView.swift


struct ContentView : View
{
    @State private var isPresented = false
    
    var body: some View
    { 
        NavigationView
        {
            VStack
            {
                NavigationLink(destination: DetailView(preView: self), isActive: $isPresented)
                {
                    Image("couples").renderingMode(.original)
                    Text("Next Page >")
                }
            }
        }
    }
    
    func toggleValue()
    {
        self.isPresented.toggle()
    }
}

在这里插入图片描述

NavigationView
        {
            VStack
            {
                Image("couples").onTapGesture
                {
                    self.isPresented.toggle()
                    print(self.isPresented)
                }
                NavigationLink(destination:Text("< Go back").onTapGesture
                        {
                            self.isPresented.toggle()
                        },
                    isActive: $isPresented) {
                        Text("Next page")
                    }
            }
        }

presentationMode

ContentView.swift

struct ContentView: View
{
    var body: some View
    { 
        NavigationView
        {
            NavigationLink(destination: DetailView())
            {
                Text("This is index page.\nGo to the second page.")
            }
        } 
    }
}

DetailView.swift

struct DetailView: View
{
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    
    var body: some View
    {
        VStack
        {
            Text("First Page") 
            Spacer() 
            Button("< go back.", action: {
                    self.presentationMode.wrappedValue.dismiss()
            }) 
            Spacer() 
            NavigationLink(destination: DetailView2())
            {
                Text("Next >")
            } 
            Spacer()
        }
    }
}

DetailView2.swift

struct DetailView2: View
{
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode> 
    var body: some View
    {
        Text("Second Page") 
        Button("< go back.", action: {
                self.presentationMode.wrappedValue.dismiss()
        })
    }
}

直接进入第二页

struct ContentView : View
{
    @State var isPresented = true
    
    var body: some View
    {
        NavigationView
        {
            HStack
            {
                NavigationLink(destination: MyDetailView(message: "Detail Page #2"),
                               isActive: $isPresented )
                {
                    Text("Go detail Page #2 >")
                }
                .navigationBarTitle("Index Page #1")
            }
        }
    }
}

struct MyDetailView: View
{
    let message: String
    var body: some View
    {
        Text(message)
        .font(.largeTitle)
    }
}