[Video Summary] Ch. 1. Fundamentals: Getting SwiftUI Layout Right Pt. 1 Frames, multilineAlignment, maxWidth (2025)

Mô tả nhanh

Video này trình bày về cách làm chủ layout trong SwiftUI, tập trung vào việc sử dụng frame, căn chỉnh đa dòng (multilineAlignment) và chiều rộng tối đa (maxWidth). Video cũng giới thiệu về cách debug layout bằng border, cách sử dụng modifier, tìm hiểu chi tiết về cấu trúc của VStack và cách sử dụng code folding.

Video

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

Mô tả chi tiết

Video này trình bày về cách làm chủ layout trong SwiftUI, tập trung vào việc sử dụng frame, căn chỉnh đa dòng (multilineAlignment) và chiều rộng tối đa (maxWidth).

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

1. Tạo Project và UI cơ bản:
   • Tạo một project iOS mới với tên "layouts".
   • Thêm một biến @State private var messageString để lưu trữ nội dung hiển thị trong text view.
   • Tạo một Text view để hiển thị messageString, định dạng font chữ lớn, đậm và màu đỏ, có padding tiêu chuẩn.
   • Tạo hai nút bấm "Awesome" và "Great" nằm cạnh nhau, khi bấm vào thì messageString sẽ thay đổi tương ứng.
   • Sử dụng .buttonStyle(.borderedProminent) để tạo kiểu cho nút.
2. Khắc phục lỗi nhảy layout khi text view thay đổi:
   • Quan sát hiện tượng các nút bấm bị "nhảy" xuống khi text view thay đổi từ rỗng thành có nội dung.
   • Sử dụng .border() để quan sát kích thước thực tế của các view.
   • Nhận thấy rằng SwiftUI sẽ tự động co giãn view để vừa với nội dung bên trong, nên khi text view ban đầu rỗng, kích thước sẽ nhỏ, và khi có nội dung thì các view khác sẽ bị đẩy xuống.
   • Để khắc phục, một cách nhanh chóng là khởi tạo messageString với một khoảng trắng " " để giữ kích thước view text không đổi.
   • Tuy nhiên, cách này không hoàn hảo vì nó không xử lý được trường hợp text có nhiều dòng.
3. Sử dụng frame để cố định kích thước text view:
   • Thêm modifier .frame(width: 300, height: 150) vào text view để cố định kích thước của nó.
   • Lưu ý rằng thứ tự của các modifier rất quan trọng. frame phải đứng trước border để border vẽ xung quanh frame, chứ không phải xung quanh text view.
   • Sau khi có frame, dù nội dung text có thay đổi thế nào thì các nút bấm sẽ không bị "nhảy" nữa.
4. Sử dụng minimumScaleFactor để tự động điều chỉnh kích thước font chữ:
   • Nếu text quá dài, nó sẽ bị cắt bớt.

• Sử dụng .minimumScaleFactor(0.5) để cho phép font chữ tự động thu nhỏ xuống 50% nếu cần thiết để vừa với kích thước khung.

5. Căn chỉnh text nhiều dòng sử dụng multilineTextAlignment:
   • Mặc định, text nhiều dòng sẽ được căn trái.
   • Sử dụng .multilineTextAlignment(.center) để căn giữa text.
   • Có thể thử với các giá trị khác như leading (trái) hoặc trailing (phải).
6. Tìm hiểu về khoảng cách mặc định và cách thay đổi:
   • Mặc định, các view trong VStack sẽ có một khoảng cách nhất định.
   • Để thay đổi khoảng cách này, có thể sử dụng VStack(spacing: 0) để không có khoảng cách.
   • Command-click vào VStack và chọn Jump to Definition/Initializer để xem chi tiết về cấu trúc và các tham số.
7. Sử dụng code folding:
   • Sử dụng code folding để thu gọn các khối code dài, giúp code dễ đọc và dễ quản lý hơn.
   • Có thể dùng các phím tắt:
     • Option + Command + Left Arrow: Thu gọn code block hiện tại.
     • Option + Command + Right Arrow: Mở rộng code block hiện tại.
8. Sử dụng maxWidth(.infinity) để mở rộng view chiếm hết chiều rộng có sẵn:
   • Thay vì sử dụng .frame với chiều rộng cố định, có thể sử dụng .frame(height: 150) để giữ chiều cao cố định.
   • Sau đó sử dụng .frame(maxWidth: .infinity) để text view chiếm toàn bộ chiều rộng có sẵn
   • Để padding hiển thị chính xác, phải đưa modifier .padding() xuống dưới cùng của chuỗi modifiers, sau border và frame.

Video cung cấp rất nhiều kiến thức hữu ích, cho người mới bắt đầu làm quen với SwiftUI layout.

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