SwiftUI - 列表项宽度不一致答案

【问题标题】：SwiftUI - Inconsistent list item widthsSwiftUI - 列表项宽度不一致
【发布时间】：2021-03-31 21:32:03
【问题描述】：

我有一个奇怪的情况。我有两个列表，它们都使用 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)
                    }
                }
            }
        }
    }

但结果不同。见附图。

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

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

...这次使用不同颜色的背景。有谁见过这个并且知道发生了什么？

【问题讨论】：

标签： swiftui swiftui-list swiftui-navigationlink swiftui-navigationview

【解决方案1】：

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

【讨论】：

您也可以直接在例如负责显示模态视图的Button

【解决方案2】：

没有看到完整的源代码，我猜这里发生了两件事：

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

【讨论】：

【解决方案3】：

这段代码显示了效果。只需注释掉 navigationView 下面的 .sheet 并从 List 下面的 .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")
        }

    }
}

【讨论】：