正如标题所示,我希望偏移一些视图,HStack
内部的Circle
,然而这样做会导致HStack的框架不再正确包装内容的奇怪行为.我需要这个"偏移"操作,以便仍然允许适当的前导和尾随填充,而不存在空格.我也考虑过使用ZStack
,但我觉得这可能很麻烦,因为我需要它来"包装"我的内容,而不是占用所有可用的空间.
HStack {
ForEach(novaraUsers.indices, id: \.self) { index in
let user = novaraUsers[index]
if index < visibleUserCount + 1 {
Group {
if index < visibleUserCount {
Circle()
.fill(.white)
.stroke(Color.getRandomColor(from: user.username), lineWidth: 4)
.foregroundColor(.white)
.frame(width: 50, height: 50)
.overlay(
Text(user.username.prefix(1))
.font(.title)
.foregroundColor(.black)
.font(.h1)
)
} else {
Circle()
.fill(.white)
.stroke(Color.getRandomColor(from: String(novaraUsers.count)), lineWidth: 4)
.foregroundColor(.white)
.frame(width: 50, height: 50)
.overlay(
Text("\(moreThanCount)+")
.font(.title)
.foregroundColor(.black)
.font(.h1)
)
}
}
.offset(x: CGFloat(offsetPerCircle * index) * -1)
}
}
}
.frame(width: CGFloat(50 * (visibleUserCount + moreThanCount)))
.border(.black, width: 2)