Início / coding / Perguntas / 77267153
Accepted
xTwisteDx
Asked: 2023-10-10 23:35:49 +0800 CST

Como faço para compensar uma visualização em um HStack, mas ainda restringir o quadro para corresponder ao deslocamento?

  • 772

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.

insira a descrição da imagem aqui

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)
swift

2 respostas

  1. Best Answer

    Uma maneira de conseguir esse layout é mudar a forma como os círculos são desenhados. Em vez de ter um círculo como visualização base com o texto como sobreposição, use o texto como visualização base e aplique o círculo como plano de fundo. Se o círculo for um pouco maior que a visualização base (o texto), você obterá o efeito de sobreposição que procura e nenhum deslocamento precisará ser usado.

    Assim:

    Group {
    if index < visibleUserCount {
        Text(user.username.prefix(1))
            .font(.title)
            .foregroundColor(.black)
            .font(.h1)
            .frame(width: 35, height: 35)
            .background {
                Circle()
                    .fill(.white)
                    .stroke(Color.getRandomColor(from: user.username), lineWidth: 4)
                    .foregroundColor(.white)
                    .frame(width: 50, height: 50)
            }
    } else {
        Text("\(moreThanCount)+")
            .font(.title)
            .foregroundColor(.black)
            .font(.h1)
            .frame(width: 35, height: 35)
            .background {
                Circle()
                    .fill(.white)
                    .stroke(Color.getRandomColor(from: String(novaraUsers.count)), lineWidth: 4)
                    .foregroundColor(.white)
                    .frame(width: 50, height: 50)
            }
    }
}
// Not needed
//.offset(x: CGFloat(offsetPerCircle * index) * -1)

    Jogadoras

    • 2

  2. A solução foi compensar o HStack após compensar Circle()no HStack.

        var totalOffset: CGFloat {
        var offset = 0
        for index in 0 ..< visibleUserCount + 1 {
            offset += offsetPerCircle * index
        }
        return CGFloat(offset)
    }

    E então adicionando o modificador aoHStack

    HStack {
   //Content
}
.offset(x: totalOffset / CGFloat((visibleUserCount + 1)))
    • 0

relate perguntas