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