a square, screen width, 10x padding, red background.
inside it, a little square, centered and a little square, top left corner, 10px padding, blue background for both.
Tell me that was easy, so that I know you're lying :)
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.fill(Color.red)
Rectangle()
.fill(Color.blue)
.frame(width: 100, height: 100)
HStack {
VStack {
Rectangle()
.fill(Color.blue)
.frame(width: 100, height: 100)
Spacer()
}
Spacer()
}
.padding(10)
}
.aspectRatio(1, contentMode: .fit)
.padding(10)
}
}The larger point being - placing squares on a page went from drag and dropping and setting a few constraints, to now doing zstack/hstack/vstack/spacer wizardry.
i wonder how one could go about implementing custom layout in swiftui, something like `layoutSubViews` so we could implement something simplified like:
View(layout: .grid) { ... }
View(layout: .stack(.vertical)) { ... }Very few iOS developers I know did "drag and drop"/IB development, layouts are typically done in code even in UIKit.
The zstack/hstack/vstack bits don't seem wizardy at all if you're used to looking at layouts in code.
struct ContentView: View {
var body: some View {
ZStack {
Color.red
Color.blue
.frame(width: 50, height: 50)
.padding(10)
Color.blue
.frame(width: 50, height: 50)
.position(x: 50/2, y: 50/2)
.padding(10)
}
.aspectRatio(1, contentMode: .fit)
.padding(10)
}
}Change frame (screen width) to 300, 500 to see why.
Now tell me, why did it break? Do you even know? Because I don't.
I don't know why half the shit works as it does, and I've written non-trivial SwiftUI code for 6 months. I did not have this problem with UIKit and interface builder.
Saying "you can't use GeometryReader" would be like saying you can't use UIKit's Auto Layout...