[Video Summary] Ch. 1 SwiftUI Fundamentals: modifiers, background, padding, modifier order, ZStack, (2025)

Mô tả nhanh

Video này trình bày về các kiến thức cơ bản trong SwiftUI, bao gồm: modifiers, background, padding, thứ tự modifier, ZStack và nhiều hơn nữa, thông qua việc xây dựng một ứng dụng đơn giản.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này trình bày về các kiến thức cơ bản trong SwiftUI, bao gồm: modifiers, background, padding, thứ tự modifier, ZStack và nhiều hơn nữa, thông qua việc xây dựng một ứng dụng đơn giản.

Các bước thực hiện chính:

1. Tạo dự án mới:
   • Mở Xcode và tạo một dự án iOS mới với tên "fundamentals".
   • Thiết lập giao diện preview để hiển thị một hình ảnh "Swift" màu cam và chữ "ur awesome" màu đỏ.
2. Tìm hiểu về padding:
   • Sử dụng modifier .padding() để thêm khoảng cách giữa các view và viền.
   • Sử dụng modifier .border() để thấy rõ phạm vi của padding.
   • Thứ tự áp dụng modifier rất quan trọng, ví dụ: padding trước border sẽ khác với border trước padding.
3. Tìm hiểu về alignment:
   • Sử dụng alignment trong VStack để căn chỉnh các view theo chiều ngang (leading, trailing, center).
4. Tìm hiểu về comment code:
   • Sử dụng // để comment một dòng và /* ... */ để comment một khối code.
   • Sử dụng phím tắt Cmd + / để comment/uncomment nhanh.
5. Tìm hiểu về background:
   • Sử dụng modifier .background() để thay đổi màu nền của view.
   • Thứ tự áp dụng modifier ảnh hưởng đến việc màu nền áp dụng lên view nào (padding có được tính vào background hay không).
6. Tìm hiểu về modifier order:
   • Thứ tự các modifier rất quan trọng, thứ tự sai có thể gây lỗi build.
     • Các modifier chuyên biệt (ví dụ: resizable() cho Image) phải được đặt trước các modifier chung (ví dụ: foregroundColor()).
7. Tìm hiểu về backgroundStyle (ít dùng):
   • Sử dụng .background(Circle()) để tạo nền hình tròn.
   • Sử dụng .backgroundStyle(.blue.gradient) để tạo nền có gradient.
   • Sử dụng scaleEffect() để thay đổi kích thước của view.
8. Giới thiệu ZStack:
   • Sử dụng ZStack để xếp các view lên nhau theo chiều sâu (lớp)
   • Thứ tự các view trong ZStack quyết định thứ tự hiển thị (view đầu tiên nằm ở dưới cùng).
   • Sử dụng modifier .fill() để tô màu cho hình dạng (shape).
   • Sử dụng .offset(x:y:) để di chuyển vị trí view trong ZStack.
9. Tìm hiểu về Frame:
   • Sử dụng modifier .frame(width:height:) để thiết lập kích thước cố định cho view.
10. Các phím tắt hữu ích:
    • Cmd + /: comment/uncomment.
    • Option + Cmd + [/]: di chuyển dòng code lên hoặc xuống.
    • Option + Cmd + P: restart lại preview.

Chúc bạn học tập hiệu quả và tiếp tục khám phá thế giới lập trình iOS/macOS với Swift và SwiftUI!