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

如何解决如何让自定义对齐指南渗透 SwiftUI 中的 ScrollView

我希望能够在 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,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 一致？

解决方法

这个怎么样？

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 中通常有一种简单的方法来实现您的布局，让操作系统为您完成工作。