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

Question

我希望能够在ZStack. 这些东西有些在 aScrollView中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?

标签： swiftswiftuialignment

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

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