隐式 center
⚠️ 红色的线为对齐参考线
struct ImplictDemo: View {
var body: some View {
VStack(alignment: .center) {
LabelView(title: "Authors", color: .green)
.alignmentGuide(HorizontalAlignment.center, computeValue: { dimension in
30
})
LabelView(title: "Authors", color: .red)
.alignmentGuide(HorizontalAlignment.center, computeValue: { dimension in
90
})
LabelView(title: "Authors", color: .blue) // implict guide = d[.center]
}
.border(Color.black)
}
}
struct LabelView: View {
let title: String
let color: Color
var body: some View {
Text(title)
.padding(.vertical, 8.0)
.padding(.horizontal, 40.0)
.background(color)
.clipShape(Capsule())
}
}
隐式 leading
struct ImplictDemo: View {
var body: some View {
VStack(alignment: .leading) {
LabelView(title: "Authors", color: .green)
.alignmentGuide(.leading, computeValue: { dimension in
30
})
LabelView(title: "Authors", color: .red)
.alignmentGuide(.leading, computeValue: { dimension in
90
})
LabelView(title: "Authors", color: .blue) // implict guide = d[.leading]
}
.border(Color.black)
}
}
隐式 traling
struct ImplictDemo: View {
var body: some View {
VStack(alignment: .trailing) {
LabelView(title: "Authors", color: .green)
.alignmentGuide(.trailing, computeValue: { dimension in
30
})
LabelView(title: "Authors", color: .red)
.alignmentGuide(.trailing, computeValue: { dimension in
90
})
LabelView(title: "Authors", color: .blue) // implict guide = d[.trailing]
}
.border(Color.black)
}
}
跨View Alignment
自定义 Align
extension VerticalAlignment {
struct SelectAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
context[VerticalAlignment.center]
}
}
static let select = VerticalAlignment(SelectAlignment.self)
}
实现效果
单击某一行和用户图标对齐
struct AlignCrossView: View {
@State private var selectedIndex = 0
let names = [
"onevcat | Wei Wang",
"zaq | Hao Zang",
"tyyqa | Lixiao Yang"
]
var body: some View {
HStack(alignment: .select) {
Text("User:")
.font(.footnote)
.foregroundColor(.green)
.alignmentGuide(VerticalAlignment.center, computeValue: { dimension in
dimension[.bottom] + CGFloat(self.selectedIndex) * 20.3
})
Image(systemName: "person.circle")
.foregroundColor(.green)
.alignmentGuide(.select, computeValue: { dimension in
dimension[VerticalAlignment.center]
})
VStack(alignment: .leading) {
ForEach(0..<names.count, id: \.self) { index in
Text(names[index])
.foregroundColor(self.selectedIndex == index ? .green : .primary)
.onTapGesture {
self.selectedIndex = index
}
.alignmentGuide(self.selectedIndex == index ? .select : .center, computeValue: { dimension in
if self.selectedIndex == index {
return dimension[VerticalAlignment.center]
} else {
return 0
}
})
}
}
}
}
}
另一个自定义对齐参考
先上默认的布局方式代码
struct CircleButton: View {
var action: (() -> Void)?
var symbol: String
var body: some View {
ZStack {
Circle()
.fill(.gray.opacity(0.5))
Image(systemName: symbol)
.font(.system(size: 20))
}
.onTapGesture {
action?()
}
}
}
VStack {
HStack {
Text("Inbox")
CircleButton(symbol: "tray.and.arrow.down")
.frame(width: 50, height: 50)
}
HStack {
Text("Sent")
CircleButton(symbol: "tray.and.arrow.up")
.frame(width: 50, height: 50)
}
CircleButton(symbol: "line.3.horizontal")
.frame(width: 60, height: 60)
}
默认布局效果
想要实现的效果:
圆型按钮尾部对齐
VStack(alignment: .menu) {
HStack {
Text("Inbox")
CircleButton(symbol: "tray.and.arrow.down")
.frame(width: 50, height: 50)
.alignmentGuide(.menu, computeValue: { dimension in
dimension[HorizontalAlignment.center]
})
}
HStack {
Text("Sent")
CircleButton(symbol: "tray.and.arrow.up")
.frame(width: 50, height: 50)
.alignmentGuide(.menu, computeValue: { dimension in
dimension[HorizontalAlignment.center]
})
}
CircleButton(symbol: "line.3.horizontal")
.frame(width: 60, height: 60)
}