Với Swift 5.2 và iOS 13.4, theo nhu cầu của bạn, bạn có thể sử dụng một trong các ví dụ sau để điều chỉnh các VStackràng buộc hàng đầu và khung kích thước đầy đủ.
Lưu ý rằng tất cả các đoạn mã bên dưới đều dẫn đến cùng một màn hình, nhưng không đảm bảo khung hiệu quả của VStackcũng như số lượng Viewphần tử có thể xuất hiện trong khi gỡ lỗi phân cấp chế độ xem.
1. frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)Phương pháp sử dụng
Cách tiếp cận đơn giản nhất là đặt khung của bạn VStackvới chiều rộng và chiều cao tối đa, đồng thời vượt qua sự căn chỉnh cần thiết trong frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:):
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.background(Color.red)
}
}
Thay vào đó, nếu việc đặt khung tối đa với căn chỉnh cụ thể cho các Views của bạn là một mẫu phổ biến trong cơ sở mã của bạn, bạn có thể tạo một phương thức mở rộng Viewcho nó:
extension View {
func fullSize(alignment: Alignment = .center) -> some View {
self.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: alignment
)
}
}
struct ContentView : View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.fullSize(alignment: .topLeading)
.background(Color.red)
}
}
2. Sử dụng Spacers để bắt buộc căn chỉnh
Bạn có thể nhúng VStackvào bên trong một kích thước đầy đủ HStackvà sử dụng dấu cuối và dấu dưới Spacerđể bắt buộc VStackcăn chỉnh hàng đầu:
struct ContentView: View {
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
Spacer()
}
Spacer()
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.background(Color.red)
}
}
3. Sử dụng ZStacknền kích thước đầy đủView
Ví dụ này cho thấy cách nhúng VStackvào bên trong của bạn một ZStackliên kết hàng đầu. Lưu ý cách Colorchế độ xem được sử dụng để đặt chiều rộng và chiều cao tối đa:
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Color.red
.frame(maxWidth: .infinity, maxHeight: .infinity)
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
}
}
}
4. Sử dụng GeometryReader
GeometryReadercó khai báo sau :
Chế độ xem vùng chứa xác định nội dung của nó dưới dạng một hàm có kích thước và không gian tọa độ riêng. [...] Dạng xem này trả về kích thước ưu tiên linh hoạt cho bố cục mẹ của nó.
Đoạn mã dưới đây cho biết cách sử dụng GeometryReaderđể căn chỉnh của bạn VStackvới các ràng buộc hàng đầu và khung kích thước đầy đủ:
struct ContentView : View {
var body: some View {
GeometryReader { geometryProxy in
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
width: geometryProxy.size.width,
height: geometryProxy.size.height,
alignment: .topLeading
)
}
.background(Color.red)
}
}
5. overlay(_:alignment:)Phương pháp sử dụng
Nếu bạn muốn căn chỉnh của mình VStackvới các ràng buộc hàng đầu trên kích thước đầy đủ hiện có View, bạn có thể sử dụng overlay(_:alignment:)phương pháp:
struct ContentView: View {
var body: some View {
Color.red
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.overlay(
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
},
alignment: .topLeading
)
}
}
Trưng bày:
