我正在创建一个 iOS 扫雷游戏,并希望在顶部有一个包含三条信息的栏:
- 高分(奖杯符号旁边)[左]
- 当前时间(计时器符号旁边)[CENTER]
- 剩余炸弹数量(炸弹符号旁边)[右]
然而,正如您在底部的图片中看到的那样,元素并不是均匀对齐的 - 我猜垫片自动具有相同的尺寸。因此,由于屏幕左侧的文本比右侧的文本宽,因此中间的文本会向右偏移。
如何对齐这些项目,使中心时间/图像与左侧/右侧的其他对象完全位于中间?
我的代码如下所示:
struct GameView: View {
@EnvironmentObject var game: Game
@State var labelHeight = CGFloat.zero
var body: some View {
VStack(alignment: .center, spacing: 10) {
Text("MINESWEEPER")
.font(.system(size: 25, weight: .bold, design: .monospaced))
.kerning(3)
.foregroundColor(.red)
HStack(alignment: .center, spacing: 5) {
Image(systemName: "rosette")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(.black)
Text(game.highScoreString)
.font(.system(size: 15, weight: .bold, design: .monospaced))
.foregroundColor(.black)
Spacer()
Image(systemName: "timer")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(.black)
Text(game.timerString)
.font(.system(size: 15, weight: .bold, design: .monospaced))
.foregroundColor(.black)
Spacer()
Image("top_bomb")
.resizable()
.aspectRatio(contentMode: .fit)
Text(String(game.bombsRemaining))
.font(.system(size: 15, weight: .bold, design: .monospaced))
.foregroundColor(.black)
.overlay(GeometryReader(content: { geometry in
Color.clear
.onAppear(perform: {self.labelHeight = geometry.frame(in: .local).size.height})
}))
}
.frame(width: UIScreen.main.bounds.width * 0.9, height: labelHeight, alignment: .center)
BoardView()
}
}
}
不要通过垫片对齐,而是将每个部分移动到单独的视图中,例如LeftHeader
, CenterHeader
, and RightHeader
并使用框架对齐,这可以通过相同的尺寸提供精确的分隔,例如
HStack {
LeftHeader()
.frame(maxWidth: .infinity, alignment: .leading)
CenterHeader()
.frame(maxWidth: .infinity, alignment: .center)
RightHeader()
.frame(maxWidth: .infinity, alignment: .trailing)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)