Cualquier iOS Developer que haya comenzado su viaje en la programación Swift moderna se ha topado con un muro que, durante años, fue sorprendentemente frustrante: intentar cambiar el color de fondo de una List en SwiftUI. Lo que en papel debería ser tan simple como añadir un modificador .background(Color.red), en la práctica resultaba en un fondo grisáceo por defecto del sistema que se negaba a desaparecer.
Esta aparente limitación se debía a cómo SwiftUI envolvía los componentes nativos subyacentes (UITableView o UICollectionView en iOS). Afortunadamente, a medida que Swift y las herramientas de Xcode han madurado, Apple ha introducido modificadores nativos y elegantes para resolver este problema.
En este extenso tutorial, aprenderás paso a paso y a nivel experto cómo personalizar al máximo tus listas. Cubriremos desde los métodos más modernos introducidos en las últimas versiones de SwiftUI, hasta los “hacks” necesarios si debes dar soporte a versiones antiguas (Legacy) en tus aplicaciones de iOS, macOS y watchOS.
1. Entendiendo la Anatomía de una List en SwiftUI
Antes de aplicar soluciones, un buen iOS Developer debe entender cómo funciona el framework por debajo. En SwiftUI, una List no es simplemente una pila de vistas (como lo sería un VStack dentro de un ScrollView). Es un componente altamente optimizado que reutiliza celdas y gestiona selecciones, arrastres y eliminaciones.
El problema del fondo radica en que la List tiene múltiples capas:
- La Vista Principal (List Background): El fondo base del contenedor.
- El Fondo del Contenido de Desplazamiento (Scroll Content Background): Una capa intermedia que el sistema operativo aplica por defecto (usualmente el gris claro en modo claro, o gris oscuro en modo oscuro).
- El Fondo de la Celda (Row Background): El fondo individual de cada elemento de la lista.
Si solo aplicas .background(Color.blue) a la List, lo estás aplicando a la capa 1, pero la capa 2 (el fondo del scroll) sigue siendo opaca y oculta tu color. Para ver tu color, debemos hacer que esa capa intermedia sea transparente.
2. El Método Moderno (iOS 16+, macOS 13+, watchOS 9+)
Si tienes la suerte de estar desarrollando una aplicación en Xcode donde tu Deployment Target (versión mínima del sistema) es iOS 16 o superior, estás en la época dorada de la programación Swift. Apple introdujo un modificador específico para solucionar nuestro problema: .scrollContentBackground().
Ocultar el fondo del sistema
Para cambiar el color de fondo de una List en SwiftUI usando la API moderna, primero debemos ocultar el fondo que impone el sistema y luego aplicar nuestro propio color.
import SwiftUI
struct ModernListView: View {
// Datos de ejemplo
let items = ["Manzana", "Banana", "Naranja", "Fresa"]
var body: some View {
NavigationStack {
List(items, id: \.self) { item in
Text(item)
}
// 1. Ocultamos el fondo gris del sistema operativo
.scrollContentBackground(.hidden)
// 2. Aplicamos nuestro propio color de fondo a la List
.background(Color.mint)
.navigationTitle("Frutas")
}
}
}
Usando Gradientes y Materiales
La belleza de este método nativo de SwiftUI es que el modificador .background() no solo acepta colores sólidos. Puedes usar gradientes complejos o efectos de desenfoque (Materials) para darle un aspecto premium a tu app.
import SwiftUI
struct GradientListView: View {
var body: some View {
List {
Text("Configuración de Perfil")
Text("Notificaciones")
Text("Privacidad")
}
.scrollContentBackground(.hidden)
// Aplicando un gradiente lineal de arriba a abajo
.background(
LinearGradient(
gradient: Gradient(colors: [.purple, .blue]),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
}
}
3. El Método Legacy: iOS 14 y iOS 15
Si eres un iOS Developer trabajando en una aplicación empresarial o en un producto que no puede dejar atrás a los usuarios con iPhones más antiguos, el modificador .scrollContentBackground te dará un error de compilación en Xcode, ya que no existe en iOS 15 o inferior.
Para estas versiones, debemos recurrir a la API de apariencia (Appearance API) de UIKit. Puesto que SwiftUI utiliza UITableView (o UICollectionView dependiendo de la versión exacta de iOS 14/15) por debajo, podemos cambiar su configuración global.
El “Hack” de UITableView
import SwiftUI
struct LegacyListView: View {
// El inicializador de la vista se ejecuta antes de que se dibuje
init() {
// Hacemos que el fondo de todas las tablas en la app sea transparente
UITableView.appearance().backgroundColor = .clear
}
var body: some View {
List {
Text("Elemento Legacy 1")
Text("Elemento Legacy 2")
Text("Elemento Legacy 3")
}
// Ahora el .background será visible porque la tabla es transparente
.background(Color.yellow)
}
}
Advertencia importante de programación Swift: Usar UITableView.appearance() tiene un efecto global. Cambiará el fondo de todas las listas de tu aplicación. Si solo quieres que afecte a una pantalla específica, puedes restaurar la apariencia en los modificadores .onAppear y .onDisappear, aunque es una práctica un poco propensa a fallos si la navegación es rápida.
4. Cambiar el Color de Fondo de las Celdas (ListRowBackground)
A veces, no quieres cambiar el fondo general de la pantalla, sino el de los elementos (filas) dentro de la lista. En SwiftUI, esto se controla mediante el modificador .listRowBackground().
Es crucial colocar este modificador dentro de la List, aplicado directamente al contenido de la celda (por ejemplo, al Text o al HStack que define la fila), no a la List en sí.
Ejemplo de personalización de celdas
import SwiftUI
struct RowBackgroundView: View {
let tasks = ["Comprar leche", "Llamar al cliente", "Estudiar Swift", "Pagar internet"]
var body: some View {
List {
ForEach(tasks.indices, id: \.self) { index in
HStack {
Image(systemName: "checkmark.circle")
Text(tasks[index])
.font(.headline)
}
.padding(.vertical, 8)
// Cambiamos el fondo de la fila basándonos en si el índice es par o impar
.listRowBackground(
index % 2 == 0 ? Color.gray.opacity(0.2) : Color.white
)
}
}
// Opcional: Ocultar los separadores de líneas estándar en iOS 15+
.listRowSeparator(.hidden)
}
}
En este ejemplo de programación Swift, hemos creado un diseño de filas con colores alternos, una técnica clásica de interfaces de usuario que facilita la lectura de grandes conjuntos de datos, especialmente popular en macOS.
5. El Impacto de los Estilos de Lista (ListStyle)
En SwiftUI, el estilo de tu lista dicta en gran medida cómo se manejan los fondos y los márgenes. Los estilos más comunes son:
.plain: Una lista plana sin márgenes laterales..grouped: Los elementos se agrupan en secciones visuales..insetGrouped: El estilo más moderno en iOS, donde las secciones flotan como tarjetas con bordes redondeados.
El comportamiento al cambiar el color de fondo de una List en SwiftUI puede variar según el estilo.
import SwiftUI
struct StyledListView: View {
var body: some View {
List {
Section(header: Text("Cuenta")) {
Text("Perfil")
Text("Seguridad")
}
Section(header: Text("Sistema")) {
Text("Caché")
Text("Cerrar Sesión")
.foregroundColor(.red)
}
}
.listStyle(.insetGrouped) // Cambia el estilo de la lista
.scrollContentBackground(.hidden)
.background(Color.cyan.opacity(0.3)) // Fondo visible fuera de las "tarjetas"
}
}
En el estilo .insetGrouped, ocultar el scrollContentBackground hace que el área alrededor de las celdas agrupadas se vuelva transparente. Las celdas en sí mantienen el color del sistema (blanco en modo claro) a menos que uses explícitamente .listRowBackground() sobre ellas.
6. Consideraciones Multiplataforma: macOS y watchOS
Una de las promesas más grandes de SwiftUI es “Aprende una vez, aplícalo en cualquier lugar”. Sin embargo, un verdadero iOS Developer (que también compila para otros sistemas en Xcode) sabe que cada sistema operativo tiene sus propias convenciones humanas y de interfaz de usuario.
Desarrollo en macOS
En macOS, las listas se renderizan utilizando la API subyacente NSTableView. Los fondos en el Mac suelen ser translúcidos por defecto para crear el efecto “Vibrancy” que deja ver sutilmente el fondo de pantalla del escritorio del usuario.
El método moderno .scrollContentBackground(.hidden) funciona perfectamente en macOS 13 (Ventura) y versiones superiores. Sin embargo, si tratas de usar el método Legacy de iOS (UITableView.appearance()), Xcode te dará un error rotundo porque UIKit no existe en Mac (a menos que uses Mac Catalyst).
Si desarrollas para macOS puro, tu código debería verse así utilizando directivas de compilación condicionales si compartes código:
import SwiftUI
struct MacCompatibleListView: View {
var body: some View {
List {
Text("Documento 1")
Text("Documento 2")
}
#if os(iOS)
.listStyle(.insetGrouped)
#elseif os(macOS)
.listStyle(.sidebar) // Estilo nativo para la barra lateral del Mac
#endif
// Esta línea es segura tanto en iOS 16+ como en macOS 13+
.scrollContentBackground(.hidden)
.background(Color.indigo.opacity(0.1))
}
}
Desarrollo en watchOS
El Apple Watch es un dispositivo con una pantalla OLED muy pequeña y una batería limitada. Las directrices de diseño de Apple son estrictas al respecto: el fondo general de una aplicación en watchOS debería ser siempre negro (Color.black). Un fondo negro en una pantalla OLED apaga literalmente esos píxeles, ahorrando batería y haciendo que los bordes de la pantalla se difuminen con los biseles del reloj.
Por lo tanto, cambiar el color de fondo de una List en SwiftUI de forma general (todo el fondo rojo o azul) en watchOS es una mala práctica de programación Swift.
Lo que sí debes hacer en watchOS es usar .listRowBackground para estilizar los botones o celdas individuales:
import SwiftUI
struct WatchListView: View {
var body: some View {
List {
NavigationLink("Entrenamiento") {
Text("Iniciando...")
}
.listRowBackground(
RoundedRectangle(cornerRadius: 15)
.fill(Color.green)
)
NavigationLink("Música") {
Text("Reproduciendo...")
}
.listRowBackground(
RoundedRectangle(cornerRadius: 15)
.fill(Color.orange)
)
}
// No cambiamos el fondo general de la lista para mantenerlo negro oscuro nativo.
}
}
7. Técnicas Avanzadas: Usando ZStack para Fondos Dinámicos
En ocasiones, el modificador .background() no es suficiente. Supongamos que deseas que el fondo de tu List sea una vista animada, un video que se reproduce en bucle, o una imagen con efecto Parallax.
Para lograr un control absoluto sobre la jerarquía visual en Xcode, podemos envolver nuestra List transparente dentro de un ZStack.
import SwiftUI
struct DynamicBackgroundListView: View {
var body: some View {
ZStack {
// 1. Capa más profunda: La imagen o vista compleja
Image("mountain_landscape") // Asegúrate de tener esta imagen en tus Assets
.resizable()
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all) // Que cubra toda la pantalla
.blur(radius: 3) // Un ligero desenfoque para que el texto sea legible
// 2. Capa superior: La lista transparente
List {
ForEach(1...20, id: \.self) { item in
Text("Punto de interés \(item)")
.foregroundColor(.white) // Texto blanco para contraste
.font(.title3)
.padding(.vertical, 5)
// Fondo de fila translúcido para efecto cristal (Glassmorphism)
.listRowBackground(Color.black.opacity(0.4))
}
}
.scrollContentBackground(.hidden) // Vital para ver la imagen de fondo
.listStyle(.plain)
}
}
}
Este enfoque de programación Swift demuestra el verdadero poder declarativo de SwiftUI. En unas pocas líneas de código, hemos construido una interfaz compleja (Glassmorphism) que habría requerido cientos de líneas de código, delegados, subcapas (CALayers) y cálculos matemáticos en el antiguo UIKit.
8. Buenas Prácticas: Modo Oscuro y Accesibilidad
Como iOS Developer profesional, nunca debes establecer un color estático (como Color.white o Color.black) sin considerar los entornos del sistema.
Soporte para Light Mode / Dark Mode
Si fuerzas el fondo de tu List a Color.white, cuando el usuario de iOS cambie su iPhone a Modo Oscuro, tu lista seguirá siendo de un blanco cegador, lo cual arruinará la experiencia de usuario (UX).
Solución 1: Usar colores semánticos de SwiftUI
En lugar de colores puros, utiliza colores del sistema que se adaptan automáticamente:
Color.primary(Negro en modo claro, Blanco en modo oscuro)Color(uiColor: .systemBackground)Color(uiColor: .secondarySystemBackground)
Solución 2: Usar Color Sets en Xcode
- Ve a tu carpeta
Assets.xcassetsen Xcode. - Haz clic derecho y selecciona New Color Set.
- Nómbralo “ListBackgroundCustom”.
- El panel te mostrará dos cuadros de color: uno para Any Appearance (Modo Claro) y otro para Dark Appearance (Modo Oscuro). Asigna un gris suave a uno y un azul muy oscuro al otro.
- Úsalo en SwiftUI así:
List {
Text("Modo Oscuro Automático")
}
.scrollContentBackground(.hidden)
.background(Color("ListBackgroundCustom")) // Carga tu asset personalizado
Accesibilidad (A11y)
Asegúrate de que cambiar el color de fondo de una List en SwiftUI no arruine el contraste de tu texto. Si tienes un fondo oscuro, asegúrate de que el .foregroundColor de los textos dentro de la lista sea suficientemente brillante. Apple recomienda un ratio de contraste de al menos 4.5:1 para el texto normal. Herramientas como el Accessibility Inspector integrado en Xcode te ayudarán a verificar esto.
Conclusión
Saber cómo cambiar el color de fondo de una List en SwiftUI es un conocimiento obligatorio que separa a los principiantes de los profesionales. A través de este tutorial, hemos recorrido el camino evolutivo de SwiftUI.
Hemos visto que, aunque el pasado exigía interactuar con la pesada API de UIKit usando UITableView.appearance(), el presente y el futuro de la programación Swift residen en la elegancia de .scrollContentBackground(.hidden).
Ya sea que estés diseñando la próxima aplicación estrella para el iPhone, una potente herramienta para macOS, o un discreto acompañante para el Apple Watch, el control absoluto de la interfaz de usuario está ahora literalmente en la punta de tus dedos gracias a Xcode y SwiftUI. Sigue practicando, sigue experimentando con gradientes y ZStacks, y lleva el diseño de tus aplicaciones al siguiente nivel.
Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram
