我正在嘗試在 SwiftUI 中創建一個簡單的夾具串列（一個團隊與另一個團隊的串列）。“vs”Text欄位需要在螢屏上居中對齊，team1 緊靠其左側，team2 緊靠右側。下圖顯示了一個簡單的示例。請注意 vs 總是出現在中心線上，并且團隊名稱基本上與“vs”Text框對齊...
如果 3 個文本項在一個簡單的 中對齊HStack，則是這些文本欄位的總寬度在螢屏上居中對齊，因此“vs”Text欄位將在螢屏上左右移動。
我相信我可以使用幾何閱讀器創建上面所需的效果，但這感覺有點困難，我想知道是否有一個簡單的對齊型別或擴展可以用來創建所需的效果？
uj5u.com熱心網友回復：
您可以使用對齊指南。這個答案也vs以screen 為中心，而不僅僅是相對于彼此。
代碼：
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)
}
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/311507.html
下一篇：在串列中附加串列有一些問題