macOS SwiftUI应用中带isActive的NavigationLink引发异常滚动行为

我之前也碰到过完全一样的问题，这应该是SwiftUI在处理长列表中绑定isActive的NavigationLink时的布局bug——当每个列表项的激活状态都依赖同一个activeItem状态时，状态变化会触发大量视图重新计算，干扰List的滚动复用机制，进而导致不可预测的滚动跳转。

下面提供两个可行的解决方案，既能保留编程式导航的能力，又能避免滚动异常：

方案一：改用List的selection + NavigationLink的tag/selection（推荐） #

这是SwiftUI针对侧边栏选择场景的原生设计，比单独给每个Link绑定isActive更高效，也能从根源上避免滚动bug。

修改你的SidebarList实现：

struct SidebarList : View {
    @State private var items = Array(0...300).map { Item(name: "Item \($0)") }
    @State private var selectedItem : Item?
    
    var body: some View {
        List(items, selection: $selectedItem) { item in
            NavigationLink(
                destination: InnerSidebar(),
                tag: item,
                selection: $selectedItem
            ) {
                Text(item.name)
            }
        }
        .listStyle(SidebarListStyle())
        // 保留编程式导航的示例代码
        .toolbar {
            Button("Go to item 10") {
                selectedItem = items[10]
            }
        }
    }
}

为什么这个方案有效？ #

• List的selection绑定会告诉SwiftUI只跟踪选中项的变化，不会触发整个列表的大规模视图更新
• NavigationLink的tag/selection组合是为这类场景专门设计的，和侧边栏的交互逻辑更契合，状态管理更稳定

方案二：优化isActive的绑定逻辑（如果坚持使用原有方式） #

如果你因为某些原因必须使用isActive参数，可以通过优化绑定逻辑来减少不必要的视图刷新：

struct SidebarList : View {
    @State private var items = Array(0...300).map { Item(name: "Item \($0)") }
    @State private var activeItemID: UUID?
    // 用字典存储每个项的激活状态，避免频繁的相等判断
    @State private var itemActiveStates: [UUID: Bool] = [:]
    
    func navigationBindingForItem(item: Item) -> Binding<Bool> {
        .init {
            itemActiveStates[item.id] ?? (activeItemID == item.id)
        } set: { newValue in
            if newValue {
                activeItemID = item.id
                // 确保只有当前项处于激活状态
                itemActiveStates = items.reduce(into: [:]) { dict, item in
                    dict[item.id] = item.id == activeItemID
                }
            } else {
                if activeItemID == item.id {
                    activeItemID = nil
                }
                itemActiveStates[item.id] = false
            }
        }
    }
    
    var body: some View {
        List(items) { item in
            NavigationLink(
                destination: InnerSidebar(),
                isActive: navigationBindingForItem(item: item)
            ) {
                Text(item.name)
            }
        }
        .listStyle(SidebarListStyle())
        // 编程式导航时同步更新状态
        .onChange(of: activeItemID) { newID in
            guard let newID = newID else {
                itemActiveStates.values.forEach { _ = false }
                return
            }
            itemActiveStates = items.reduce(into: [:]) { dict, item in
                dict[item.id] = item.id == newID
            }
        }
        .toolbar {
            Button("Go to item 10") {
                activeItemID = items[10].id
            }
        }
    }
}

这个方案的原理： #

• 用字典存储每个项的激活状态，避免每次都计算activeItem == item，减少视图的无效刷新
• 当编程式导航触发时，批量更新状态，而不是逐个修改，降低对List布局的干扰

总结 #

优先推荐方案一，它不仅解决了滚动问题，还符合SwiftUI的设计规范，代码更简洁易维护。方案二适合有特殊需求必须保留isActive参数的场景，但相对复杂一些。

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