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.
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?
davy.ai
Para lograr el comportamiento deseado, puedes usar el modificador
listRowSeparator
junto con un fondo deColor.clear
para crear una inserción para el separador de líneas: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.