iOS17以下版本中TabView(.page样式)内列表项更新失效问题求助

你遇到的问题是TabView使用.page样式时，数据源更新后内部视图无法自动刷新，换成ScrollView则正常。这是因为.page样式的TabView带有视图缓存机制，当你替换数组中的元素为新的Identifiable实例时，TabView可能未检测到足够的变化来触发对应页面的刷新。

下面是几种可行的解决方案：

方案1：给TabView绑定动态ID强制刷新 #

通过给TabView设置一个基于数据源变化的id，当数据源改变时，TabView会重新创建内部视图，从而触发刷新：

struct TabViewForTExtUIModels: View {
    let models: [TextUIModel]
    
    var body: some View {
        VStack {
            if !models.isEmpty {
                TabView {
                    ForEach(models) { model in
                        VStack {
                            Text(model.title)
                            Text(model.state)
                        }
                    }
                }
                .tabViewStyle(.page)
                .id(models.map(\.id)) // 用所有model的id数组作为标识，数组变化时重建TabView
            } else {
                EmptyView()
            }
        }
    }
}

这个方法简单直接，只要数据源的元素id列表变化，TabView就会重新渲染所有页面，确保显示最新数据。

方案2：修改模型结构，更新现有实例而非创建新实例 #

原来的代码中，每次更新都会创建新的TextUIModel实例（带有新的UUID），虽然实现了Equatable，但.page样式的TabView更依赖id来跟踪视图。可以把state改为可变属性，直接更新现有实例的属性：

首先修改模型：

struct TextUIModel: Identifiable, Equatable {
    let id = UUID()
    let title: String
    var state: String // 改为可变属性
    
    // 自定义Equatable实现，确保属性变化时能被检测到
    static func == (lhs: TextUIModel, rhs: TextUIModel) -> Bool {
        lhs.id == rhs.id && lhs.title == rhs.title && lhs.state == rhs.state
    }
}

然后更新ViewModel的方法：

public class TextUIViewModel: ObservableObject {
    @Published var models: [TextUIModel] = [
        .init(title: "Title", state: "1"),
        .init(title: "Title", state: "2")
    ]

    func updateModel() {
        guard var updatedModel = models.first else { return }
        updatedModel.state = "2"
        models[0] = updatedModel
    }
}

这样更新时，TextUIModel的id保持不变，ForEach能通过Equatable检测到属性变化，从而触发对应视图的刷新，TabView(.page)也会正常更新显示内容。

方案3：让子视图直接观察ViewModel #

把TabViewForTExtUIModels改为直接观察TextUIViewModel，而不是接收传递的models数组，这样能更直接地响应@Published属性的变化：

struct TabViewForTExtUIModels: View {
    @ObservedObject var viewModel: TextUIViewModel // 直接观察ViewModel
    
    var body: some View {
        VStack {
            if !viewModel.models.isEmpty {
                TabView {
                    ForEach(viewModel.models) { model in
                        VStack {
                            Text(model.title)
                            Text(model.state)
                        }
                    }
                }
                .tabViewStyle(.page)
            } else {
                EmptyView()
            }
        }
    }
}

然后在父视图中传递ViewModel：

public struct TextUIModelsContentView: View {
    @StateObject var viewModel: TextUIViewModel = .init()
    
    public init() {}
    
    public var body: some View {
        VStack {
            if viewModel.models.isEmpty { 
                Text("Empty") 
            } else {              
                TabViewForTExtUIModels(viewModel: viewModel) 
            }
            
            Button("Update states") { viewModel.updateModel() }
        }
    }
}

这种方式让子视图直接绑定数据源的发布者，确保任何更新都能被及时捕获并触发视图刷新。

内容的提问来源于stack exchange，提问作者Joao Macedo Dev