Home > AI > IOS > SwiftUI >

SidebarListStyle

The effect on IOS is to remove list seperator. But it will have an extra bottom padding. Do you know why?

Example :


import SwiftUI

struct ContentView: View {
    @ObservedObject var model = SidebarViewModel()
    @State private var selectedFolder: String? = "Inbox"
    @State private var selectedMail: MailModel?
    
    var body: some View {
        NavigationView {
            SidebarView(
                model: model,
                selectedFolder: $selectedFolder,
                selectedMail: $selectedMail
            )

            if let label = selectedFolder {
                FolderView(
                    title: label,
                    mails: model.allMails[label, default: []],
                    selectedMail: $selectedMail
                )
            } else {
                Text("Select label...")
            }

            if let mail = selectedMail {
                MailView(mail: mail)
            } else {
                Text("Select mail...")
            }
        }
    }
}



struct MailModel: Identifiable, Hashable {
    let id = UUID()
    let date: Date
    let subject: String
    let body: String
    var isFavorited = false
}

final class SidebarViewModel: ObservableObject {
    @Published var allMails: [String: [MailModel]] = [
        "Inbox": [ .init(date: Date(), subject: "Subject1", body: "Very long body...") ],
        "Sent": [ .init(date: Date(), subject: "Subject2", body: "Very long body...") ],
    ]
}


struct SidebarView: View {
    @ObservedObject var model: SidebarViewModel
    @Binding var selectedFolder: String?
    @Binding var selectedMail: MailModel?

    var body: some View {
        List(selection: $selectedFolder) {
            ForEach(Array(model.allMails.keys), id: \.self) { folder in
                NavigationLink(
                    destination: FolderView(
                        title: folder,
                        mails: model.allMails[folder, default: []],
                        selectedMail: $selectedMail)
                ) {
                    Text(folder).font(.headline)
                }
            }
        }.listStyle(SidebarListStyle())
    }
}

struct FolderView: View {
    let title: String
    let mails: [MailModel]
    @Binding var selectedMail: MailModel?

    var body: some View {
        List(selection: $selectedMail) {
            ForEach(mails) { mail in
                NavigationLink(
                    destination: MailView(mail: mail),
                    tag: mail,
                    selection: $selectedMail
                ) {
                    VStack(alignment: .leading) {
                        Text(mail.subject)
                        Text(mail.date, style: .date)
                    }
                }
            }
        }.navigationTitle(title)
    }
}


struct MailView: View {
    let mail: MailModel

    var body: some View {
        VStack(alignment: .leading) {
            Text(mail.subject)
                .font(.headline)
            Text(mail.date, style: .date)
            Text(mail.body)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Leave a Reply