SwiftUI 自定义视图的 ViewBuilder 在子类 ObservedObject 更新时没有 re-render/update
SwiftUI custom View's ViewBuilder doesn't re-render/update on subclassed ObservedObject update
这个我已经研究了几天,搜索了 Swift & SwiftUI 文档、SO、论坛等,但似乎找不到一个答案。
问题来了;
我有一个 SwiftUI 自定义视图,它根据对远程资源的自定义 API 请求 class 进行一些状态确定。 View 处理显示加载状态和失败状态,以及通过 ViewBuilder 传递的主体内容,因此如果来自 API 的状态成功并且资源数据已加载,它将显示页面的内容。
问题是,当 subclassed ObservedObject 更新时,ViewBuilder 内容不会重新呈现。对象更新以响应 UI(当按下按钮等时),但 UI 从不 re-renders/updates 反映子 classed ObservedObject 中的变化,因为例如,当数组内容更改时,subclassed ObservedObject 中数组后面的 ForEach 不会刷新。如果我将它移出自定义视图,ForEach 将按预期工作。
我可以确认代码编译并运行。观察者和 debugPrint()
始终显示 ApiObject
正在正确更新状态,并且视图反映了 ApiState
的变化非常好。它只是 ViewBuilder 的 Content
。我假设是因为 ViewBuilder 只会被调用一次。
编辑:上面的段落应该是提示,ApiState
更新正确,但是在对应用程序进行大量日志记录后,UI没有监听 subclassed ObservedObject 的发布。属性在变化,状态也在变化,但 UI 并没有对此作出反应。
另外,下一句竟然是假的,我在VStack中再次测试,组件仍然没有重新渲染,说明我找错地方了!
如果是这种情况,VStack
和其他类似元素如何解决这个问题?
还是因为我的 ApiObjectView
在状态变化时被重新渲染,导致子视图变为 'reset'?尽管在这种情况下我希望它能够接收新数据并按预期工作,但它永远不会重新渲染。
有问题的代码在下面的 CustomDataList.swift
和 ApiObjectView.swift
中。我已经留下评论以指出正确的方向。
这是示例代码;
// ApiState.swift
// Stores the API state for where the request and data parse is currently at.
// This drives the ApiObjectView state UI.
import Foundation
enum ApiState: String
{
case isIdle
case isFetchingData
case hasFailedToFetchData
case isLoadingData
case hasFailedToLoadData
case hasUsableData
}
// ApiObject.swift
// A base class that the Controllers for the app extend from.
// These classes can make data requests to the remote resource API over the
// network to feed their internal data stores.
class ApiObject: ObservableObject
{
@Published var apiState: ApiState = .isIdle
let networkRequest: NetworkRequest = NetworkRequest(baseUrl: "https://api.example.com/api")
public func apiGetJson<T: Codable>(to: String, decodeAs: T.Type, onDecode: @escaping (_ unwrappedJson: T) -> Void) -> Void
{
self.apiState = .isFetchingData
self.networkRequest.send(
to: to,
onComplete: {
self.apiState = .isLoadingData
let json = self.networkRequest.decodeJsonFromResponse(decodeAs: decodeAs)
guard let unwrappedJson = json else {
self.apiState = .hasFailedToLoadData
return
}
onDecode(unwrappedJson)
self.apiState = .hasUsableData
},
onFail: {
self.apiState = .hasFailedToFetchData
}
)
}
}
// DataController.swift
// This is a genericised example of the production code.
// These controllers build, manage and serve their resource data.
// Subclassed from the ApiObject, inheriting ObservableObject
import Foundation
import Combine
class CustomDataController: ApiObject
{
@Published public var customData: [CustomDataStruct] = []
public func fetch() -> Void
{
self.apiGetJson(
to: "custom-data-endpoint ",
decodeAs: [CustomDataStruct].self,
onDecode: { unwrappedJson in
self.customData = unwrappedJson
}
)
}
}
这是在 ObservedObject
更改为绑定数组 属性 时重新呈现其 ForEach
时出现问题的视图。
// CustomDataList.swift
// This is the SwiftUI View that drives the content to the user as a list
// that displays the CustomDataController.customData.
// The ForEach in this View
import SwiftUI
struct CustomDataList: View
{
@ObservedObject var customDataController: CustomDataController = CustomDataController()
var body: some View
{
ApiObjectView(
apiObject: self.customDataController,
onQuit: {}
) {
List
{
Section(header: Text("Custom Data").padding(.top, 40))
{
ForEach(self.customDataController.customData, id: \.self, content: { customData in
// This is the example that doesn't re-render when the
// customDataController updates its data. I have
// verified via printing at watching properties
// that the object is updating and pushing the
// change.
// The ObservableObject updates the array, but this ForEach
// is not run again when the data is changed.
// In the production code, there are buttons in here that
// change the array data held within customDataController.customData.
// When tapped, they update the array and the ForEach, when placed
// in the body directly does reflect the change when
// customDataController.customData updates.
// However, when inside the ApiObjectView, as by this example,
// it does not.
Text(customData.textProperty)
})
}
}
.listStyle(GroupedListStyle())
}
.navigationBarTitle(Text("Learn"))
.onAppear() {
self.customDataController.fetch()
}
}
}
struct CustomDataList_Previews: PreviewProvider
{
static var previews: some View
{
CustomDataList()
}
}
这是有问题的自定义视图,不会重新呈现其内容。
// ApiObjectView
// This is the containing View that is designed to assist in the UI rendering of ApiObjects
// by handling the state automatically and only showing the ViewBuilder contents when
// the state is such that the data is loaded and ready, in a non errornous, ready state.
// The ViewBuilder contents loads fine when the view is rendered or the state changes,
// but the Content is never re-rendered if it changes.
// The state renders fine and is reactive to the object, the apiObjectContent
// however, is not.
import SwiftUI
struct ApiObjectView<Content: View>: View {
@ObservedObject var apiObject: ApiObject
let onQuit: () -> Void
let apiObjectContent: () -> Content
@inlinable public init(apiObject: ApiObject, onQuit: @escaping () -> Void, @ViewBuilder content: @escaping () -> Content) {
self.apiObject = apiObject
self.onQuit = onQuit
self.apiObjectContent = content
}
func determineViewBody() -> AnyView
{
switch (self.apiObject.apiState) {
case .isIdle:
return AnyView(
ActivityIndicator(
isAnimating: .constant(true),
style: .large
)
)
case .isFetchingData:
return AnyView(
ActivityIndicator(
isAnimating: .constant(true),
style: .large
)
)
case .isLoadingData:
return AnyView(
ActivityIndicator(
isAnimating: .constant(true),
style: .large
)
)
case .hasFailedToFetchData:
return AnyView(
VStack
{
Text("Failed to load data!")
.padding(.bottom)
QuitButton(action: self.onQuit)
}
)
case .hasFailedToLoadData:
return AnyView(
VStack
{
Text("Failed to load data!")
.padding(.bottom)
QuitButton(action: self.onQuit)
}
)
case .hasUsableData:
return AnyView(
VStack
{
self.apiObjectContent()
}
)
}
}
var body: some View
{
self.determineViewBody()
}
}
struct ApiObjectView_Previews: PreviewProvider {
static var previews: some View {
ApiObjectView(
apiObject: ApiObject(),
onQuit: {
print("I quit.")
}
) {
EmptyView()
}
}
}
现在,如果不使用 ApiObjectView
并将内容直接放在视图中,以上所有代码都可以正常工作。
但是,这对于代码重用和体系结构来说是可怕的,这种方式很好,很整洁,但行不通。
有没有其他方法可以解决这个问题,例如通过 ViewModifier
或 View
扩展?
如有任何帮助,我们将不胜感激。
正如我所说,我似乎找不到遇到此问题的任何人或任何在线资源可以为我指明解决此问题的正确方向,或者可能导致此问题的原因,例如文档中概述的ViewBuilder.
编辑:为了加入一些有趣的东西,我在 CustomDataList
中添加了一个倒数计时器,它每 1 秒更新一次标签。 IF 文本由该计时器对象更新,视图被重新呈现,但是 ONLY 当显示倒计时时间的标签上的文本是已更新。
在拔掉我的头发一个星期后弄清楚了,它是一个未记录的问题,子classing 一个 ObservableObject
,如 .[=27= 所示]
这特别烦人,因为 Xcode 显然会提示您删除 class,因为父 class 提供对 ObservableObject
的继承,所以在我看来一切都是嗯。
解决方法是,在子classed class 中通过 @Published
上的 willSet
侦听器手动触发通用状态更改 self.objectWillChange.send()
有问题的变量,或您需要的任何变量。
在我提供的示例中,问题中的基础 class ApiObject
保持不变。
虽然CustomDataController
需要修改如下:
// DataController.swift
// This is a genericised example of the production code.
// These controllers build, manage and serve their resource data.
import Foundation
import Combine
class CustomDataController: ApiObject
{
@Published public var customData: [CustomDataStruct] = [] {
willSet {
// This is the generic state change fire that needs to be added.
self.objectWillChange.send()
}
}
public func fetch() -> Void
{
self.apiGetJson(
to: "custom-data-endpoint ",
decodeAs: [CustomDataStruct].self,
onDecode: { unwrappedJson in
self.customData = unwrappedJson
}
)
}
}
我添加了手动发布后,问题就解决了。
来自链接答案的重要说明:不要在 subclass 上重新声明 objectWillChange
,因为这将再次导致状态不更新适当地。例如。声明默认值
let objectWillChange = PassthroughSubject<Void, Never>()
on the subclass 将再次中断状态更新,这需要保留在直接从 ObservableObject
扩展的父 class 上,我的手动或自动默认定义(输入或不输入并保留为继承声明)。
尽管您仍然可以根据需要定义任意数量的自定义 PassthroughSubject
声明而不会在子 class 上出现问题,例如
// DataController.swift
// This is a genericised example of the production code.
// These controllers build, manage and serve their resource data.
import Foundation
import Combine
class CustomDataController: ApiObject
{
var customDataWillUpdate = PassthroughSubject<[CustomDataStruct], Never>()
@Published public var customData: [CustomDataStruct] = [] {
willSet {
// Custom state change handler.
self.customDataWillUpdate.send(newValue)
// This is the generic state change fire that needs to be added.
self.objectWillChange.send()
}
}
public func fetch() -> Void
{
self.apiGetJson(
to: "custom-data-endpoint ",
decodeAs: [CustomDataStruct].self,
onDecode: { unwrappedJson in
self.customData = unwrappedJson
}
)
}
}
只要
self.objectWillChange.send()
保留在子class 上所需的 @Published
属性上
- 默认的
PassthroughSubject
声明不会在subclass 上重新声明
它将正常工作并正确传播状态更改。
这个我已经研究了几天,搜索了 Swift & SwiftUI 文档、SO、论坛等,但似乎找不到一个答案。
问题来了;
我有一个 SwiftUI 自定义视图,它根据对远程资源的自定义 API 请求 class 进行一些状态确定。 View 处理显示加载状态和失败状态,以及通过 ViewBuilder 传递的主体内容,因此如果来自 API 的状态成功并且资源数据已加载,它将显示页面的内容。
问题是,当 subclassed ObservedObject 更新时,ViewBuilder 内容不会重新呈现。对象更新以响应 UI(当按下按钮等时),但 UI 从不 re-renders/updates 反映子 classed ObservedObject 中的变化,因为例如,当数组内容更改时,subclassed ObservedObject 中数组后面的 ForEach 不会刷新。如果我将它移出自定义视图,ForEach 将按预期工作。
我可以确认代码编译并运行。观察者和 debugPrint()
始终显示 ApiObject
正在正确更新状态,并且视图反映了 ApiState
的变化非常好。它只是 ViewBuilder 的 Content
。我假设是因为 ViewBuilder 只会被调用一次。
编辑:上面的段落应该是提示,ApiState
更新正确,但是在对应用程序进行大量日志记录后,UI没有监听 subclassed ObservedObject 的发布。属性在变化,状态也在变化,但 UI 并没有对此作出反应。
另外,下一句竟然是假的,我在VStack中再次测试,组件仍然没有重新渲染,说明我找错地方了!
如果是这种情况,VStack
和其他类似元素如何解决这个问题?
还是因为我的 ApiObjectView
在状态变化时被重新渲染,导致子视图变为 'reset'?尽管在这种情况下我希望它能够接收新数据并按预期工作,但它永远不会重新渲染。
有问题的代码在下面的 CustomDataList.swift
和 ApiObjectView.swift
中。我已经留下评论以指出正确的方向。
这是示例代码;
// ApiState.swift
// Stores the API state for where the request and data parse is currently at.
// This drives the ApiObjectView state UI.
import Foundation
enum ApiState: String
{
case isIdle
case isFetchingData
case hasFailedToFetchData
case isLoadingData
case hasFailedToLoadData
case hasUsableData
}
// ApiObject.swift
// A base class that the Controllers for the app extend from.
// These classes can make data requests to the remote resource API over the
// network to feed their internal data stores.
class ApiObject: ObservableObject
{
@Published var apiState: ApiState = .isIdle
let networkRequest: NetworkRequest = NetworkRequest(baseUrl: "https://api.example.com/api")
public func apiGetJson<T: Codable>(to: String, decodeAs: T.Type, onDecode: @escaping (_ unwrappedJson: T) -> Void) -> Void
{
self.apiState = .isFetchingData
self.networkRequest.send(
to: to,
onComplete: {
self.apiState = .isLoadingData
let json = self.networkRequest.decodeJsonFromResponse(decodeAs: decodeAs)
guard let unwrappedJson = json else {
self.apiState = .hasFailedToLoadData
return
}
onDecode(unwrappedJson)
self.apiState = .hasUsableData
},
onFail: {
self.apiState = .hasFailedToFetchData
}
)
}
}
// DataController.swift
// This is a genericised example of the production code.
// These controllers build, manage and serve their resource data.
// Subclassed from the ApiObject, inheriting ObservableObject
import Foundation
import Combine
class CustomDataController: ApiObject
{
@Published public var customData: [CustomDataStruct] = []
public func fetch() -> Void
{
self.apiGetJson(
to: "custom-data-endpoint ",
decodeAs: [CustomDataStruct].self,
onDecode: { unwrappedJson in
self.customData = unwrappedJson
}
)
}
}
这是在 ObservedObject
更改为绑定数组 属性 时重新呈现其 ForEach
时出现问题的视图。
// CustomDataList.swift
// This is the SwiftUI View that drives the content to the user as a list
// that displays the CustomDataController.customData.
// The ForEach in this View
import SwiftUI
struct CustomDataList: View
{
@ObservedObject var customDataController: CustomDataController = CustomDataController()
var body: some View
{
ApiObjectView(
apiObject: self.customDataController,
onQuit: {}
) {
List
{
Section(header: Text("Custom Data").padding(.top, 40))
{
ForEach(self.customDataController.customData, id: \.self, content: { customData in
// This is the example that doesn't re-render when the
// customDataController updates its data. I have
// verified via printing at watching properties
// that the object is updating and pushing the
// change.
// The ObservableObject updates the array, but this ForEach
// is not run again when the data is changed.
// In the production code, there are buttons in here that
// change the array data held within customDataController.customData.
// When tapped, they update the array and the ForEach, when placed
// in the body directly does reflect the change when
// customDataController.customData updates.
// However, when inside the ApiObjectView, as by this example,
// it does not.
Text(customData.textProperty)
})
}
}
.listStyle(GroupedListStyle())
}
.navigationBarTitle(Text("Learn"))
.onAppear() {
self.customDataController.fetch()
}
}
}
struct CustomDataList_Previews: PreviewProvider
{
static var previews: some View
{
CustomDataList()
}
}
这是有问题的自定义视图,不会重新呈现其内容。
// ApiObjectView
// This is the containing View that is designed to assist in the UI rendering of ApiObjects
// by handling the state automatically and only showing the ViewBuilder contents when
// the state is such that the data is loaded and ready, in a non errornous, ready state.
// The ViewBuilder contents loads fine when the view is rendered or the state changes,
// but the Content is never re-rendered if it changes.
// The state renders fine and is reactive to the object, the apiObjectContent
// however, is not.
import SwiftUI
struct ApiObjectView<Content: View>: View {
@ObservedObject var apiObject: ApiObject
let onQuit: () -> Void
let apiObjectContent: () -> Content
@inlinable public init(apiObject: ApiObject, onQuit: @escaping () -> Void, @ViewBuilder content: @escaping () -> Content) {
self.apiObject = apiObject
self.onQuit = onQuit
self.apiObjectContent = content
}
func determineViewBody() -> AnyView
{
switch (self.apiObject.apiState) {
case .isIdle:
return AnyView(
ActivityIndicator(
isAnimating: .constant(true),
style: .large
)
)
case .isFetchingData:
return AnyView(
ActivityIndicator(
isAnimating: .constant(true),
style: .large
)
)
case .isLoadingData:
return AnyView(
ActivityIndicator(
isAnimating: .constant(true),
style: .large
)
)
case .hasFailedToFetchData:
return AnyView(
VStack
{
Text("Failed to load data!")
.padding(.bottom)
QuitButton(action: self.onQuit)
}
)
case .hasFailedToLoadData:
return AnyView(
VStack
{
Text("Failed to load data!")
.padding(.bottom)
QuitButton(action: self.onQuit)
}
)
case .hasUsableData:
return AnyView(
VStack
{
self.apiObjectContent()
}
)
}
}
var body: some View
{
self.determineViewBody()
}
}
struct ApiObjectView_Previews: PreviewProvider {
static var previews: some View {
ApiObjectView(
apiObject: ApiObject(),
onQuit: {
print("I quit.")
}
) {
EmptyView()
}
}
}
现在,如果不使用 ApiObjectView
并将内容直接放在视图中,以上所有代码都可以正常工作。
但是,这对于代码重用和体系结构来说是可怕的,这种方式很好,很整洁,但行不通。
有没有其他方法可以解决这个问题,例如通过 ViewModifier
或 View
扩展?
如有任何帮助,我们将不胜感激。
正如我所说,我似乎找不到遇到此问题的任何人或任何在线资源可以为我指明解决此问题的正确方向,或者可能导致此问题的原因,例如文档中概述的ViewBuilder.
编辑:为了加入一些有趣的东西,我在 CustomDataList
中添加了一个倒数计时器,它每 1 秒更新一次标签。 IF 文本由该计时器对象更新,视图被重新呈现,但是 ONLY 当显示倒计时时间的标签上的文本是已更新。
在拔掉我的头发一个星期后弄清楚了,它是一个未记录的问题,子classing 一个 这特别烦人,因为 Xcode 显然会提示您删除 class,因为父 class 提供对 解决方法是,在子classed class 中通过 在我提供的示例中,问题中的基础 class 虽然 我添加了手动发布后,问题就解决了。 来自链接答案的重要说明:不要在 subclass 上重新声明 on the subclass 将再次中断状态更新,这需要保留在直接从 尽管您仍然可以根据需要定义任意数量的自定义 只要 它将正常工作并正确传播状态更改。ObservableObject
,如 ObservableObject
的继承,所以在我看来一切都是嗯。@Published
上的 willSet
侦听器手动触发通用状态更改 self.objectWillChange.send()
有问题的变量,或您需要的任何变量。ApiObject
保持不变。CustomDataController
需要修改如下:// DataController.swift
// This is a genericised example of the production code.
// These controllers build, manage and serve their resource data.
import Foundation
import Combine
class CustomDataController: ApiObject
{
@Published public var customData: [CustomDataStruct] = [] {
willSet {
// This is the generic state change fire that needs to be added.
self.objectWillChange.send()
}
}
public func fetch() -> Void
{
self.apiGetJson(
to: "custom-data-endpoint ",
decodeAs: [CustomDataStruct].self,
onDecode: { unwrappedJson in
self.customData = unwrappedJson
}
)
}
}
objectWillChange
,因为这将再次导致状态不更新适当地。例如。声明默认值let objectWillChange = PassthroughSubject<Void, Never>()
ObservableObject
扩展的父 class 上,我的手动或自动默认定义(输入或不输入并保留为继承声明)。PassthroughSubject
声明而不会在子 class 上出现问题,例如 // DataController.swift
// This is a genericised example of the production code.
// These controllers build, manage and serve their resource data.
import Foundation
import Combine
class CustomDataController: ApiObject
{
var customDataWillUpdate = PassthroughSubject<[CustomDataStruct], Never>()
@Published public var customData: [CustomDataStruct] = [] {
willSet {
// Custom state change handler.
self.customDataWillUpdate.send(newValue)
// This is the generic state change fire that needs to be added.
self.objectWillChange.send()
}
}
public func fetch() -> Void
{
self.apiGetJson(
to: "custom-data-endpoint ",
decodeAs: [CustomDataStruct].self,
onDecode: { unwrappedJson in
self.customData = unwrappedJson
}
)
}
}
self.objectWillChange.send()
保留在子class@Published
属性上
PassthroughSubject
声明不会在subclass