Início / coding / Perguntas / 79342794
Accepted
SilKirss
Asked: 2025-01-09 21:29:56 +0800 CST

Como definir o alinhamento filho do HStack de forma diferente

  • 772

Tenho o HStack com duas visualizações: Imagem e Texto. Gostaria de alinhar a Imagem no topo, mas o texto no centro do VerticalAlignment. No entanto, especificar o alinhamento .center para o Texto não resolve, ele ainda está posicionado no topo. Há algo que eu esteja esquecendo?

struct SwiftUIView: View {
    var body: some View {
        HStack(alignment: .top) {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .background(.green)

            HStack(alignment: .center) {
                Text("Text that has dynamic height and should be aligned center")
                    .background(.pink)
            }
        }
        .background(.gray)
    }
}

Visualizar captura de tela

swiftui

2 respostas

  1. Best Answer

    Se entendi corretamente, você quer que a imagem seja alinhada ao topo HStackquando o texto for mais alto que a imagem, e você quer que o texto seja centralizado verticalmente quando o texto for mais baixo que a imagem.

    Em vez de envolver o texto em outro HStack , você deve adicionar um frameao redor do texto.

    Text("Text that has dynamic height and should be aligned center")
    .background(.pink)
    .frame(minHeight: 100, alignment: .center)

    Este quadro (invisível) deve ter pelo menos a mesma altura da imagem (100pt), e o texto deve estar .centeralinhado dentro desse quadro.

    .centeré o valor padrão para alignment:, então escrever .frame(minHeight: 100)é suficiente. Eu o incluí apenas para que fique claro o que está acontecendo.

    Quando o texto é menor que a imagem:

    insira a descrição da imagem aqui

    Quando o texto é mais alto que a imagem:

    insira a descrição da imagem aqui

    • 0

  2. Se você sabe o tamanho da imagem, então uma maneira de alinhar o texto é aplicar um .alignmentGuide. O aninhado HStacknão é necessário:

    let starSize: CGFloat = 100

var body: some View {
    HStack(alignment: .top) {
        Image(systemName: "star.fill")
            .resizable()
            .frame(width: starSize, height: starSize)
            .background(.green)

        Text("Text that has dynamic height and should be aligned center")
            .background(.pink)
            .alignmentGuide(.top) { dimensions in
                min(0, (dimensions.height - starSize) / 2)
            }
    }
    .background(.gray)
}
    • 0

relate perguntas