Como o título sugere, estou procurando compensar algumas visualizações, Circledentro de um HStack, porém, ao fazer isso, isso resulta em um comportamento estranho, onde o quadro do HStack não está mais agrupando o conteúdo corretamente. Preciso que essa ação "Deslocamento" ainda permita o preenchimento adequado à esquerda e à direita, sem espaço vazio. Também considerei usar um ZStack, mas acho que isso pode ser complicado, pois preciso "embrulhar" meu conteúdo, em vez de ocupar todo o espaço disponível.
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)