SwiftUI一起学之一 -- NavigationView

一 NavigationView

对应UIKit中的UINavigationController。如果想拥有导航到别的控制器的能力，页面必须包裹进NavigationView中

1.1 导航栏标题

NavigationView{
   Text("Hello World!")
   .navigationBarTitle("标题")
}

1.2 导航栏样式

displayMode是TitleDisplayMode枚举的值，它有三种值：

• automatic：从前一个导航栏继承显示模式
• inline：展示标准导航条的title样式
• large：即系统默认的样式，居左大标题

1. inline 标准导航条的title样式

NavigationView{
   Text("Hello World!")
   .navigationBarTitle("标题",displayMode: .inline)
}

image.png

2. 即系统默认的样式，居左大标题, 当页面向上滚动时标题会自动运动到导航栏正中位置

image.png

1.3 导航栏左右按钮

NavigationView{
    Text("Hello World")
    .navigationBarTitle("标题",displayMode: .inline)
    .navigationBarItems(leading: Button("左按钮"){
        print("点击了左按钮")
    }, trailing: Button("右按钮"){
        print("点击了右按钮")
    })
}

image.png

1.4 页面跳转和传参

1. 跳转下一页面

NavigationView{
    NavigationLink(destination: NextPageView()) {
        Text("下一页面")
    }
    .navigationBarTitle("标题",displayMode: .inline)
}

2. 传参数

NavigationView{
    NavigationLink(destination: NextPageView(param: "我是参数")) {
        Text("下一页面")
    }
    .navigationBarTitle("标题",displayMode: .inline)
}

struct NextPageView: View {
    var param:String 
    
    var body: some View {
        Text("我是下一页 我是上一页参数\(param)")
    }
}

3. 通过代码自动跳转, 使用isActive进行自动跳转子页面

@State var isActive = false
    
var body: some View {
    NavigationView{
        VStack {
            NavigationLink(destination: NextPageView(param: "我是参数"), isActive: $isActive) {
                Text("跳转")
            }
            Spacer().frame(width: 1, height: 20, alignment: .center)
            Button("自动跳转") {
                print(self.isActive)
                self.isActive = true
            }
        }
        .navigationBarTitle("标题",displayMode: .inline)
        .navigationBarItems(leading: Button("左按钮"){
            print("点击了左按钮")
        }, trailing: Button("右按钮"){
            print("点击了右按钮")
        })
    }
}

参考:

1. http://www.cocoachina.com/articles/898568
2. 小组件
3. SwiftUi Demo
4. SwiftUI系列之七--NavigationView, TabbedView, Group介绍
5. SwiftUI:NavigationView