SwiftUI 列表中某些行的布局问题

Posted 2023-02-23

【中文标题】SwiftUI 列表中某些行的布局问题

【英文标题】：Problems with layout of some rows in SwiftUI list

【发布时间】：2019-11-21 00:07:05

【问题描述】：

我曾试图找到以前问过的类似问题，但失败了。

我有一个简单的列表视图。我正在使用 ForEach 显示某个列表项的 10 次迭代以创建布局，然后再将实际数据添加到此列表中。我有最后 2 行无法正确呈现的问题。但有时它是另一排。我也在 iPhone 上测试过，有时是一排，有时是另一排。带有列表的视图的代码是这样的：

import SwiftUI

struct LocksView: View 

    @State private var locksPaid = 0

    var body: some View 
        NavigationView 
            List 
                DateView()
                    .listRowInsets(EdgeInsets())

                Picker(selection: $locksPaid, label: Text("Picker")) 
                    Text("All").tag(0)
                    Text("Not paid (2)").tag(1)
                
                .pickerStyle(SegmentedPickerStyle())
                .padding(10)

                ForEach(0 ..< 10) item in
                    LocksItemView()
                

            
            .navigationBarTitle(Text("Locks"))
            .navigationBarItems(trailing: EditButton())
        
    

列表项的代码是这样的：

import SwiftUI

struct LocksItemView: View 

    @State private var paid : Bool = false

    var body: some View 
        HStack 

            Text("L15")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .frame(width: 80)

            VStack(alignment: .leading) 
                Text("nickname")
                    .fontWeight(.bold)
                Text("category")
                Text("4 000 THB")
                    .fontWeight(.bold)
            

            Spacer()

            Toggle(isOn: self.$paid) 
                Text("Paid")
            
            .labelsHidden()
        
    

为什么我的列表中某些行的切换被破坏了？为什么会向左移动？

【问题讨论】：

它似乎已在 ios 13.4 和 Xcode 11.4 中修复 :)

【参考方案1】：

这不是最后的项目。如果您将 ForEach 设置为 20 而不是 10 并上下滚动，您会看到更有趣的问题。

我假设原因，实际上是 List 错误，与 this topic 中的相同。

解决方法 如果它对您不重要，请使用ScrollView 而不是List，经测试没有错误。否则，提交雷达并等待修复。

【讨论】：

谢谢@Asperi。我正在使用 List，因为 ScrollView 导致了其他问题。我想我会坚持一段时间并尝试解决这个问题。如果不是这样需要解决 ScrollView 的其他问题:)

顺便说一句，感谢您观察到它并不总是最后 2 行。我在手机上再次测试，有时是一排，有时是另一排。我已经更新了我的问题

Asperi，您的解决方法有效。刚试过。谢谢你！但正如我所说，我在使用 ScrollView 时遇到了一些问题。正如@Александр 发现的那样，这可能是一个错误，我希望它会在下一次 iOS 更新中得到解决。如果没有，我将尝试使用您的解决方法并修复滚动视图的问题。

【参考方案2】：

我首先在模拟器上尝试了您的代码，也遇到了同样的问题。但后来我想起，13.2 iOS 存在一些问题，并尝试在我的设备（iPhone 7、iOS 13.1.1）上运行它，一切正常！我认为这是 13.2 iOS 中的问题，而不是列表中的问题。有示例，我如何更改代码以证明一切正常：

import SwiftUI

struct LocksView: View 
    
    @State private var locksPaid = 0

    var body: some View 
        NavigationView 
            List 
                Picker(selection: $locksPaid, label: Text("Picker")) 
                    Text("All").tag(0)
                    Text("Not paid (2)").tag(1)
                
                .pickerStyle(SegmentedPickerStyle())
                .padding(10)

                ForEach(0 ..< 200) item in
                    LocksItemView(number: item)
                

            
            .navigationBarTitle(Text("Locks"))
            .navigationBarItems(trailing: EditButton())
        
    


struct LocksItemView: View 

    @State private var paid : Bool = false
    var number: Int

    var body: some View 
        HStack 

            Text("L\(self.number)")
                .font(.title)
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .frame(width: 80)

            VStack(alignment: .leading) 
                Text("nickname")
                    .fontWeight(.bold)
                Text("category")
                Text("4 000 THB")
                    .fontWeight(.bold)
            

            Spacer()

            Toggle(isOn: self.$paid) 
                Text("Paid")
            
            .labelsHidden()
        
    

在我的手机上结果是：

所以 13.2 版本中存在错误，我希望 Apple 将它们全部修复

【讨论】：

哇！非常感谢您的观察。如何使用 SwiftUI 提交错误？我会尝试解决这个问题一段时间。也许为行添加 ID 会有所帮助？也许现在这些行没有 100% 被视为单独的行？只是一个猜测。但是您的发现表明，即使使用这个确切的代码也可以在以前的 iOS 上运行。谢谢！

@mallow，我认为feedbackassistant.apple.com 是提交此错误的正确位置，也许今天以后我也会这样做

谢谢！我会做的。我在那里提交了一些关于 macOS 或 iOS 的错误，但它们从未得到修复，而且我的提交也很少得到答复。所以我希望有更好的方法:)

@mallow，评论已发送至 Apple，但我认为这样做不会打扰您 =)

这个错误在 13.3 中仍然存在。 ://