如何自定义NavigationLink：添加标题并对齐箭头？

问题解答 #

1. 是否存在无需借助Text/VStack等布局的NavigationLink修饰符添加标题？

没有直接对应的系统修饰符可以一键添加这类顶部标题。NavigationLink的样式完全由传入的label视图决定，系统并未提供专门API来追加这类标题元素。不过你可以把这种布局封装成自定义View或ViewModifier，后续复用的时候就不用重复写布局代码了。

2. 如何让箭头与标题对齐，而非在单元格内垂直居中？

默认List中的NavigationLink会将label垂直居中，要实现箭头与标题对齐，需要自定义label的布局结构，手动控制箭头位置。核心思路是用HStack将「标题+内容区域」与箭头放在同一水平层级，让箭头和标题顶部对齐，同时调整单元格内边距贴合需求。

修改后的代码示例 #

import SwiftUI

// 封装自定义带标题的NavigationLink，方便复用
struct HeaderNavigationLink<Destination: View>: View {
    let title: String
    let destination: Destination
    let content: () -> View
    
    var body: some View {
        NavigationLink(destination: destination) {
            HStack(alignment: .top, spacing: 0) {
                VStack(alignment: .leading, spacing: 8) {
                    Text(title)
                        .foregroundColor(.gray)
                    content()
                }
                Spacer()
                // 手动添加箭头，替代系统默认箭头以精准控制位置
                Image(systemName: "chevron.right")
                    .foregroundColor(.gray)
                    .padding(.top, 2) // 微调箭头位置与标题对齐
            }
            .padding(.vertical, 12) // 调整单元格内边距，贴近Health的样式
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                HeaderNavigationLink(title: "Title", destination: Text("Test")) {
                    Label("Test", systemImage: "bolt")
                }
                // 快速复用自定义Link
                HeaderNavigationLink(title: "另一组标题", destination: Text("详情页")) {
                    HStack {
                        Text("更多内容")
                        Spacer()
                        Text("附加信息")
                            .foregroundColor(.secondary)
                    }
                }
            }
            .listStyle(.insetGrouped) // 可选，模拟Health的列表样式
        }
    }
}

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

代码说明 #

• 封装HeaderNavigationLink，将标题、内容、箭头的布局逻辑统一管理，后续只需传入标题、目标页和内容视图即可，避免重复编写布局代码。
• 使用HStack(alignment: .top)让左侧内容与箭头顶部对齐，替代系统默认的垂直居中布局。
• 手动添加箭头图标，能更精准地控制其位置，确保和标题对齐。
• 调整内边距和列表样式，让整体视觉更贴近Apple Health的设计风格。

内容的提问来源于stack exchange，提问作者irrbloss