Biên Soạn Mã với Ngăn Xếp và Khối Hình

Xây Dựng với Ngăn Xếp và Khối Hình

Biên Soạn Mã với Ngăn Xếp và Khối Hình

Viết mã cho ảnh chân dung tự họa bằng cách sử dụng ngăn xếp, khối hình và bổ từ.

Thời gian ước tính để hoàn thành hướng dẫn này:

35 phút

Khám phá các công cụ của SwiftUI.

Sử dụng các công cụ sau đây để tạo ảnh chân dung tự họa.

Sử dụng ngăn xếp và khối hình.

Sử dụng ngăn xếp độ sâu và thêm khối hình cho phần đầu.

Bước 1

Thay đổi VStack thành ZStack (ngăn xếp độ sâu).

Bước 2

Mở danh sách chế độ xem và cuộn xuống dưới cùng để tìm các hình viên nang, hình tròn, hình elip, hình chữ nhật và hình chữ nhật bo tròn.

Bước 3

Thêm khối hình vào ZStack để làm phần đầu của bạn. Sử dụng RoundedRectangle cho khuôn mặt vuông, hoặc Capsule cho khuôn mặt tròn hơn.

Mẹo

Cần nhập bán kính góc cho hình chữ nhật bo góc tròn.

Điều chỉnh kích thước của khối hình.

Sử dụng bổ từ frame để xác định kích thước của khối hình.

Bước 1

Thêm một dòng trống bên dưới hình viên nang, sau đó mở danh sách bổ từ.

Bước 2

Tìm kiếm Khung hình (frame) và chạm vào để thêm vào mã của bạn.

Bước 3

Điền các giá trị tương đối cho chiều cao và chiều rộng để tạo nên phần đầu.

Thêm màu sắc.

Sử dụng bổ từ foregroundStyle để tô màu cho khối hình.

Bước 1

Thêm một dòng trống bên dưới frame, sau đó mở danh sách bổ từ.

Bước 2

Nhập kiểu nền trước(foregroundStyle) vào thanh tìm kiếm. Chạm vào đó để thêm vào mã của bạn.

Bước 3

Để thay đổi màu, hãy chọn mã bên trong dấu ngoặc đơn và mở danh sách màu.

Bước 4

Chạm vào màu bất kỳ để thêm màu đó vào mã của bạn.

Mẹo

Bạn có thể tạo màu sắc của riêng mình. Hãy chọn một trong các đoạn mã, sau đó chỉnh sửa giá trị cho phù hợp với tông màu da của bạn.

Chuyển chế độ xem.

Thêm phần cổ, sau đó dịch chuyển phần cổ xuống bằng cách sử dụng offset.

Bước 1

Áp dụng kiến thức bạn đã học để thêm hình chữ nhật cho phần cổ và điều chỉnh kích thước bằng bổ từ frame.

Bước 2

Thêm một dòng trống bên dưới hình chữ nhật, sau đó tìm kiếm từ lệch (offset) trong danh sách bổ từ.

Bước 3

Chạm vào offset và chỉnh sửa giá trị để chuyển hình xuống dưới. Bạn có thể xóa bất kỳ tham số nào mà bạn không sử dụng.

Bước 4

Di chuyển phần cổ xuống dưới phần đầu.

Chọn hình chữ nhật và bất kỳ bổ từ nào mà bạn đã thêm. Cắt và dán mã vào phần trên cùng ngăn xếp độ sâu. Sau đó thay đổi màu sắc để phù hợp với phần đầu.

Bước 5

Áp dụng kiến thức bạn đã học được để thêm áo sơ mi, đặt áo ở vị trí chính xác trên màn hình và tô màu cho áo.

Cắt xén khối hình.

Cắt xén một khối hình để tạo tóc mái hoặc tóc ngắn.

Bước 1

Thêm một hình tròn cho mái tóc của bạn. Sử dụng frame làm cho tóc có chiều rộng bằng với phần đầu hoặc lớn hơn một chút.

Bước 2

Thêm một dòng trống bên dưới hình tròn. Nhập .trim và chạm vào quay lại khi dòng này xuất hiện sau khi hoàn thành mã.

Lưu ý, bổ từ trim phải nằm ngay bên dưới hình.

Bước 3

Thử nghiệm với các giá trị cho vị trí bắt đầu và kết thúc phần cắt.

Bước 4

Điều chỉnh vị trí của tóc mái hoặc tóc ngắn. Tiếp tục thêm mọi thành phần còn lại để hoàn thành mái tóc.

Mẹo

Nếu bạn có hơn 10 chế độ xem trong một ngăn xếp, bạn sẽ nhận được cảnh báo “Extra arguments at position…” (Thừa đối số tại vị trí...).

Nếu cảnh báo này xuất hiện, hãy nhóm các thành phần như bạn nhìn thấy ở đây.

Thêm bóng đổ.

Sử dụng bóng đổ để tách biệt phần đầu và phần cổ.

Bước 1

Xác định vị trí khối hình tạo ra phần đầu của bạn trong mã. Thêm một dòng trống bên dưới khối hình, sau đó tìm kiếm từ bóng đổ (shadow) trong danh sách bổ từ.