SwiftUI #20: Prioridades

Source: Dev.to

Introducción

En SwiftUI, un Stack divide el espacio de forma equidistante entre sus vistas. Si las vistas no caben, asigna un tamaño fijo a los Image y reduce el tamaño de los Text.

Ejemplo inicial

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
        }
    }
}

En este ejemplo, el contenido de los Text está truncado por el uso de .lineLimit(1). De lo contrario, ocuparía más de una línea.

Cambiando la prioridad de un Text

Para que un Text se muestre por completo, se debe cambiar su prioridad mediante layoutPriority(_:). La prioridad por defecto de una vista para pintarse es 0. Una vista tomará tanto espacio como le sea posible cuanto mayor sea su prioridad.

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .layoutPriority(100)   // Prioridad alta
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
        }
    }
}

Uso de fixedSize

fixedSize(horizontal:vertical:) fija la vista a su tamaño ideal. Si no se especifica ningún argumento, el tamaño se fija en ambas dimensiones. Esta función tiene incluso más prioridad que layoutPriority(_:); cuando está activa, la vista tomará el tamaño que necesita sin importar la prioridad de los demás elementos.

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .fixedSize()           // Fija el tamaño del texto
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .layoutPriority(100)   // Prioridad alta para este texto
        }
    }
}

En este último ejemplo, el primer Text se muestra completo gracias a fixedSize(), mientras que el segundo Text obtiene más espacio mediante una alta layoutPriority.