SwiftUI căn bản #1: Làm quen VStack, HStack, Text, Image, Button qua ứng dụng BusinessCardDemo

Trong bài tutorial SwiftUI căn bản này, mình hướng dẫn các bạn làm quen với các thành phần cơ bản VStack, HStack, Image, Button bằng cách tạo thử ứng dụng danh thiếp hiển thị thông tin như minh hoạ trong hình:

Trước hết, bạn cần làm quen với một số thành phần chúng ta sẽ sử dụng trong ứng dụng.

VStack

VStack là một layout container cho phép bố cục các thành phần bên trong theo chiều đứng theo thứ tự từ trên xuống dưới.

Ví dụ đoạn mã dưới đây đặt hai thành phần vào trong một VStack: một văn bản hiển thị Hello World và một văn bản hiển thị SwiftUI:

VStack {
   Text("Hello World")
   Text("SwiftUI")
}

Mặc định, các thành phần sẽ được căn chỉnh theo chiều ngang ở giữa màn hình. Ví dụ, nếu bạn có hai thành phần kích thước khác nhau, chúng sẽ được đặt từ trên xuống dưới và căn chỉnh giữa theo chiều ngang của chúng.

Nếu bạn muốn các thành phần xuất hiện căn theo lề trái màn hình, bạn thay đổi giá trị thuộc tính alignment như sau:

VStack(alignment: .leading) {
   Text("Hello World")
   Text("SwiftUI")
}

Để xác định khoảng cách giữa các thành phần bên trong, bạn sử dụng thuộc tính spacing:

VStack(alignment: .leading, spacing: 15) {
   Text("Hello World")
   Text("SwiftUI")
}

Bạn cũng có thể sử dụng một số phương thức sau để định nghĩa cách thức hiển thị của VStack:

VStack(alignment: .leading, spacing: 15) {
   Text("Hello World")
   Text("SwiftUI")
}
.frame(width: 200, height: 100) // Kích thước ngang và đứng
.padding(15) // Khoảng cách từ viền đến cạnh thành phần
.background(.white) // Màu nền
.cornerRadius(10) // Bo góc
.shadow(radius: 5) // Hiển thị bóng đổ

HStack

HStack tương tự VStack, HStack cũng là một layout container, nhưng cho phép bố cục các thành phần bên trong theo chiều ngang theo thứ tự từ trái qua phải.

Mặc định, các thành phần sẽ được căn chỉnh theo chiều dọc ở giữa màn hình. Ví dụ, nếu bạn có hai thành phần kích thước khác nhau, chúng sẽ được đặt từ trái qua phải và căn chỉnh giữa theo chiều dọc của chúng.

Bạn có thể thay đổi cho các thành phần căn theo đỉnh:

HStack(alignment: .top) {
   Text("Hello World")
   Text("SwiftUI")
}

Còn lại, hầu hết các thuộc tính và phương thức của HStack cũng tương tự VStack.

Text

Trong SwiftUI, Text cho phép bạn hiển thị một đoạn văn bản lên màn hình.

Text("Hello World")

Bạn có thể thay đổi cách văn bản hiển thị qua một số phương thức:

Text("Hello World").font(.title).bold() // Kiểu chữ như tiêu đề, in đậm 

Text("Hello World").italic() // In nghiêng

Các thành phần khác

Trong bài Swift Tutorial cơ bản này, mình cũng sẽ giới thiệu để bạn làm quen các thành phần sau:

Image: cho phép bạn hiển thị hình ảnh. Bạn có thể hiển thị hình ảnh từ Assets, SF Symbols hoặc các hình ảnh trong project của bạn. Project mẫu trong bài này, mình cũng sẽ hướng dẫn bạn sử dụng thư viện SF Symbols – thư viện khoảng 6000 icon do Apple phát triển có thể dùng miễn phí cho mọi project.

Nếu chưa có SF Symbols trên máy tính, bạn hãy download và cài đặt ở đây: https://developer.apple.com/sf-symbols/.

Button: cho phép hiển thị nút bấm. Bài này mình cũng sẽ hướng dẫn bạn xử lý sự kiện khi nút được bấm.

Spacer: hiển thị khoảng trống giữa các thành phần khác.

Divider: đường kẻ ngăn cách các thành phần.

Bạn sẽ dễ nắm bắt và hình dung hơn khi thực sự bắt tay vào làm. Hãy bắt đầu bài SwiftUI Tutorial này theo video clip hướng dẫn dưới đây của mình.

Link tài nguyên sử dụng trong project mẫu: https://blog.binhnguyensoft.com/shared/sample/sample-profile-image-1.jpeg.