I was following the Swiftui tutorial at section 6 (https://developer.apple.com/tutorials/swiftui/creating-and-combining-views) to use a circle image to create an overlapping effect on the map. Turns out that when using a GeometryReader, the bottom padding was not working at all:
VStack{ MapView().frame(height:300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment:.leading){
Text(
"Turtle Rock"
)
.font(
.title
)
HStack {
Text(
"Joshua Tree National Park"
)
.font(
.subheadline
)
Spacer()
Text(
"California"
)
.font(
.subheadline
)
}
}.padding(/*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
}
This is the code for the CicleImage view: GeometryReader(content: { geometry in
let _ = print(
geometry.size.width
)
AsyncImage(
url: URL(
string: "https://cms.rationalcdn.com/v3/assets/blteecf9626d9a38b03/bltf5486c52361f2012/6144fafd39dff133fc23de9f/img-ios.png"
)
)
.frame(width: geometry.size.width)
.clipShape(
Circle()
).overlay{
Circle().stroke(
.white,
lineWidth: 4
)
}.shadow(
radius: 7
)
})