No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

List y ForEach

7/23
Recursos

Cuando trabajamos con listas en SwiftUI, es fundamental ahorrar memoria y optimizar el rendimiento de la aplicación, especialmente cuando se manejan muchas líneas de datos. A veces, simplemente crear una lista que "parece" una lista no es suficiente. Es crucial usar listas nativas de SwiftUI, ya que esto asegura que las vistas no visibles no consuman memoria innecesariamente.

¿Cómo transformar una 'ScrollView' y 'VStack' en una lista nativa?

En un ejemplo anterior, se usó una combinación de 'ScrollView' con 'VStack' para simular una lista. Sin embargo, esto no es eficiente, ya que cada elemento es renderizado completamente, consumiendo recursos. Para convertirlo a una lista nativa:

  1. Eliminar 'ScrollView' y 'VStack': sustituir esta combinación por una lista nativa.
  2. Utilizar 'List': introducir una List en el código donde previamente se encontraba el 'ForEach', como sigue:
   List {
       ForEach(datos) { dato in
           // Configuración de cada elemento
       }
   }
  1. Visualizar cambios: una lista nativa introducirá algunos cambios visuales, como un fondo y separadores entre elementos.

¿Cómo eliminar elementos estilísticos no deseados?

Los modificadores en SwiftUI son herramientas poderosas para ajustar el aspecto visual de las listas. Si prefieres un diseño más limpio:

  1. Modificar estilo de lista: utiliza listStyle para cambiar el estilo visual de la lista. En este caso, aplica un estilo plano:
   .listStyle(PlainListStyle())

Esto eliminará el fondo predeterminado del elemento de lista.

  1. Eliminar separadores entre elementos: a cada elemento de la lista se le puede aplicar listRowSeparator para ocultar líneas separadoras:
   .listRowSeparator(.hidden)

¿Cómo integrar contenido dinámico con modelos?

Una lista no solo debe ser visualmente óptima, sino también robusta al integrar datos dinámicos:

  1. Definir un modelo: antes de reproducir contenido, se necesita una estructura modelo para definir qué datos se mostrarán. Por ejemplo:
   struct Card: Identifiable {
       let id = UUID()
       let title: String
       let text: String
       let type: CardType
   }

   enum CardType {
       case small
       case medium
   }
  1. Crear e iterar un array de modelos: una vez establecido el modelo, crea un array para llenarlo con varios Card:
   let cards = [
       Card(title: "Título 1", text: "Texto 1", type: .small),
       Card(title: "Título 2", text: "Texto 2", type: .medium),
       // Más cards
   ]
  1. Configurar el ForEach: cambiar el 'ForEach' para que itere sobre el array de modelos en lugar de un rango:
   ForEach(cards) { card in
       CardView(card: card)
   }

Estos pasos te llevarán a crear una lista eficiente en SwiftUI, que no solo maneja visualmente el contenido de manera óptima, sino que también se comporta eficazmente en términos de recursos. ¡Continúa explorando y experimentando con SwiftUI para sacar el máximo provecho a tus aplicaciones!

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Les comparto la lista de Cards de ejemplo ya transcrita: ```js let cards: [NCard] = [ NCard(title: "Card 1", text: "Texto del card 1", type: .small), NCard(title: "Card 2", text: "Texto del card 2", type: .medium), NCard(title: "Card 3", text: "Texto del card 3", type: .small), NCard(title: "Card 4", text: "Texto del card 4", type: .small) ] ```
En la interfaz de la clase, no puedo acceder a la seccion de recursos. Que puedo hacer? No me aparece esa seccion.
Aqui esta el resultado del cambio: ![](https://static.platzi.com/media/user_upload/image-1824a74f-1e77-452d-9640-185120bee5a8.jpg)
con ese cambio me muestra asi :)![](https://static.platzi.com/media/user_upload/Screenshot%202025-01-04%20at%2011.29.38PM-7aa74a2d-7624-4f56-9626-09656190ee96.jpg)![](</Users/alvarocuiza/Documents/Screenshot 2025-01-04 at 11.29.38 PM.png>)
si alguno se preguntaba que se muestre en base al type , seria así : ```js import SwiftUI struct NCard: Identifiable { var id = UUID() let title: String let text: String let type: TypeCard } enum TypeCard { case small case medium } struct ContentView: View { let colorBlue = Color(red: 208/256, green: 222/256, blue:241/256) let cards: [NCard] = [ NCard(title: "Card 1", text: "Texto del card 1", type: .small), NCard(title: "Card 2", text: "Texto del card 2", type: .medium), NCard(title: "Card 3", text: "Texto del card 3", type: .small), NCard(title: "Card 4", text: "Texto del card 4", type: .small) ] @ViewBuilder func cardSmall (card: NCard) -> some View { HStack(alignment: .center,spacing: 20) { VStack { Text(card.title).bold() }.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10) HStack { Text(card.text) Image(systemName: "heart").foregroundStyle(.red) } }.frame( width: 350,height: 50 ).padding(20).background(.white).cornerRadius(20) } @ViewBuilder func cardLarge (card: NCard) -> some View { VStack(alignment: .center) { Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:.infinity,alignment: .trailing) VStack { Text(card.title).bold() }.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10) HStack { Text(card.text) } }.frame( width: 350,height: 150 ).padding(20).background(.white).cornerRadius(20) } var body: some View { List { ForEach(cards, id: \.id) { card in if card.type == .small { cardSmall(card: card) } if card.type == .medium { cardLarge(card: card) } } }.listStyle(.plain) } } #Preview { ContentView() } ```**import** SwiftUI **struct** NCard: Identifiable { **var** id = UUID() **let** title: String **let** text: String **let** type: TypeCard } **enum** TypeCard { **case** small **case** medium } **struct** ContentView: View { **let** colorBlue = Color(red: 208/256, green: 222/256, blue:241/256) **let** cards: \[NCard] = \[ NCard(title: "Card 1", text: "Texto del card 1", type: .small), NCard(title: "Card 2", text: "Texto del card 2", type: .medium), NCard(title: "Card 3", text: "Texto del card 3", type: .small), NCard(title: "Card 4", text: "Texto del card 4", type: .small) ] @ViewBuilder **func** cardSmall (card: NCard) -> **some** View { HStack(alignment: .center,spacing: 20) { VStack { Text(card.title).bold() }.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10) HStack { Text(card.text) Image(systemName: "heart").foregroundStyle(.red) } }.frame( width: 350,height: 50 ).padding(20).background(.white).cornerRadius(20) } @ViewBuilder **func** cardLarge (card: NCard) -> **some** View { VStack(alignment: .center) { Image(systemName: "heart").foregroundStyle(.red).frame(maxWidth:.infinity,alignment: .trailing) VStack { Text(card.title).bold() }.frame(width: 150,height: 40).padding(5).background(colorBlue).cornerRadius(10) HStack { Text(card.text) } }.frame( width: 350,height: 150 ).padding(20).background(.white).cornerRadius(20) } **var** body: **some** View { List { ForEach(cards, id: \\.id) { card **in** **if** card.type == .small { cardSmall(card: card) } **if** card.type == .medium { cardLarge(card: card) } } }.listStyle(.plain) } } \#Preview { ContentView() }