SwiftUI中NavigationLink包裹List Row后布局偏移问题求助

问题现象 #

未使用NavigationLink时，List的Row布局完全正常；但用NavigationLink包裹Row后，布局会出现左右偏移几个像素的情况。尝试调整padding无效，使用GeometryReader设置宽度后显示恢复正常，怀疑是Label导致的布局问题，想知道NavigationLink是否存在固定偏移，以及如何解决该布局问题。

示例代码 #

var body: some View {
    ZStack {
        Rectangle().fill(Color.black).ignoresSafeArea(edges:Edge.Set.bottom)
        List() {
            ForEach(viewModel.list!) { item in
                if item.index == 0 {
                    SettingRow(info: item)
                        .listRowSeparator(.hidden)
                        .listRowBackground(Color.clear)
                        .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                }else{
                    NavigationLink(destination: Text("测试")) {
                        SettingRow(info: item)
                            .listRowSeparator(.hidden)
                            .listRowBackground(Color.clear)
                            .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)).labelStyle(TitleOnlyLabelStyle())
                    }.listRowBackground(Color.clear).padding(0)
                }
            }
        }.listStyle(PlainListStyle()).padding(.top,10)
    }
}

解决方案 #

NavigationLink作为List的行内容时，确实会自带默认的布局偏移（尤其是它默认作为Label容器的特性，即使设置了TitleOnlyLabelStyle也可能残留布局影响），解决方法可以从以下几个方向入手：

1. 调整布局修饰符的层级

把行相关的布局修饰符（比如.listRowInsets、.listRowSeparator）移到NavigationLink层级，而不是放在内部的SettingRow上。因为NavigationLink本身是List的行元素，行的内边距应该作用在这个层级，才能和非跳转行保持一致的布局规则。

修改后的else分支代码：

NavigationLink(destination: Text("测试")) {
    SettingRow(info: item)
        .labelStyle(TitleOnlyLabelStyle())
}
.listRowSeparator(.hidden)
.listRowBackground(Color.clear)
.listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))

2. 确保SettingRow内部占满宽度

如果SettingRow包含Label组件，给内部的Label添加.frame(maxWidth: .infinity, alignment: .leading)，强制它占满可用宽度，避免NavigationLink的默认布局挤压：

// 假设SettingRow的内部结构
struct SettingRow: View {
    let info: YourItemType
    var body: some View {
        Label {
            Text(info.title)
                .frame(maxWidth: .infinity, alignment: .leading)
        } icon: {
            Image(systemName: info.icon)
        }
    }
}

3. 分离跳转逻辑与行布局

使用NavigationLink的init(isActive:destination:label:)版本，把跳转逻辑和行布局完全分离，让SettingRow直接作为行内容，NavigationLink隐藏在底层：

@State private var isLinkActive = false

// 在else分支中
ZStack {
    SettingRow(info: item)
        .listRowSeparator(.hidden)
        .listRowBackground(Color.clear)
        .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        .onTapGesture {
            isLinkActive = true
        }
    NavigationLink(isActive: $isLinkActive, destination: { Text("测试") }) {
        EmptyView()
    }
    .opacity(0)
}

这种方式完全复用了非跳转行的布局，从根源上避免了NavigationLink带来的偏移问题。

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