SwiftUI 和 ScrollView:视图在设备旋转后消失 [英] SwiftUI and ScrollView: Views Disappear After Device Rotation

问题描述

该视图由 SwiftUI 组成，List 包含多行，其中每一行都包含一个带有项目的 ScrollView.它类似于 Apple 的 SwiftUI Landmark 教程(

代码

struct ContentView: 查看 {@获取请求(实体:InsigniaContainer.entity(),排序描述符:[NSSortDescriptor(keyPath: \InsigniaContainer.sort, 升序: true),],谓词:NSPredicate(格式:parentContainer == NULL")) var insigniaContainers: FetchedResultsvar主体:一些视图{导航视图{列表 {ForEach(self.insigniaContainers, id: \.objectID) { (insigniaContainer: InsigniaContainer) inServiceBranchRow(serviceBranch: insigniaContainer)}.listRowInsets(EdgeInsets())}.navigationBarTitle("武装部队")}.navigationViewStyle(StackNavigationViewStyle())}}struct ServiceBranchRow:查看{var serviceBranch: InsigniaContainervar主体:一些视图{VStack(对齐:.领先，间距:0){文本(self.serviceBranch.wrappedName).font(.headline).fontWeight(.heavy).padding(.leader, 15).padding(.top, 10)垫片()ScrollView(.horizo​​ntal, showsIndicators: false) {HStack(间距:15){ForEach(self.serviceBranch.sortedChildContainers, id: \.objectID) { item inNavigationLink(destination: InsigniaList(insigniaContainer: item)) {ServiceBranchItem(项目:项目)}}}.填充(10).padding(.leader, 5).padding(.trailing, 5).padding(.bottom, 5)}}}}

解决方案

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

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

ScrollView(.horizo​​ntal, showsIndicators: false) {HStack(间距:15){ForEach(self.serviceBranch.sortedChildContainers, id: \.objectID) { item inNavigationLink(destination: InsigniaList(insigniaContainer: item)) {ServiceBranchItem(项目:项目)}}}.填充(10).padding(.leader, 5).padding(.trailing, 5).padding(.bottom, 5)}.id(UUID().uuidString)//!!这里

The view is composed with SwiftUI, and the List contains several rows where each row holds a ScrollView with the items. It is similar to Apple's SwiftUI Landmark tutorial (https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces). When I rotate the device (tested on real iPhone XS), the content of the ScrollView disappears. The issue is not present when I replace the ScrollView with another element, such as Text. Thus, the issue must somehow be related to the use of ScrollView. Please see below the screenshots and the SwiftUI code.

Behavior

Code

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

解决方案

Oh... that issue... known effect - it is due to List caching... it thinks that all scroll views are same.

The fix is simple - just add unique id exactly for scrollview, like below

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

这篇关于SwiftUI 和 ScrollView:视图在设备旋转后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！