SwiftUI和ScrollView:设备旋转后视图消失

时间:2020-03-02 15:44:35

标签: ios swift swiftui

该视图由SwiftUI组成,并且List包含几行,其中每一行包含一个带有项目的ScrollView。它类似于Apple的SwiftUI Landmark教程(https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces)。当我旋转设备(在真实的iPhone XS上测试)时,ScrollView的内容消失。当我用另一个元素(例如Text)替换ScrollView时,此问题不存在。因此,该问题必须以某种方式与ScrollView的使用有关。请参见下面的屏幕截图和SwiftUI代码。

行为

enter image description here

代码

struct ContentView: View {
    @FetchRequest(
        entity: InsigniaContainer.entity(),
        sortDescriptors: [
            NSSortDescriptor(keyPath: \InsigniaContainer.sort, ascending: true),
        ],
        predicate: NSPredicate(format: "parentContainer == NULL")
    ) var insigniaContainers: FetchedResults<InsigniaContainer>

    var body: some View {
        NavigationView {
            List {
                ForEach(self.insigniaContainers, id: \.objectID) { (insigniaContainer: InsigniaContainer) in
                    ServiceBranchRow(serviceBranch: insigniaContainer)
                }
                .listRowInsets(EdgeInsets())
            }
            .navigationBarTitle("Armed Forces")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}



struct ServiceBranchRow: View {
    var serviceBranch: InsigniaContainer

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text(self.serviceBranch.wrappedName)
                .font(.headline)
                .fontWeight(.heavy)
                .padding(.leading, 15)
                .padding(.top, 10)
            Spacer()
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15) {
                    ForEach(self.serviceBranch.sortedChildContainers, id: \.objectID) { item in
                        NavigationLink(destination: InsigniaList(insigniaContainer: item)) {
                            ServiceBranchItem(item: item)
                        }
                    }
                }
                .padding(10)
                .padding(.leading, 5)
                .padding(.trailing, 5)
                .padding(.bottom, 5)
            }
        }
    }
}

1 个答案:

答案 0 :(得分:1)

这个问题...已知的效果-是由于列表缓存...导致所有滚动视图都相同。

修复很简单-只需为滚动视图添加唯一的精确,如下所示

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 15) {
        ForEach(self.serviceBranch.sortedChildContainers, id: \.objectID) { item in
            NavigationLink(destination: InsigniaList(insigniaContainer: item)) {
                ServiceBranchItem(item: item)
            }
        }
    }
    .padding(10)
    .padding(.leading, 5)
    .padding(.trailing, 5)
    .padding(.bottom, 5)
}
.id(UUID().uuidString) // !! here