SwiftUI自定义AlignmentGuides - ShenYj/ShenYj.github.io GitHub Wiki

自定义 AlignmentGuides

示例代码

  • 默认代码

    import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack() {
            VStack {
                Text("@twostraws")
                Text("wei-xian")
                    .foregroundColor(.blue)
                    .frame(width: 64, height: 64)
            }
            
            VStack {
                Text("Full name:")
                Text("WEI XIAN")
                    .font(.largeTitle)
            }
        }
    }
}

    效果图

    .

    现在想要在两个 VStack 之间建立一种对齐规则，让第一个VStack中的第一行Text和第二个VStack中的第二个Text垂直对齐， 这时可以借助 AlignmentID 协议来实现这个效果

  • 自定义对齐方式后

    import SwiftUI

extension VerticalAlignment {
    
    struct MidAccountAndName: AlignmentID {
        
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.top]
        }
    }

    static let midAccountAndName = VerticalAlignment(MidAccountAndName.self)
}

struct ContentView: View {
    
    var body: some View {
        HStack(alignment: .midAccountAndName) {
            VStack {
                Text("@twostraws")
                    .alignmentGuide(.midAccountAndName, computeValue: { context in context[VerticalAlignment.center] })
                Text("wei-xian")
                    .foregroundColor(.blue)
                    .frame(width: 64, height: 64)
            }
            
            VStack {
                Text("Full name:")
                Text("WEI XIAN")
                    .alignmentGuide(.midAccountAndName, computeValue: { context in context[VerticalAlignment.center] })
                    .font(.largeTitle)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

    效果图

    .

ShenYj.github.io - 简书地址 - 返回首页

⚠️ **GitHub.com Fallback** ⚠️