SwiftUI篇-5 专题NavigationView、Navi

NavigationView:标题、展示模式、隐藏导航栏、隐藏返回按钮、添加导航栏按钮

NavigationLink:Text文本跳转、Image图片跳转、Button按钮跳转、点击按钮根据业务跳转到不同页面

NavigationView 标题、展示模式

import SwiftUI

struct LargeNavView: View {
    var displayMode: NavigationBarItem.TitleDisplayMode
    var title: String
    var body: some View {
        Text("Hello, World!").navigationBarTitle("large标题", displayMode: displayMode)
    }
}

struct LargeNavView_Previews: PreviewProvider {
    static var previews: some View {
        LargeNavView(displayMode: .automatic, title: "large标题")
    }
}

NavigationBarItem.TitleDisplayMode共有三个选项：

• .large 显示大标题，就是大标题导航栏。
• .inline 显示小标题，就是我们常用的小导航栏。
• .automatic 自动选项(初始默认.large)，它使用前面视图使用的选项。

NavigationView 添加导航栏按钮

                NavigationLink(
                    destination:   Text("large标题").navigationBarItems(trailing: HStack{
                        Button("trailing btn1") {
                              print("trailing btn1")
                        }
                        Button("trailing btn2") {
                              print("trailing btn2")
                        }
                    })
                    .navigationTitle("标题")
                    ,
                 label: {
                    Text("导航栏按钮")
                 })

NavigationView 隐藏导航栏

NavigationLink(destination: Text("NavigationLinkpage").navigationBarHidden(true)) {
  Text("隐藏导航栏")
}

NavigationView 隐藏返回按钮

NavigationLink(destination: Text("NavigationLinkpage").navigationBarBackButtonHidden(true).navigationTitle("title")) {
  Text("隐藏返回按钮")
}

NavigationView Text文本跳转

 NavigationLink(destination: Text("NavigationLink page")) {
                        Text("text NavigationLink")
 }

NavigationView Image图片跳转

NavigationLink(destination: Text("NavigationLink page")) {
                    Image("chincoteague").frame(width: 100, height: 100).clipped()
}

NavigationView 点击Button按钮跳转

 @State private var showButtonView = false
 
NavigationLink(destination: Text("NavigationLink page"), isActive: $showButtonView) { EmptyView() }
                Button("点击按钮跳转页面") {
                    self.showButtonView = true
}

NavigationView 点击按钮根据业务跳转到不同页面