layout - SwiftUI从中心向右水平对齐
问题描述
我正在尝试将动态视图集合(即不同数量的视图)与居中视图的右侧对齐,而不将中心视图从其原始中心位置移动。
例如,中心视图是Text("12")
右侧视图,[Text("+3"), Text("+10"), Text("-1")]
所以我希望右侧的视图12
显示在其右侧,而12
在屏幕上水平居中:
| 12 +3 +10 -1 |
如果我尝试使用HStack
将12
远离中心。有我可以使用的视图修饰符吗?前任。Text("12").alignToRight(...)
此解决方案将集合与屏幕右边缘的左侧对齐,但这不是一回事。
ZStack {
Text("12")
HStack(spacing: 4) {
Spacer()
Text("+3")
Text("+10")
Text("-1")
}
}
我宁愿不必HStack
在左侧复制然后使其消失以平衡HStack
右侧(这是创建布局的一种荒谬方式,而且我在此处提供的示例实际上很简单我必须使用ForEach
动态集合),即
HStack {
Spacer()
HStack(spacing: 4) {
Spacer()
Text("+3")
Text("+10")
Text("-1")
}
.opacity(0)
Text("12")
HStack(spacing: 4) {
Spacer()
Text("+3")
Text("+10")
Text("-1")
}
Spacer()
}
使用类似的东西Text("12").overlay(myCollectionView.offset(x: 16)
也很有趣,因为中心文本的字体大小会有所不同,所以我也必须手动猜测和调整偏移量——我宁愿在两个视图之间有一个填充。
解决方案
这是基于对齐指南的可能方法。使用 Xcode 11.3 / iOS 13.3 测试。
定义自定义对齐
extension HorizontalAlignment {
private enum HCenterAlignment: AlignmentID {
static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
return dimensions[HorizontalAlignment.center]
}
}
static let hCenterred = HorizontalAlignment(HCenterAlignment.self)
}
使用自定义对齐指南将所需的内部元素HStack
与外部对齐VStack
struct TestRightCenterred: View {
var body: some View {
GeometryReader { gp in
VStack(alignment: .hCenterred) {
HStack(spacing: 4) {
Text("12").border(Color.red) // << just for test
.alignmentGuide(.hCenterred, computeValue: { $0.width / 2.0 })
Text("+3")
Text("+10")
Text("-1")
}
}
.frame(maxWidth: gp.size.width, alignment: Alignment(horizontal: .hCenterred, vertical: .center))
}
}
}