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

我能够重现问题，但无法找出发生这种情况的原因。当我将 ScrollView() 与 Divider() 一起使用时，我不再遇到问题。这是代码：

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

希望对您有所帮助！

Answer 2

这是bug/regression在iOS13.2+

工作 - iOS 13.1 (17A844) / Xcode 11.1 (11A1027)
损坏 - iOS 13.2.2 (17B102) / Xcode 11.2.1 (11B500)
损坏 - iOS 13.3 测试版 (17C5032d) / Xcode 11.3 测试版 (11C24b)

Submit feedback to Apple

解决方法

此错误似乎只影响采用 data 参数的 List 初始值设定项。此代码在功能上是等效的，但不受该错误的影响。

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

SwiftUI：动态“列表”中的“切换”在重用时会破坏其布局吗？

SwiftUI: `Toggle`s within dynamic `List` breaking their layout upon reuse?

toggle

ios

swiftui

swiftui-list