SwiftUI – Phần 9 : Routing in SwiftUI

Chào mừng bạn đến với Fx Studio. Chúng ta sẽ bắt đầu một chương mới trong SwiftUI, với tên là Routing in SwiftUI. Phần này, chúng ta tập trung vào việc điều hướng giữa các View trong SwiftUI. Nó khá là hữu ích khi bạn cần xử lý ứng dụng với giao diện nhiều màn hình.

Nào, bây giờ thì …

Bắt đầu thôi!

1. Giới thiệu

1.1. Chuẩn bị

Dành cho các bạn chưa đọc 8 phần của series SwiftUI Notes này, thì có thể truy cập ở link sau đây:

1. 1. Làm quen với SwiftUI
   2. Cơ bản về ứng dụng SwiftUI App
   3. Tích hợp SwiftUI và UIKit
   4. Apple Ecosystem
   5. Multiplatform App
   6. Basic UI Controls
   7. State & Data Flow
   8. Working with List

Về mặt chuẩn bị, chúng ta sẽ vẫn là những yêu cầu cơ bản từ phần một. Nếu như bạn có thể cập nhật tất cả lên version mới nhất thì càng tốt. Còn sau đây là cấu hình đề xuất cho bạn:

• • Xcode 13
  • Swift 5.5
  • SwiftUI 3.0

Về mặt kiến thức, bạn cần biết trước các kiến thức cơ bản với SwiftUI & SwiftUI App. Tham khảo các bài viết sau, nếu bạn chưa đọc qua SwiftUI:

• • Làm quen với SwiftUI
  • Cơ bản về ứng dụng SwiftUI App

(Mặc định, mình xem như bạn đã biết về cách tạo project với SwiftUI & SwiftUI App rồi.)

1.2 Routing in SwiftUI

Nói về Điều hướng (Routing) trong SwiftUI là một chủ đề khá là hay. Vì bạn cần phải nắm được bản chất của SwiftUI View và Declarating Data. Chúng có quan hệ mật thiết với nhau, khi sử biến đổi dữ liệu thì luôn luôn kéo theo sự biết đổi của giao diện.

Ngoài ra, bạn nâng cấp ứng dụng của bạn lên, thì việc làm việc một lúc với nhiều màn hình khác nhau chuyện hiển nhiên. Và đối với các ứng dụng lớn, bạn lại phải cần sử dụng tới nhiều luồng màn hình (screen flows) trong giao diện. Chúng nó sẽ tăng thêm độ phức tạp cho việc điều hướng, nhất là khi tương tác giữa các luồng màn hình.

Video trên là mô tả cho bạn thấy được những đối tượng liên quan chính tới việc điều hướng trong SwiftUI. Vẫn là các đối tượng quen thuộc từ UIKit, như: Navigation, TabView … sẽ giúp bạn sử dụng lại kinh nghiệm cũ (UIKit) khi làm với SwiftUI.

Bạn sẽ được tìm hiểu thêm các đối tượng mới và cách điều hướng mới của SwiftUI. Cách dữ liệu được truyền đi giữa các View hay giữa các luồng màn hình. Quan trọng nhất, là từ chương này

Bạn đã hoàn thiện được ứng dụng SwiftUI rồi.

Điều mà từ ngay chương đầu tiên bạn đã thực hiện, tuy nhiên lúc đó chỉ là một ứng dụng đơn giản mà thôi.

(Chúng ta sẽ dần dần khám phá tiếp thông qua danh sách các bài viết dưới đây.)

2. Danh sách

Các bài viết trong phần Routing in SwiftUI sẽ tập trung nhiều vào thực hành là chính. Hầu hết các đối tượng điều hướng thì bạn đã học qua chúng rồi, như: NavigationView, NavigationLink …. Vấn đề truyền dữ liệu cũng như vậy. Trái tim ứng dụng vẫn là The single source of truth mà thôi.

Danh sách như sau:

1. 1. NavigationView
   2. NavigationLink – Push & Pop
   3. Modal View, Alert & ActionSheet
   4. TabView & PageView
   5. Custom TabBar
   6. SideBar & Toolbar
   7. Change Root & Screen Flow

Các demo ví dụ trong các bài viết Routing in SwiftUI thì riêng lẻ, nhưng chúng sẽ liên quan mật thiết với nhau trong bài cuối cùng. Mục tiêu chính là hoàn thiện cách điều hướng cơ bản của các màn hình trong một ứng dụng. Bạn sẽ tự thiết kế và lên ý tưởng riêng của bạn. Sau cùng, bạn sẽ xây dựng một ứng dụng hoàn chỉnh từ các View được xây dựng qua từng bài.

(Hoặc có thể bạn checkout project tại đây để tham khảo.)

Lưu ý

Công nghệ mỗi ngày là một thay đổi và bạn phải dành ra nhiều thời gian để cập nhất nó hằng ngày. Do đó, các bài viết sẽ mang tính chất giới thiệu và ở mức độ cơ bản mà thôi. Và cho đúng thời điểm hiện tại với SwiftUI 3.0. Có thể trong quá trình nghiên cứu thêm, mình sẽ bổ sung thêm các phần lý thuyết cho chương này của series.

3. Thông tin và trạng thái

3.1. Thông tin

• • Website: Fx Studio
  • Link seri: https://fxstudio.dev/tag/swiftui-notes/
  • Github: https://github.com/fx-studio/swiftui-notes
  • Trạng thái: đang cập nhật

Nếu bạn có đóng góp hay nhận xét về series này, cách viết bài, cũng như nội dung truyền tải. Thì mình rất rất cảm ơn. Nếu có bất cứ vấn đề gì, thì bạn có thể liên lạc theo các địa chỉ dưới đây.

• • Website: https://fxstudio.dev/contact/
  • Email: lephuongtien.dev@gmail.com

3.2. Bản quyền

Về bản quyền của series SwiftUI Notes là của Fx Studio, bao gồm các bài viết trên website & mã nguồn trên GitHub. Và chúng hoàn toàn miễn phí cho các mục đích phi lợi nhuận và học tập. Tất cả các hành vi sao chép hay sử dụng vì mục đích thương mại đều là vi phạm.

Vui lòng để lại link bài viết gốc, nếu bạn muốn sử dụng & cũng như trích dẫn các nội dụng từ các bài viết trong series SwiftUI Notes này.

3.3. Các phần khác trong series:

1. Làm quen với SwiftUI
2. Cơ bản về ứng dụng SwiftUI App
3. Tích hợp SwiftUI và UIKit
4. Apple Ecosystem
5. Multiplatform App
6. Basic UI Controls
7. State & Data Flow
8. Working with List
9. Routing in SwiftUI
10. Grid Layout
11. …

Cảm ơn bạn đã ủng hộ Fx Studio và series SwiftUI Notes!

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!