SwiftUI：在動態“列表”中的“切換”在重用時會破壞其布局？

Question

我正在嘗試顯示包含Toggle元素的行的動態List 。 Toggle最初的布局是正確的，但是當它們滾動進出視圖時（即在單元格重用時），它們的布局會中斷。

最小示例代碼：

import SwiftUI

struct SwitchList: View {
    var body: some View {
        List(0..<20) { _ in
            SwitchRow(value: Bool.random())
        }
    }
}

struct SwitchRow: View {
    @State var value: Bool

    var body: some View {
        Toggle(isOn: $value) {
            Text("A switch row")
        }
    }
}

演示問題的屏幕錄像：

（這是在模擬器上使用 iOS 13.2.2 (17B102)。）

我做錯了什么，還是這是一個錯誤？ 如何讓Toggle正確顯示？

Answer 1

這是 iOS 13.2+ 中的錯誤/回歸

工作 - iOS 13.1 (17A844) / Xcode 11.1 (11A1027)
損壞 - iOS 13.2.2 (17B102) / Xcode 11.2.1 (11B500)
損壞 - iOS 13.3 beta (17C5032d) / Xcode 11.3 beta (11C24b)

向 Apple 提交反饋

解決方法

此錯誤似乎僅影響采用data參數的List初始化程序。 此代碼在功能上是等效的，但不受該錯誤的影響。

struct SwitchList: View {
    var body: some View {
        List {
            ForEach(0..<20) { _ in
                SwitchRow(value: Bool.random())
            }
        }
    }
}

Answer 2

我能夠重現該問題，但無法找出發生這種情況的原因。 當我將ScrollView()與Devider() ) 一起使用時，我不再有問題了。 這是代碼：

struct SwitchList: View {
    var body: some View {
        ScrollView {
            ForEach(1...50, id: \.self) { item in
                VStack {
                    SwitchRow(value: Bool.random())
                    Divider()
                }
            }
        }
    }
}

struct SwitchRow: View {
    @State var value: Bool

    var body: some View {
        Toggle(isOn: $value) {
            Text("A switch row")
        }
    }
}

我希望這有幫助！