SwiftUI：列表项之间的间距

Question

我有一些代码显示一个带有标题和矩形的列表，如果用户点击它，它会导航到详细信息页面。

但我的代码似乎有多个问题：

1. 垫片不工作。我想要左边的名字和右边的矩形，就像堆栈中的一个垫片会推动它。
2. 不应用矩形的背景颜色。它只是黑色
3. 如果我添加一个导航标题，我会看到约束错误（见下文）

( "<0x600002438f50 h:><0x600002438fa0 _uimodernbarbutton:0x7fd15fe064d0 _uibuttonbarbutton:0x7fd15fe05310.trailing><0x600002439d10 _uimodernbarbutton:0x7fd15fe088b0.leading="=" uilayoutguide:0x600003e04a80><0x600002439d60 h:><0x6000024350e0 uilayoutguide:0x600003e049a0 _uinavigationbarcontentview:0x7fd15fd0a640.trailing><0x60000243a4e0 _uinavigationbarcontentview:0x7fd15fd0a640.width="="><0x6000024354a0 h:>

Answer 1

您的分隔符不起作用，因为 HStack 中有 NavigationLink 占用了所有空间：它的优先级高于 Spacer。

如果您想将NavigationLink 与EmptyView 一起使用，则应将其放置在具有附近视图的ZStack 中，但在这种情况下，您只需将单元格的内容放在NavigationLink label 中即可。

Rectangle 不是视图而是Shape，与任何其他Shape 一样，它的颜色应使用foregroundColor 设置，而不是background。

GeometryReader 总是占用所有可用空间，除非您为其添加大小修饰符。它不能自行环绕内容。所以你可以使用以下技巧：为GeometryReader 中的项目添加onAppear，并将width 传递给状态变量，然后将宽度修饰符添加到GeometryReader。

struct ContentView: View {
    @ObservedObject var viewModel = CityListViewModel()

    
    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.cityList, id: \.name) { city in
                    NavigationLink(
                        destination: Text(city.name)){
                        HStack{
                            Text(city.name)
                            Spacer()
                            CustomView()
                        }
                    }.frame(height: 100)
                }
            }
            .navigationTitle("World Clock")
        }
    }
}

struct CustomView: View {
    @State
    var width: CGFloat?
    
    var body: some View {
        GeometryReader { geo in
            Circle().frame(width: geo.size.height, height: geo.size.height)
                .background(Color.green)
                .onAppear {
                    width = geo.size.height
                }
        }.frame(width: width)
    }
}

如果您看到一些不是您创建的 NSLayoutConstraint 损坏，例如在使用 SwiftUI 时，您可以忽略它：这不是您的错误。