Search code examples
swiftuiswiftui-list

SwiftUI NavigationView caret position


Looking to find a way to have the NavigationView caret align to the top right of the row vs. center. Hoping to find a way to have the caret in line with the title of my article.

List {
    ForEach(searching ? faqTableSearch : faqTable) { section in
        Section(header: Text(section.section)) {
            ForEach(section.faq) { row in
                NavigationLink(destination: FaqView(title: row.title, summary: row.summary, content: row.body)) {
                    VStack {
                        Text(row.title)
                            .font(.custom("Helvetica", size: 16))
                            .foregroundColor(Color(UIColor.systemGray))
                            .offset(x: -16)
                        Spacer()
                        Text(row.summary)
                            .font(.custom("Helvetica", size: 12))
                            .foregroundColor(Color(UIColor.systemGray))
                            .offset(x: 16)
                    }
                } // end nav
            } // end item
        } // end section
        .font(.custom("Helvetica", size: 17))
    } // end loop
}

Solution

  • I don't think that you can move the standard chevron created by NavigationLink in a NavigationView, but you can hide the default NavigationLink and recreate it with the (very slightly different SF Symbols chevron.right or chevron.forward):

    struct ContentView: View {
        var items = ["Item 1", "Item 2", "Item 3"]
        
        var body: some View {
            NavigationView {
                List {
                    ForEach(items, id: \.self) { item in
                        ZStack {
                            NavigationLink(destination: Text("Detail")) { EmptyView() }.hidden()
                            VStack(alignment: .leading) {
                                HStack {
                                    Text(item)
                                        .font(.custom("Helvetica", size: 16))
                                        .offset(x: -16)
                                    Spacer()
                                    Image(systemName: "chevron.right")
                                }.foregroundColor(Color(UIColor.systemGray))
                                
                                Spacer()
                                Text(item)
                                    .font(.custom("Helvetica", size: 12))
                                    .foregroundColor(Color(UIColor.systemGray))
                                    .offset(x: 16)
                            }
                        }
                    }
                }
            }
        }
    }
    

    enter image description here