es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo ajustar la sangría del separador de filas de una lista de SwiftUI con una etiqueta como la aplicación Configuración?

¿Cómo ajustar la sangría del separador de filas de una lista de SwiftUI con una etiqueta como la aplicación Configuración?

30 May, 2023 Programación

En SwiftUI, no he encontrado un método elegante con la API de SwiftUI List para permitir que el separador de la fila de List sea como el estilo de la aplicación de configuración, mientras que la fila incluye una Image y un Text (también conocido como Label).

Lo que quiero es:

lo-que-quiero

Lo que suelo hacer:

```swift
// aquí está mi código común
    NavigationView {
        List {
            NavigationLink {
                Text("Detalle 1")
            } label: {
                Label {
                    Text("Título de la fila 1")
                } icon: {
                    Image(systemName: "gear")
                }
            }

            NavigationLink {
                Text("Detalle 3")
            } label: {
                Label {
                    Text("Título de la fila 3")
                } icon: {
                    Image(systemName: "wifi")
                }
            }

            NavigationLink {
                Text("Detalle 2")
            } label: {
                Label {
                    Text("Título de la fila 2")
                } icon: {
                    Image(systemName: "person")
                }
            }
        }
        .listStyle(.insetGrouped)
        .navigationTitle("Demo")
    }
```

lo-que-puedo-hacer

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en SwiftUI con especialización en SwiftUI-List, puedo confirmar que actualmente no existe un método elegante proporcionado por la API de List para dar un estilo de separador como se ve en la aplicación de configuración con una etiqueta que incluya tanto una imagen como un texto. Sin embargo, lo siguiente es lo que suelo hacer para lograr un efecto similar:

    // Fragmento de código para una aplicación de configuración similar a un separador con una imagen y etiqueta

NavigationView {
    List {
        NavigationLink {
            Text("Detalle 1")
        } label: {
            HStack {
                Image(systemName: "gear")
                    .foregroundColor(.blue)
                    .font(.system(size: 24))
                    .frame(width: 35, alignment: .center)
                Text("Título de fila 1")
                    .foregroundColor(.primary)
                    .font(.headline)
            }
        }

        NavigationLink {
            Text("Detalle 3")
        } label: {
            HStack {
                Image(systemName: "wifi")
                    .foregroundColor(.blue)
                    .font(.system(size: 24))
                    .frame(width: 35, alignment: .center)
                Text("Título de fila 3")
                    .foregroundColor(.primary)
                    .font(.headline)
            }
        }

        NavigationLink {
            Text("Detalle 2")
        } label: {
            HStack {
                Image(systemName: "person")
                    .foregroundColor(.blue)
                    .font(.system(size: 24))
                    .frame(width: 35, alignment: .center)
                Text("Título de fila 2")
                    .foregroundColor(.primary)
                    .font(.headline)
            }
        }
    }
    .listStyle(.insetGrouped)
    .navigationTitle("Demo")
}

    El código anterior utiliza HStack para combinar los elementos de Imagen y Etiqueta en cada fila. También he establecido la fuente, tamaño y color de cada elemento para que coincida lo mejor posible con la aplicación de configuración.

Comments are closed.