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
}
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)
}
}
}
}
}
}
}