如何使SwiftUI忘记内部状态

由 cet发布于 2020-05-09 13:08:21

我有以下观点

struct A: View {
    var content: AnyView
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack {
                // Common Elements
                content
                // More Common Elements
            }
        }
    }
}

当我从另一个视图调用时

A(nextInnerView())

two things happen. Firstly, as the size of the content element changes ScrollView animates the transition. Secondly, if you scroll down and then change the content the scrolling position does not reset.

hipsum

2020-05-09 13:08:22

这是可能解决方案的演示。经过Xcode 11.4 / iOS 13.4测试

The origin of this behaviour is in SwiftUI rendering optimisation, that tries to re-render only changed part, so approach is to identify view A (to mark it as completely changed) based on condition that originated in interview changes, alternatively it can be identified just by UUID().

struct TestInnerViewReplacement: View {
    @State private var counter = 0
    var body: some View {
        VStack {
            Button("Next") { self.counter += 1 }
            Divider()
            A(content: nextInnerView())
               .id(counter)              // << here !!
        }
    }

    private func nextInnerView() -> AnyView {
        AnyView(Group {
            if counter % 2 == 0 {
                Text("Text Demo")
            } else {
                Image(systemName: "star")
                    .resizable()
                    .frame(width: 100, height: 100)
            }
        })
    }
}

struct A: View {
    var content: AnyView

    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack {
                ForEach(0..<5) { _ in      // upper content demo 
                    Rectangle().fill(Color.yellow)
                        .frame(height: 40)
                        .frame(maxWidth: .infinity)
                        .padding()
                }

                content

                ForEach(0..<10) { _ in    // lower content demo
                    Rectangle().fill(Color.blue)
                        .frame(height: 40)
                        .frame(maxWidth: .infinity)
                        .padding()
                }
            }
        }
    }
}

cet

这家伙很懒，什么都没留下

积分
0
话题
0
评论
3313
注册排名
1500