SwiftUI List预览与真机/模拟器跳转详情时选中行为不一致问题

问题描述 #

我遇到了SwiftUI List选中行为在不同环境下不一致的问题：

• 在预览环境中，点击列表项跳转详情页时，该行会保持选中状态；返回列表时，选中状态才会取消，这和UITableViewController的clearsSelectionOnViewWillAppear行为一致，是预期的效果。
• 但在模拟器或真机运行应用时，点击列表项后，该行会立即取消选中，再跳转到详情页，虽然列表滚动位置能正常保留，但选中状态的表现不符合预期。

相关代码 #

应用入口代码 #

import SwiftUI

@main
struct SwiftUIListApp: App {
    var body: some Scene {
        WindowGroup {
            ListView()
        }
    }
}

列表相关代码 #

import SwiftUI

struct ListItem: Identifiable, Hashable {
    let title: String
    var id: String { title }
}

@Observable
final class ListViewModel {
    private(set) var items: [ListItem] = []
    
    @MainActor func loadData() async {
        items = (1...100).map { ListItem(title: "\($0)") }
    }
}

struct ListView: View {
    @State private var viewModel = ListViewModel()
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.items) { item in
                    NavigationLink(value: item) {
                        Text(item.title)
                    }
                }
            }
            .navigationTitle("SwiftUI List")
            .navigationDestination(for: ListItem.self) { item in
                ListDetailView(item: item)
            }
        }
        .task {
            await viewModel.loadData()
        }
    }
}

struct ListDetailView: View {
    let item: ListItem
    
    var body: some View {
        Text("Detail view \(item.title)")
            .navigationTitle("Detail")
            .navigationBarTitleDisplayMode(.inline)
    }
}

#Preview {
    ListView(viewModel: ListViewModel())
}

原因分析 #

这种差异源于预览环境和真机/模拟器的视图渲染优先级、生命周期处理逻辑略有不同：在真机中，NavigationLink触发跳转时，SwiftUI会立即重置列表的选中状态；而预览环境中会保留选中状态直到详情页跳转完成，返回列表时再清除。

解决方案 #

通过手动维护选中状态，完全控制选中样式的显示时机，就能在真机/模拟器中实现和预览一致的行为。

修改后的ListView代码 #

struct ListView: View {
    @State private var viewModel = ListViewModel()
    @State private var selectedItem: ListItem? // 记录选中的列表项
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(viewModel.items) { item in
                    NavigationLink(value: item) {
                        Text(item.title)
                    }
                    // 自定义选中状态的背景样式
                    .listRowBackground(selectedItem == item ? Color.accentColor.opacity(0.3) : Color.clear)
                    .onTapGesture {
                        selectedItem = item // 点击时标记为选中
                    }
                }
            }
            .navigationTitle("SwiftUI List")
            .navigationDestination(for: ListItem.self) { item in
                ListDetailView(item: item)
                    .onDisappear {
                        // 返回列表时延迟清除选中状态，模拟预览的行为
                        DispatchQueue.main.async {
                            selectedItem = nil
                        }
                    }
            }
        }
        .task {
            await viewModel.loadData()
        }
    }
}

另一种实现方式（基于导航路径监听） #

struct ListView: View {
    @State private var viewModel = ListViewModel()
    @State private var navigationPath = NavigationPath()
    @State private var selectedItem: ListItem?
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            List {
                ForEach(viewModel.items) { item in
                    Button(action: {
                        selectedItem = item
                        navigationPath.append(item)
                    }) {
                        Text(item.title)
                    }
                    .listRowBackground(selectedItem == item ? Color.accentColor.opacity(0.3) : Color.clear)
                }
            }
            .navigationTitle("SwiftUI List")
            .navigationDestination(for: ListItem.self) { item in
                ListDetailView(item: item)
            }
            .onChange(of: navigationPath) { oldValue, newValue in
                // 当导航路径回到初始状态（返回列表）时清除选中标记
                if newValue.isEmpty {
                    selectedItem = nil
                }
            }
        }
        .task {
            await viewModel.loadData()
        }
    }
}

这两种方式都通过手动维护selectedItem状态，实现了点击时保持选中、返回列表时清除选中的效果，和预览环境的行为完全一致。

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