In my project (an Package), I have created an Manager (can be classified as an ViewModel) that will handle state updates throughout the Package Component view:
Note: The code is simplified for better understanding and to focus on principles behind things I did. The manager does complex things during state updates.
public class ComponentManager: ObservedObject {
@Published var rows: [any RowProtocol] = []
func updateState(_ newState: any RowProtocolData, id: String) {
guard let index = rows.firstIndex(where: { $0.id == id }) else { return }
rows[index].updateState(newState)
}
func getState(id: String) -> any RowProtocolData? {
guard let index = rows.firstIndex(where: { $0.id == id }) else { return nil }
return rows[index].state
}
}
The RowProtocol is defined as follows:
public protocol RowStateProtocol {}
public protocol RowProtocol: Identifiable {
associatedtype State: RowStateProtocol
associatedtype RowView: View
var id: String { get }
var state: State { get }
func updateState(_ newState: State)
@MainActor
@ViewBuilder
func renderRow() -> RowView
}
extension RowProtocol {
func updateState(_ newState: any RowProtocolData) {
guard let newState = newState as? State else { return }
self.updateState(newState)
}
}
Then in Component View, I need to render the rows based on the underlying type of the row, this where the renderRow() comes in:
struct ComponentView: View {
@ObservedObject var manager: ComponentManager
var body: some View {
List {
ForEach(manager.rows, id: \.id) { row in
HStack { // This HStack prevent List from initing all rows due to AnyView.
AnyView(row.renderRow())
}
}
}
}
}
The row views will be accepting binding to the state of the row and update their state, let says we have a TextRow and a ToggleRow:
struct TextRow: RowProtocol {
var id: String
var state: TextRowState
func updateState(_ newState: TextRowState) {
self.state = newState
}
}
struct ToggleRow: RowProtocol {
var id: String
var state: ToggleRowState
func updateState(_ newState: ToggleRowState) {
self.state = newState
}
}
In this, offcourse we cannot create an binding directly to the state of the row, since the state are through the manager and the row data won't have access to the manager. So I created an property wrapped that use the closures passed by the manager into environment to create the binding and an view that will give the binding to the content view:
extenstion EnvironmentValues {
@Entry internal var getState: (String) -> any RowStateProtocol?
@Entry internal var updateState: (any RowStateProtocol, String) -> Void
}
@propertyWrapper
struct RowStateBinding<State: RowStateProtocol & Equatable>: DynamicProperty {
@Environment(\.getState) private var getState
@Environment(\.updateState) private var updateState
private let id: String
init(id: String) {
self.id = id
}
var wrappedValue: State {
get {
getState(id) as! State
}
nonmutating set {
if wrappedValue != newValue { // only update for an new change, since set can be triggered for any number of reasons.
updateState(newValue, id)
}
}
}
var projectedValue: Binding<State> {
Binding(
get: { self.wrappedValue },
set: { newValue in
self.wrappedValue = newValue
}
)
}
}
struct RowStateBindingView<Content: View, State: RowStateProtocol & Equatable>: View {
@RowStateBinding<State> private var state: State
private let content: (Binding<State>) -> Content
init(id: String, @ViewBuilder content: @escaping (Binding<State>) -> Content) {
self._state = RowStateBinding(id: id)
self.content = content
}
var body: some View {
content($state)
}
}
and in the renderRows:
struct TextRowView: View {
@Binding var text: TextRowState
var body: some View {
TextField("Enter text", text: $text.text)
}
}
extension TextRow {
func renderRow() -> some View {
RowStateBindingView(id: id) { state in
TextField("Enter text", text: state.text)
}
}
}
struct ToggleRowView: View {
@Binding var state: ToggleRowState
var body: some View {
Toggle("Toggle", isOn: $state.isOn)
}
}
extension ToggleRow {
func renderRow() -> some View {
RowStateBindingView(id: id) { state in
Toggle("Toggle", isOn: state.isOn)
}
}
}
This way, I can adopt any view as an row view and most importantly, the view can be completely independent of the manager and used as an standalone view. Also clients of the library can create their own custom rows by just conforming to the RowProtocol and creating the view for it, without worrying about how the state management works. The manager will handle all the state updates.
I prefer using stucts over classes for rows and states, since its easier to manage state updates.
What do you think about this approach? Do you see any potential issues with this? Is there a better way to achieve this?
0
0
12