[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 của SwiftUI, bao gồm: modifiers, background, padding, thứ tự modifier, ZStack, hình dạng, hiệu ứng gradient và các mẹo khác.

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 của SwiftUI, bao gồm: modifiers, background, padding, thứ tự modifier, ZStack, hình dạng, hiệu ứng gradient và các mẹo khác. Cụ thể:

1. Khởi tạo dự án và tạo View cơ bản:
   • Tạo project Xcode mới với tên "fundamentals".
   • Tạo ImageView hiển thị hình ảnh "Swift" và TextView hiển thị "ur awesome."
   • Thay đổi màu sắc, font chữ và độ đậm của chữ.
2. Tìm hiểu về Padding:
   • Sử dụng modifier .padding() để thêm khoảng cách xung quanh View.
   • Sử dụng modifier .border() để quan sát padding và khung của view.
   • Thứ tự modifier ảnh hưởng đến kết quả hiển thị (border có thể bao ngoài hoặc nằm trong padding).
3. Tìm hiểu về VStack và Alignment:
   • Sử dụng VStack để sắp xếp các View theo chiều dọc.

• Thay đổi alignment của VStack với .leading (căn trái) và .trailing (căn phải).

4. Comment và Un-comment code:
   • Sử dụng // để comment một dòng code.
   • Sử dụng /* ... */ để comment một khối code.
   • Sử dụng command + / để toggle comment.
5. Tìm hiểu về modifier Background:
   • Sử dụng .background(Color) để thay đổi màu nền cho view.
   • Thử nghiệm background sử dụng backgroundStyle (ít khi dùng) và background(shape: Shape) (Circle, fill).
   • Thứ tự modifier .background ảnh hưởng đến padding nếu padding được khai báo trước.
6. Tìm hiểu về ZStack:
   • Sử dụng ZStack để xếp chồng các view lên nhau (view đầu tiên nằm dưới cùng).
   • Kết hợp Circle, .fill và .gradient để tạo hình nền gradient.
   • Sử dụng .scaleEffect để thay đổi kích thước view.
7. Tìm hiểu về Offset và Frame:
   • Sử dụng .offset(x: y:) để dịch chuyển view theo trục X và Y.
   • Sử dụng frame(width:height:) để giới hạn kích thước view.
8. Các phím tắt hữu ích:
   • Command + / : toggle comment code.
   • Option + Command + [ / Option + Command + ] : di chuyển dòng hoặc khối code lên/xuống.
   • Option + Command + P : restart preview.

Chúc bạn học tập hiệu quả!