SwiftUI - 不一致的列表项宽度

如何解决SwiftUI - 不一致的列表项宽度

我有一个奇怪的情况。我有两个列表，它们都使用 ForEach 来迭代多个 ListItem 结构。在第一个视图中，ListItems 似乎比在第二个视图中更靠近水平边缘。两者都使用类似的代码：

    var body: some View {
        NavigationView {
            List {
                ForEach(self.tvm.filteredTrucks,id:\.id) { truck in
                    NavigationLink (destination: TruckDetail(truck: truck)) {
                        TruckListItem(truck: truck,trucklogos: tvm.trucklogos)
                    }
                }
            }
        }
    }

但结果不同。查看附加图片。

注意左右边框以及分隔线长度。对于我的生活，我无法弄清楚它们为什么不同。

在另一个应用程序中，我以同样的方式创建了一个列表，但我看到了同样的水平间距问题...

...这次有不同颜色的背景。有没有人以前看过这个并知道发生了什么？

解决方法

进一步的研究似乎表明，如果您将 .sheet 附加到列表中，则项目会变得更窄。如果您将 .sheet 附加到列表上方的视图，即导航视图，则项目将按预期显示。

如果没有看到完整的源代码，我猜这里有两件事：

SwiftUI 中的视图会自动压缩尽可能小的内容以适应内容。因此，如果内容没有扩展到屏幕的整个宽度，则列表中的行将仅根据需要宽度。为了解决这个问题，您可以在行中的部分内容上设置 .frame(maxWidth: .infinity) 。 For more details,here's a video on how to use frames in SwiftUI.
您正在使用列表，并且列表具有根据环境自动适应的样式（iPhone、iPad、NavigationView 内部、带有 NavigationBarButtons 的 NavigationView 内部等）。您可以使用 .listViewStyle() 手动覆盖要使用的样式。 For more details,here's a video on how to use List in SwiftUI.

此代码显示效果。只需注释掉导航视图下方的 .sheet 并从列表下方的 .sheet 中删除 //。

import SwiftUI

struct ContentView: View {
    @State private var presented: Bool = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach (0..<10,id: \.self) {item in
                    Color.red
                }
            }
            .navigationTitle(Text("Test"))
//            .sheet (isPresented: $presented) {
//                Text("Test")
//            }
        }
        .sheet (isPresented: $presented) {
            Text("Test")
        }

    }
}