list - 仅将一个对象与 HStack 中的中心对齐
问题描述
我正在尝试在 SwiftUI 中创建一个简单的夹具列表(一个团队与另一个团队的列表)。“vs”Text
字段需要在屏幕上居中对齐,team1 紧邻此左侧,team2 紧邻右侧。下图显示了一个简单的示例。请注意,vs 始终出现在中心线上,并且团队名称基本上是与“vs”Text
框对齐的前导或尾随...
如果 3 个文本项以 simple 对齐HStack
,则这些文本字段的总宽度在屏幕中央对齐,因此“vs”Text
字段将在屏幕上左右移动。
我相信我可以使用几何阅读器在上面创建所需的效果,但这感觉有点费力,我想知道是否有一个简单的对齐类型或扩展可以用来创建所需的效果?
解决方案
您可以使用对齐指南。这个答案也vs
以屏幕为中心,而不仅仅是相对于彼此。
代码:
struct ContentView: View {
private let games: [Game] = [
Game("Manchester United", vs: "Arsenal"),
Game("Liverpool", vs: "Newcastle United")
]
var body: some View {
ZStack(alignment: .centerVs) {
Color.clear
.frame(height: 0)
.frame(maxWidth: .infinity)
.alignmentGuide(.centerVs) { d in
d[HorizontalAlignment.center]
}
VStack(alignment: .centerVs) {
ForEach(games) { game in
HStack {
Text(game.team1)
Text("vs")
.alignmentGuide(.centerVs) { d in
d[HorizontalAlignment.center]
}
Text(game.team2)
}
}
}
}
}
}
struct Game: Identifiable {
let id = UUID()
let team1: String
let team2: String
init(_ team1: String, vs team2: String) {
self.team1 = team1
self.team2 = team2
}
}
extension HorizontalAlignment {
private struct CenterVsAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
context[HorizontalAlignment.center]
}
}
static let centerVs = HorizontalAlignment(CenterVsAlignment.self)
}
extension Alignment {
static let centerVs = Alignment(horizontal: .centerVs, vertical: .center)
}
结果:
推荐阅读
- javascript - Django ajax:如何将 jquery 变量传递给 url
- bash - Azure Functions:我调用“func new”时超时
- javascript - 在 Javascript 中递增 MAX_SAFE_INTEGER
- javascript - 如何停止“setInterval”功能?
- json - 安排从 Google Cloud Storage 到 BigQuery 的传输
- python - Xpath - 我什至只得到 1 个元素 - 检查器工具显示 7
- python - Python 和 pandas:如何使用 df.loc 根据条件创建新列?
- c# - IIS 停止并出现错误消息“HTTP 错误 503。服务不可用”
- r - 如何在闪亮的 r 中使用条件面板()
- swift - Xcode - 向 .gitignore 添加条目不起作用