首页 > 解决方案 > SwiftUI 和 ScrollView:设备旋转后视图消失

问题描述

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

行为

在此处输入图像描述

代码

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)
            }
        }
    }
}

标签: iosswiftswiftui

解决方案


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

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

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

推荐阅读