I am creating a user interface for a working program. I am able to lay things out with offsets but am trying as a learning experience to do the same with alignment guides. For the section heading labeled "Group 1" I am able to get the layout I want. What I cannot get to work are alignment guides for the associated rounded rectangle. It appears that the alignment guides with the rounded rectangle only affect the contents i.e. the text "Data Table". Below is a picture of the code output and the code. How, using alignment guides, can move the top rounded rectangle? To keep the picture small I just copied the left side of the output window. The top rounded rectangle is approximately centered in this window.
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Group1")
.font(Font.custom("Arial", size: 16))
.alignmentGuide(HorizontalAlignment.center, computeValue: { d in
print("\(d[HorizontalAlignment.leading])")
// print leading = 0.0
// print center = 27
// print trailing = 54
return d[HorizontalAlignment.leading] + 255
})
ZStack (alignment: Alignment(horizontal: .center, vertical: .center)) {
RoundedRectangle(cornerRadius: 10)
.fill(.white)
.alignmentGuide(HorizontalAlignment.center, computeValue: { d in
return d[HorizontalAlignment.leading] + 45
})
VStack (alignment: HorizontalAlignment.leading) {
NavigationLink(value: "Table1") {
Text("Data Table")
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.focusable(false)
} // end vstack
} // end zStack
.frame(width: 200, height: 60)
Text("Group2")
.font(Font.custom("Arial", size: 16))
.frame(width: 600, height: 20, alignment: .leading)
.padding(.leading, 35)
.padding(.top, 20)
.offset(x: 30)
ZStack {
RoundedRectangle(cornerSize: CGSize(width: 200, height: 60))
.stroke(Color(.clear), lineWidth: 1)
.frame(width: 200, height: 60, alignment: .leading)
.background(.white)
.cornerRadius(10)
.offset(x: -160)
VStack () {
NavigationLink(value: "Table2") {
Text("Data Table")
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.padding(.leading, 8)
.frame(width: 200, height: 20, alignment: .leading)
.offset(x: -160)
.focusable(false)
}
}
Text("Group3")
.font(Font.custom("Arial", size: 16))
.frame(width: 600, height: 20, alignment: .leading)
.padding(.leading, 35)
.padding(.top, 20)
.offset(x: 30)
ZStack {
RoundedRectangle(cornerSize: CGSize(width: 200, height: 60))
.stroke(Color(.clear), lineWidth: 1)
.frame(width: 200, height: 60, alignment: .leading)
.background(.white)
.cornerRadius(10)
.offset(x: -160)
VStack () {
NavigationLink(value: "Table3") {
Text("Data Table")
}
.font(Font.custom("Arial", size: 14))
.buttonStyle(.link)
.underline()
.padding(.leading, 8)
.frame(width: 200, height: 20, alignment: .leading)
.offset(x: -160)
.focusable(false)
}
}
.padding(.bottom, 20)
.navigationDestination(for: String.self) { command in
switch command {
case "Table1":
HStack {
CustomTableView(fundName: "Table1", numYears: 1)
.frame(width: 320, height: 345, alignment: .center)
.padding(.leading, 120)
.padding(.trailing, 160)
}
case "Table2":
HStack {
CustomTableView(fundName: "Table2", numYears: 1)
.frame(width: 320, height: 345, alignment: .center)
.padding(.leading, 120)
.padding(.trailing, 160)
}
case "Table3":
HStack {
CustomTableView(fundName: "Table3", numYears: 1)
.frame(width: 320, height: 345, alignment: .center)
.padding(.leading, 120)
.padding(.trailing, 160)
}
default:
let _ = print("problem in main view switch statement")
} // end switch
} // end navigation destination
}
.frame(width: 600, height: 400, alignment: .trailing)
}
}