如何让自定义对齐指南渗透到 SwiftUI 中的 ScrollView答案

【问题标题】：How to have a custom alignment guide permeate a ScrollView in SwiftUI如何让自定义对齐指南渗透到 SwiftUI 中的 ScrollView
【发布时间】：2021-09-14 18:57:13
【问题描述】：

我希望能够对齐 ZStack 中的内容。其中一些东西在ScrollView 中的ZStack 中，而有些则不是。我可以让ScrollView 中的东西相互对齐，ScrollView 之外的东西相互对齐，但我无法让它们全部对齐。如果我只是删除ScrollView，我可以这样做，例如：

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)
                }
            }
        }
    }
}

这就是我想要的结果：

但是这段代码：

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)
                    }
                }
            }
        }
    }
}

导致这种情况，这是不可取的：

谁能帮助我让以前的行为与ScrollView 协同工作？

【问题讨论】：

我很好奇，为什么它必须在 ZStack 中？您似乎在并排排列，这是 HStack 的工作。
我不知道如何在不使用 ZStack 的情况下让矩形覆盖 HStack？

标签： swift swiftui alignment

【解决方案1】：

这个怎么样？

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)
            }
        }
    }
}

诀窍是在您的 VStack 中的 HStack 的另一侧使用 width: 0 的占位符。我制作了字体变量，以便您可以更改相对大小而不会意外弄乱对齐方式。在 SwiftUI 中通常有一种简单的方法来实现您的布局，并让操作系统为您完成工作。

【讨论】：