How to: Implement Programatic Constraints - ios

Question

I am working on learning programmatic UI via Swift UI... Everything is fun so far I recommend anyone "afraid" of Swift UI should jump right in. Is anyone able to correctly constrain the code below? It only fits correctly in the Swift UI generated preview which was an iPhone 8 device. Any suggestions would be appreciated I have tried .aspectRatio to start but no good progress has been made yet.
struct ContentView: View {
var body: some View {
VStack {
HStack {
VStack(alignment: .leading) {
//Header
StrokeText(text: "App Name", width: 0.5, color: .black)
.foregroundColor(.white)
.font(.system(size: 45, weight: .bold))
.position(x: 188, y: 35)
.frame(maxWidth: .infinity, maxHeight: .infinity,
alignment: .center)
.background(Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0)).edgesIgnoringSafeArea(.all)
//Data View
ZStack(alignment: .leading) {
Color.init(red: 0.33, green: 0.56, blue: 0.27)
.position(x: 188, y: -114)
.aspectRatio(contentMode: .fit)
//Todays List
VStack(alignment: .leading) {
Button(action: {}){
Text(" Today's List ")
.bold()
.font(Font.custom("Helvetica Neue", size: 21.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.position(x: 85, y: 80)
}
}
//Tomorrows List
VStack(alignment: .leading) {
Button(action: {}){
Text("Tomorrow's List ")
.bold()
.font(Font.custom("Helvetica Neue", size: 21.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.position(x: 285, y: 80)
}
}
//This Month
VStack(alignment: .leading) {
Button(action: {}){
Text(" This Month ")
.bold()
.font(Font.custom("Helvetica Neue", size: 22.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.position(x: 85, y: 148)
}
}
//Next Month
VStack(alignment: .leading) {
Button(action: {}){
Text(" Next Month ")
.bold()
.font(Font.custom("Helvetica Neue", size: 22.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.position(x: 289, y: 148)
}
}
//3% Yeild Or Higher
VStack(alignment: .leading) {
Button(action: {}){
Text(" 3% Yield or More")
.bold()
.font(Font.custom("Helvetica Neue", size: 17.6))
.padding(18)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.position(x: 85, y: 215)
}
}
//5% Yield Or Higher
VStack(alignment: .leading) {
Button(action: {}){
Text(" 5% Yield or More ")
.bold()
.font(Font.custom("Helvetica Neue", size: 17.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.green)
.cornerRadius(12)
.position(x: 282, y: 215)
}
}
//App Help
VStack(alignment: .leading) {
Button(action: {}){
Text(" App Help ")
.bold()
.font(Font.custom("Helvetica Neue", size: 22.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.yellow)
.cornerRadius(12)
.position(x: 83, y: 283)
}
}
//More Apps
VStack(alignment: .leading) {
Button(action: {moreApps()}){
Text(" More Apps ")
.bold()
.font(Font.custom("Helvetica Neue", size: 22.0))
.padding(18)
.foregroundColor(Color.white)
.background(Color.red)
.cornerRadius(12)
.position(x: 285, y: 283)
}
}
}
}
}
}
}
}
struct StrokeText: View {
let text: String
let width: CGFloat
let color: Color
var body: some View {
ZStack{
ZStack{
Text(text).offset(x: width, y: width)
Text(text).offset(x: -width, y: -width)
Text(text).offset(x: -width, y: width)
Text(text).offset(x: width, y: -width)
}
.foregroundColor(color)
Text(text)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}