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.

SwiftUI – Separador de línea de la lista con sangría como en la aplicación Configuración de iOS.

Estoy tratando de lograr el mismo comportamiento que se ve en la aplicación de Configuración de iOS o, por ejemplo, en la aplicación Roborock (ver capturas de pantalla a continuación). Me gustaría usar un icono y luego darle un margen interno al separador de líneas.

Imagen
Imagen

Ya intenté lo siguiente:

UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 80)

Pero esto no funciona con SwiftUI 3.0 / iOS 15.1.

Aquí está el código completo:

import SwiftUI

struct ListTest: View {
    var body: some View {
        List {

        Button(action: {
            print("Test")
        }) {
            SettingsCell2(title: "Test", iconName: "bell.badge.fill")
        }

        Button(action: {
            print("Test")
        }) {
            SettingsCell2(title: "Test", iconName: "bell.badge.fill")
        }
    }
}

struct SettingsCell2: View {
    var title: String
    var iconName: String

    var body: some View {
        HStack {
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(Color.red)

                Image(systemName: iconName)
                    .foregroundColor(.white)
            }
            .frame(width: 30, height: 30, alignment: .center)

            Text(title)
                .foregroundColor(.primary)

            Spacer()

            Image(systemName: "chevron.right")
                .font(.headline)
                .foregroundColor(.gray)
        }
    }
}

struct ListTest_Previews: PreviewProvider {
    static var previews: some View {
        ListTest()
    }
}

¿Alguna idea de cómo se puede lograr esto?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Para lograr el comportamiento deseado, puedes usar el modificador listRowSeparator junto con un fondo de Color.clear para crear una inserción para el separador de líneas:

    List {
        // elementos de la lista
    }
    .listRowSeparator(.hidden)
    .background(
        Divider()
            .padding(.leading, 70) // ajusta la inserción según sea necesario
            .background(Color.clear)
    )
    

    Esto ocultará el separador de líneas predeterminado y creará un separador personalizado con la inserción deseada. Puedes ajustar el padding según sea necesario para obtener la inserción deseada.

Comments are closed.