es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

SwiftUI alinea un símbolo SF como texto junto a un texto

30 Jul, 2023 Programación

Necesito mostrar un símbolo SF (imagen) y un texto en una vista (como un título). Como el texto podría ser bastante largo, quiero que pase por debajo de la imagen en una segunda línea.

Resultado esperado (¡casi!):

enter image description here

Primero intenté usar un HStack con la imagen y el texto. Pero el texto no se coloca debajo de la imagen: la segunda línea comienza con un “relleno” a la izquierda (correspondiente al espacio izquierdo de la imagen).

Así que hice este código (para obtener la captura de pantalla anterior):

HStack(alignment:.top) {
    Text(Image(systemName: "circle.hexagongrid.circle"))
        .font(.caption)
        .foregroundColor(.pink)
    +
    Text("Un texto largo como ejemplo")
        .font(.title2).bold()
        .foregroundColor(.pink)
}
.frame(width:140)

Pero quiero alinear la imagen con el centro de la primera línea. El centro de la imagen debería estar verticalmente en el medio de la parte superior de “A” y la parte inferior de “g”.

Es importante que mi segunda (y más) línea pase debajo de mi imagen. Y no quiero una fuente más grande para la imagen.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear la imagen con el centro de la primera línea y asegurarse de que la segunda línea pase debajo de la imagen, puedes usar una combinación de ZStack, Text e Image.

    Aquí tienes un código de ejemplo que logra el resultado deseado:

    ZStack(alignment: .topLeading) {
    Text("Un texto largo como ejemplo")
        .font(.title2).bold()
        .foregroundColor(.pink)
    Image(systemName: "circle.hexagongrid.circle")
        .font(.caption)
        .foregroundColor(.pink)
        .alignmentGuide(.topLeading, computeValue: { dimension in
            -dimension.height/2
        })
}
.frame(width: 140)

    Explicación del código:

    • Utilizamos un ZStack con alignment establecido en .topLeading. Esto significa que los elementos se alinearán en la esquina superior izquierda del ZStack.
    • Primero agregamos el elemento Text con el texto largo. Establecemos la fuente y el color según se desee.
    • Luego agregamos el elemento Image con el símbolo SF. Establecemos la fuente y el color según se desee.
    • Para alinear la imagen con el centro de la primera línea, usamos el modificador alignmentGuide en la imagen. Establecemos la dimensión en .topLeading y calculamos el valor dividiendo la altura de la imagen por 2 y negándolo. Esto centra la imagen verticalmente sobre el texto.
    • Por último, establecemos el ancho del ZStack en 140 para que coincida con la captura de pantalla original.

    Esto debería darte un resultado similar a la captura de pantalla esperada.

Comments are closed.