How to have a custom alignment guide permeate a ScrollView in SwiftUI - swift

Question

I want to be able to align things in a ZStack. Some of these things are in a ScrollView in the ZStack, and some are not. I can get the things that are in the ScrollView to align with each other, and things outside the ScrollView to align with each other, but I cannot get them to all align. I can do if I just remove the ScrollView, so for instance:
extension VerticalAlignment {
enum MidAccountAndName: AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
d[.top]
}
}
static let midAccountAndName = VerticalAlignment(MidAccountAndName.self)
}
struct ContentView: View {
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .midAccountAndName)) {
Rectangle()
.alignmentGuide(.midAccountAndName) { d in
d[VerticalAlignment.center]
}
.frame(width: 1000, height: 2)
HStack(alignment: .midAccountAndName) {
VStack {
Text("Left-hand text")
.alignmentGuide(.midAccountAndName) { d in
d[VerticalAlignment.center]
}
Text("More text")
}
VStack {
Text("Right-hand text")
Text("Title")
.alignmentGuide(.midAccountAndName) { d in
d[VerticalAlignment.center]
}
.font(.largeTitle)
}
}
}
}
}
Results in this, which is what I want:
But this code:
extension VerticalAlignment {
enum MidAccountAndName: AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
d[.top]
}
}
static let midAccountAndName = VerticalAlignment(MidAccountAndName.self)
}
struct ContentView: View {
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .midAccountAndName)) {
Rectangle()
.alignmentGuide(.midAccountAndName) { d in
d[VerticalAlignment.center]
}
.frame(width: 1000, height: 2)
ScrollView {
HStack(alignment: .midAccountAndName) {
VStack {
Text("Left-hand text")
.alignmentGuide(.midAccountAndName) { d in
d[VerticalAlignment.center]
}
Text("More text")
}
VStack {
Text("Right-hand text")
Text("Title")
.alignmentGuide(.midAccountAndName) { d in
d[VerticalAlignment.center]
}
.font(.largeTitle)
}
}
}
}
}
}
Results in this, which is undesirable:
Can anyone help me get the former behaviour working in concert with the ScrollView?

Answer 1

How about this?
struct ContentView: View {
let largeFont = Font.largeTitle
let smallFont = Font.body
var body: some View {
HStack {
HStack {
VStack {
Text("|")
.font(largeFont)
.frame(width: 0)
Text("Left-hand text")
Text("More Text")
}
.font(smallFont)
}
HStack {
VStack {
Text("Right-hand text")
HStack {
Text("Title")
.font(largeFont)
}
}
.font(smallFont)
}
}
}
}
The trick is to use a placeholder at width: 0 on the other side of the HStack in your VStacks. I made the font variables so that you could change the relative sizes without accidentally messing up the alignment. There is usually a simple way in SwiftUI to achieve your layout, and let the OS do the work for you.