🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Hôm nay cafedev sẽ giới thiệu một cách ngắn ngọn và cực dễ hiểu về NavigationView trong SwiftUI để các bạn có thể thực hành nó một cách nhanh chóng nhất có thể. Vì một thế giới dev luôn thay đổi từng ngày.

Lưu ý: Bài này sẽ được cập nhật (kiến thức, demo) liên tục cho tới khi NavigationView được ổn định nhất.

Khái niệm

Có thể hiểu nó là một khung nhìn(view) để trình bày một chồng các khung nhìn(view) khác nhau và thể hiện một đường dẫn tới hoặc lùi trong hệ thống phân cấp các NavigationView khác.

Một số Demo cơ bản

  • NavigationView với title lớn

//
// ContentView.swift
// SwiftUISample
//
// Created by Cafedev on 10/6/19.
// Copyright © 2019 Cafedev.vn All rights reserved.
//
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
Text("Hello World Cafedev")
}
.navigationBarTitle(Text("Cafedev.vn")) // Default to large title style
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
view raw swiftui_navigationView_00.swift hosted with ❤ by GitHub

  • NavigationView với title nhỏ

NavigationView {
List {
Text("Title small")
}
.navigationBarTitle(Text("Cafedev.vn"), displayMode: .inline)
}
view raw swiftui_navigationView_01.swift hosted with ❤ by GitHub

  • Thêm UIBarButtonItem

//
// ContentView.swift
// SwiftUISample
//
// Created by Cafedev on 10/6/19.
// Copyright © 2019 Cafedev.vn All rights reserved.
//
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
Text("Hello World - cafedev.vn")
}
.navigationBarItems(trailing:
Button(action: {
// Add action
}, label: {
Text("Add")
})
)
.navigationBarTitle(Text("Cafedev.vn"))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
view raw swiftui_navigationView_02.swift hosted with ❤ by GitHub

Thêm show/push with NavigationLink

Các bài Demo nâng cao

Bài hướng dẫn custom một navigation trong SwiftUI

Bài hướng dẫn nâng cao cách navigation trong SwiftUI mà không dùng Navigation View(gồm 3 phần)

Tài liệu tham khảo

Tài liệu gốc của Apple

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM