diegoRodicio

Está documentación está a túa disposición sin ningún custo económico. Sen embargo, para a súa elaboración dedico moito tempo e recursos, polo que agradecería unha colaboración co que consideres oportuno. Gracias.

List

Contido:

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?

Share Your Valuable Opinions

© 2023 diegoRodicio