Khi tạo một ứng dụng SwiftUI mới, bạn sẽ nhận được một loạt các tệp và có thể có tổng cộng 20 dòng mã.
Bên trong Xcode, bạn sẽ thấy các tệp sau ở khoảng trống bên trái, được gọi là trình điều hướng dự án:
WeSplitApp.swift chứa mã để khởi chạy ứng dụng của bạn. Nếu bạn tạo nội dung nào đó khi ứng dụng khởi chạy và giữ cho nó tồn tại trong suốt thời gian đó thì bạn sẽ đặt nó ở đây.
ContentView.swift chứa giao diện người dùng (UI) ban đầu cho chương trình của bạn và là nơi chúng tôi sẽ thực hiện tất cả công việc trong dự án này.
Assets.xcassets là một danh mục tài sản – một tập hợp các hình ảnh mà bạn muốn sử dụng trong ứng dụng của mình. Bạn cũng có thể thêm màu sắc tại đây, cùng với các biểu tượng ứng dụng, nhãn dán iMessage, v.v.
Nội dung xem trước là một nhóm, có Preview Assets.xcassets bên trong – đây là một danh mục nội dung khác, lần này cụ thể là các hình ảnh ví dụ mà bạn muốn sử dụng khi thiết kế giao diện người dùng của mình, để cho bạn ý tưởng về cách chúng trông như thế nào khi chương trình đang chạy.
Mẹo: Tùy thuộc vào cấu hình của Xcode, bạn có thể thấy hoặc không thấy phần mở rộng tệp trong trình điều hướng dự án của mình. Bạn có thể kiểm soát điều này bằng cách đi tới tùy chọn của Xcode, chọn tab Chung, sau đó điều chỉnh tùy chọn Tiện ích mở rộng tệp.
Tất cả công việc của chúng tôi cho dự án này sẽ diễn ra trong ContentView.swift, Xcode đã mở sẵn cho bạn. Nó có một số nhận xét ở trên cùng – những thứ được đánh dấu bằng hai dấu gạch chéo ở đầu – và chúng bị Swift bỏ qua, vì vậy bạn có thể sử dụng chúng để thêm giải thích về cách mã của bạn hoạt động.
Bên dưới các bình luận có thể có 15 dòng mã:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
#Preview {
ContentView()
}
Trước khi bắt đầu viết mã của riêng mình, bạn nên xem qua tất cả những gì nó thực hiện vì sẽ có một số thứ mới.
Đầu tiên, import SwiftUI nói với Swift rằng chúng tôi muốn sử dụng tất cả các chức năng được cung cấp bởi khung SwiftUI. Apple cung cấp cho chúng tôi nhiều khung cho những thứ như học máy, phát lại âm thanh, xử lý hình ảnh, v.v., vì vậy, thay vì cho rằng chương trình của chúng tôi muốn sử dụng mọi thứ, thay vào đó, chúng tôi sẽ nói những phần nào chúng tôi muốn sử dụng để chúng có thể được tải.
Thứ hai, struct ContentView: View tạo một cấu trúc mới có tên ContentView, nói rằng nó tuân thủ View giao thức. View đến từ SwiftUI và là giao thức cơ bản phải được áp dụng bởi bất kỳ thứ gì bạn muốn vẽ trên màn hình – tất cả văn bản, nút, hình ảnh, v.v. đều là các chế độ xem, bao gồm cả bố cục của riêng bạn kết hợp các chế độ xem khác.
Thứ ba, var body: some View xác định một thuộc tính được tính toán mới có tên là body, có loại thú vị: some View. Điều này có nghĩa là nó sẽ trả về thứ gì đó phù hợp với View giao thức, đó là bố cục của chúng ta. Thực tế thì điều này sẽ dẫn đến một kiểu dữ liệu rất phức tạp được trả về dựa trên tất cả những thứ trong bố cục của chúng ta, nhưng có some View nghĩa là chúng ta không cần phải lo lắng về điều đó.
View giao thức chỉ có một yêu cầu, đó là bạn phải có một thuộc tính được tính toán có tên body là trả về some View. Bạn có thể (và sẽ) thêm nhiều thuộc tính và phương thức hơn vào cấu trúc khung nhìn của mình, nhưng body đó là điều duy nhất bắt buộc.
Thứ tư, VStack mã bên trong nó hiển thị hình ảnh quả địa cầu với dòng chữ “Xin chào thế giới!” bên dưới nó. Hình ảnh quả địa cầu đó lấy từ bộ biểu tượng SF Symbols của Apple và có hàng nghìn biểu tượng này được tích hợp ngay trong iOS. Chế độ xem văn bản là những đoạn văn bản tĩnh đơn giản được vẽ trên màn hình và sẽ tự động ngắt dòng thành nhiều dòng nếu cần.
Thứ năm, imageScale(), foregroundStyle()và padding()là các phương thức được gọi trên hình ảnh và VStack. Đây là cái mà SwiftUI gọi là modifier , là các phương thức thông thường với một điểm khác biệt nhỏ: chúng luôn trả về một chế độ xem mới chứa cả dữ liệu gốc của bạn, cộng với sửa đổi bổ sung mà bạn yêu cầu. Trong trường hợp của chúng tôi, điều đó có nghĩa là hình ảnh quả địa cầu sẽ được hiển thị lớn hơn và có màu xanh lam, đồng thời toàn bộ body thuộc tính sẽ trả về chế độ xem văn bản được đệm chứ không chỉ là chế độ xem văn bản thông thường.
Bên dưới ContentView cấu trúc bạn sẽ thấy #Preview bên trong ContentView(). Đây là một đoạn mã đặc biệt sẽ không thực sự là một phần của ứng dụng cuối cùng được đưa lên App Store mà thay vào đó dành riêng cho Xcode để sử dụng để nó có thể hiển thị bản xem trước thiết kế giao diện người dùng cùng với mã của bạn.
Những bản xem trước này sử dụng tính năng Xcode được gọi là canvas, thường hiển thị trực tiếp ở bên phải mã của bạn. Bạn có thể tùy chỉnh mã xem trước nếu muốn và chúng sẽ chỉ ảnh hưởng đến cách canvas hiển thị bố cục của bạn – nó sẽ không thay đổi ứng dụng thực tế đang chạy.
Canvas sẽ tự động xem trước bằng một thiết bị Apple cụ thể, chẳng hạn như iPhone 15 Pro hoặc iPad. Để thay đổi điều này, hãy nhìn vào giữa trên cùng của cửa sổ Xcode để tìm thiết bị hiện tại, sau đó nhấp vào thiết bị đó và chọn một phương án thay thế. Điều này cũng sẽ ảnh hưởng đến cách chạy mã của bạn trong trình mô phỏng iOS ảo sau này.
Quan trọng: Nếu bạn không thấy khung vẽ trong cửa sổ Xcode của mình, hãy chuyển tới menu Trình chỉnh sửa và chọn Canvas.
Thông thường, bạn sẽ thấy rằng một lỗi trong mã của bạn khiến canvas của Xcode không thể cập nhật – bạn sẽ thấy thông báo như “Đã tạm dừng xem trước” và có thể nhấn nút làm mới để khắc phục lỗi đó. Vì bạn sẽ phải làm việc này rất nhiều nên hãy để tôi đề xuất một phím tắt quan trọng: Option+Cmd+P thực hiện tương tự như cách nhấp vào nút làm mới.
Bình luận