Bố cục

Bố cục trong SwiftUI là một cuộc thương lượng ba bước, nắm được nó thì câu hỏi “sao cái này lại sai kích thước?” mới có lời giải.

1. View cha đề nghị một kích thước cho view con.
2. View con tự chọn kích thước của mình, và có quyền phớt lờ đề nghị đó.
3. View cha đặt con vào chỗ, chứ không có quyền đổi kích thước của nó.

Điểm thứ ba mới là chỗ gây bất ngờ. View cha không ép được kích thước lên con; nó chỉ đề nghị. Text lấy đúng bề rộng nội dung cần, Image lấy kích thước tự nhiên của nó, còn Rectangle thì lấy hết những gì được mời.

HStack {
    Text("Nhãn")
    Spacer()
    Image(systemName: "chevron.right")
}
.frame(width: 200)

frame không đổi kích thước của HStack — nó chèn vào một view mới, view này đề nghị 200 điểm cho stack rồi căn giữa bất cứ kích thước nào stack đã tự chọn.

Một khi mô hình đó nằm đúng chỗ, phần lớn lỗi bố cục thôi bí ẩn. Một view quá rộng là đã chấp nhận một lời đề nghị mà bạn không định đưa ra. Một view quá hẹp là đã tự chọn kích thước và phớt lờ bạn. Một view nằm sai chỗ là đã được view cha đặt vào đúng chỗ bạn bảo.

Ba chương nói về gì

Lượt bố cục trình bày cơ chế chi tiết: một lời đề nghị thật ra là gì (kể cả ba lời đề nghị đặc biệt vốn không phải kích thước), Text và Image trả lời ra sao, và cách đọc một bố cục đã ra sai bằng cách hỏi hai câu theo thứ tự — đã đề nghị gì, và đã chọn gì.

Stack, frame và căn chỉnh là bộ đồ nghề hằng ngày. Một stack chia không gian thế nào cho những đứa con muốn những phần khác nhau, vì sao Spacer không phải khoảng trống rỗng, frame thật sự làm gì, và các đường dẫn căn chỉnh cho phép một nhãn ở dòng này thẳng hàng với một nhãn ở dòng khác ra sao.

Tự viết một Layout dựng một container riêng bằng protocol Layout — đúng cái protocol mà HStack dùng. Nó ít kỳ bí hơn nghe có vẻ: hai phương thức bắt buộc, và đến cuối chương thì cuộc thương lượng là thứ bạn đã tự cài đặt chứ không còn là thứ bạn đọc về.

Thứ tự ở đây có ý nghĩa. Lượt bố cục là mô hình, stack là mô hình được áp dụng, còn Layout là mô hình được viết ra thành code.