SwiftUI 列表中某些行的布局问题 [英] Problems with layout of some rows in SwiftUI list

问题描述

我曾尝试找到之前问过的类似问题，但失败了.

I have tried to find a similar problem asked before, but failed.

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

I have a simple view with list. I am using a ForEach to show 10 iterations of the some list item to create a layout before I will add real data to this list. I have a problem with last 2 rows not rendering correctly. But sometimes it’s other row. I have tested on an iPhone too and sometimes it’s one row, sometimes another. The code for the view with list is this:

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

列表项的代码是这样的:

The code for list items is this:

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

为什么我的列表中的某些行中的切换已损坏?为什么它向左侧移动?

Why is toggle broken in some rows on my list? Why it moves to the left side?

推荐答案

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

I tried your code at simulators first and had same issue too. But then I remembered, that there are some problems with 13.2 iOS and tried to run it on my device (iPhone 7, iOS 13.1.1) and everything works fine! I think that is the problem in 13.2 iOS, not in the List. There is sample, how I changed code for demonstration that everything is ok:

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

在我的手机上，结果是:

and on my phone the result is:

所以 13.2 版本有 bug，我希望 Apple 能修复它们

so there are bugs in 13.2 version and I hope Apple will fix them all

这篇关于SwiftUI 列表中某些行的布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！