diegoRodicio

View Categories

List

Tempo de lectura estimado: 5 minutos

A vista List presenta información nunha lista vertical de filas. Cada fila contén unha ou máis vistas contidas dentro dunha cela.

List() {
            Text("Levantarme")
            Text("Ducharme")
            Text("Almorzar")
            Text("Coller o bus para ir ao IES San Mamede")
            Text("Pasar unha gran mañá aprendendo SwiftUI")
            Text("Coller o bus para casa")
            Text("Xogar á PS5")
        }

Listas que inclúen múltiples compoñentes 

List() {
            HStack {
                Image(systemName: "trash.circle.fill")
                Text("Tirar o lixo")
            }
            HStack {
                Image(systemName: "person.2.fill")
                Text("Recoller aos nenos no cole")
            }
            HStack {
                Image(systemName: "car.fill")
                Text("Lavar o coche")
            }
        }

Separadores

É posible modificar a liña que separa cada elemento dunha lista:

  • .listRowSeparator(.hidden): Oculta a liña
  • .listRowSeparatorTint(cor): Colorea a liña
  • .listRowBackground(Image(imaxe)): Pon unha imaxe de fondo nun elemento nunha lista
List() {
            Text("Levantarme")
                .listRowSeparator(.hidden)
            Text("Ducharme")
            Text("Almorzar")
                .listRowSeparatorTint(.blue)
            Text("Coller o bus para ir ao IES San Mamede")
            Text("Xogar á PS5")
                .listRowBackground(Image("ps5").scaleEffect(0.07))
            Text("Cear")
            Text("Repasar PMDM")
                .listRowSeparatorTint(.yellow)
            Text("Deitarse")
        }

Listas dinámicas

Unha lista considérase dinámica cando contén un conxunto de elementos que poden cambiar co tempo: Os elementos pódense engadir, editar e eliminar e a lista actualízase dinámicamente para reflectir eses cambios.

Identificable (protocolo)

Para admitir unha lista deste tipo, cada elemento de datos que se mostrará debe estar contido dentro dunha clase ou estrutura que se axuste ao protocolo Identificable.

  • O protocolo Identificable require que a instancia conteña unha propiedade chamada id
  • A propiedade chamada id se pode utilizar para identificar de forma única cada elemento da lista.
  • A propiedade id pode ser de calquera tipo que se axuste ao protocolo Hashable, que inclúe os tipos String, Int ou UUID.
  • Se usamos o tipo UUID na propiedade id, o método UUID() pódese utilizar para xerar automaticamente un ID único para cada elemento da lista.

Así, o seguinte código implementa unha estrutura simple para un exemplo de lista de tarefas pendentes que se axusta ao protocolo Identificable.

Neste caso, o ID xérase automaticamente a través dunha chamada a UUID():

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}

Empregar listas dinámicas

Para empregar unha List dinámica, temos que ter un array de elementos que siguen o protocolo Identificable, tal e como expliquei no anterior apartado. Unha vez que temos o array:

  • Definimos unha List dos elementos do array (liña 24 da imaxe inferior)
  • Recorremos o array mediante a sentencia nome_variable in (no exemplo da imaxen, o nome_variable é item . Vemos este paso na liña 25 da imaxe inferior
  • Por cada elemento nome_variable do array, debuxamos as vistas que desexemos e accedemos aos datos do elemento nome_variable. Das liña 27 a 30, creamos un HStack co nome da tarefa e da imaxe.

Agora a lista xa non necesita unha vista para cada celda. No seu lugar, a lista itera a través do array de datos e reutiliza a mesma declaración HStack, simplemente conectando os datos apropiados para cada elemento do array.

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}

struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    var body: some View {
        List(lista){
            item in
            
            HStack {
                Image(systemName: item.nomeImaxe)
                Text(item.tarefa)
            }
        }
    }
}

ForEach – Contido estático e dinámico ao mesmo tempo

En situacións nas que o contido dinámico e estático debe mostrarse xuntos dentro dunha lista, a instrución ForEach pódese usar dentro do corpo da lista para iterar a través dos datos dinámicos á vez que se declaran entradas estáticas.

O seguinte exemplo inclúe un botón Toggle estático xunto cun bucle ForEach para o contido dinámico:

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}

struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    @State private var estadoBoton = true
    
    var body: some View {
        List {
            Toggle(isOn: $estadoBoton) {
                Text("Permitir notificacións")
            }
            
            ForEach(lista) { tarefa in
                HStack {
                    Image(systemName: tarefa.nomeImaxe)
                    Text(tarefa.tarefa)
                }
            }
        }
    }
}

Seccións

Unha List pódese dividir en seccións, incluíndo encabezamentos (headers) e pés (footers):

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}

struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    @State private var estadoBoton = true
    
    var body: some View {
        List {
            Section(header: Text("Axustes")){
                Toggle(isOn: $estadoBoton) {
                    Text("Permitir notificacións")
                }
            }
    
            Section(header: Text("Tarefas"), footer: Text("Non te esquezas de nada 🧐")){
                ForEach(lista) { tarefa in
                    HStack {
                        Image(systemName: tarefa.nomeImaxe)
                        Text(tarefa.tarefa)
                    }
                }
            }
        }
    }
}

Listas refrescables

Os datos que se amosan nunha pantalla a miúdo cambian co tempo.

  • O paradigma estándar dentro das aplicacións iOS é que o usuario realice un refresco cara abaixo para actualizar os datos mostrados.
  • Durante o proceso de actualización, a aplicación normalmente mostrará un indicador de progreso xiratorio despois do cal se amosan os datos máis recentes.

Para facilitar isto, SwiftUl proporciona o modificador refreshable(). Cando se aplica a unha vista, un xesto de refresco cara abaixo nesa vista mostrará o indicador de progreso e executará o código no peche do modificador.

Por exemplo:

import SwiftUI

struct ListaTarefas: Identifiable {
    var id = UUID()
    var tarefa: String
    var nomeImaxe: String
}

struct ContentView: View {
    @State var lista: [ListaTarefas] = [
    ListaTarefas(tarefa: "Tirar o lixo", nomeImaxe: "trash.circle.fill"),
    ListaTarefas(tarefa: "Recoller aos nenos", nomeImaxe: "person.2.fill"),
    ListaTarefas(tarefa: "Lavar o coche", nomeImaxe: "car.fill")
    ]
    
    @State private var estadoBoton = true
    
    var body: some View {
        List {
            Section(header: Text("Axustes")){
                Toggle(isOn: $estadoBoton) {
                    Text("Permitir notificacións")
                }
            }
    
            Section(header: Text("Tarefas"), footer: Text("Non te esquezas de nada 🧐")){
                ForEach(lista) { tarefa in
                    HStack {
                        Image(systemName: tarefa.nomeImaxe)
                        Text(tarefa.tarefa)
                    }
                }
            }
        }
        .refreshable {
            lista += [
                ListaTarefas(tarefa: "Encargar a cea", nomeImaxe: "eurosign.circle.fill"),
                ListaTarefas(tarefa: "Chamar a miña colega Lola Mento", nomeImaxe: "phone.fill"),
            ]
        }
    }
}

Que che parece esta páxina?

  • Happy
  • Normal
  • Sad