SwiftUI：列表项之间的间距

Question

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

但是我的代码好像有很多问题：

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

( "<NSLayoutConstraint:0x600002438f50 'BIB_Trailing_CB_Leading' H:[_UIModernBarButton:0x7fd15fe088b0]-(6)-[_UIModernBarButton:0x7fd15fe064d0'World Clock'] (active)>", "<NSLayoutConstraint:0x600002438fa0 'CB_Trailing_Trailing' _UIModernBarButton:0x7fd15fe064d0'World Clock'.trailing <= _UIButtonBarButton:0x7fd15fe05310.trailing (active)>", "<NSLayoutConstraint:0x600002439d10 'UINav_static_button_horiz_position' _UIModernBarButton:0x7fd15fe088b0.leading == UILayoutGuide:0x600003e04a80'UIViewLayoutMarginsGuide'.leading (active)>", "<NSLayoutConstraint:0x600002439d60 'UINavItemContentGuide-leading' H:[_UIButtonBarButton:0x7fd15fe05310]-(0)-[UILayoutGuide:0x600003e049a0'UINavigationBarItemContentLayoutGuide'] (active)>", "<NSLayoutConstraint:0x6000024350e0 'UINavItemContentGuide-trailing' UILayoutGuide:0x600003e049a0'UINavigationBarItemContentLayoutGuide'.trailing == _UINavigationBarContentView:0x7fd15fd0a640.trailing (active)>", "<NSLayoutConstraint:0x60000243a4e0 'UIView-Encapsulated-Layout-Width' _UINavigationBarContentView:0x7fd15fd0a640.width == 0 (active)>", "<NSLayoutConstraint:0x6000024354a0 'UIView-leftMargin-guide-constraint' H:|-(0)-UILayoutGuide:0x600003e04a80'UIViewLayoutMarginsGuide' (active, names: '|':_UINavigationBarContentView:0x7fd15fd0a640 )>" )

这是我的代码：

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

    CustomView:
        var body: some View {
            GeometryReader { geo in
                Circle().frame(width: geo.size.height, height: geo.size.height)
                .background(Color.green)
            }
        }

知道哪里出了问题吗？

Answer 1

您的 spacer 不起作用，因为 HStack 中的 NavigationLink 占用了所有 space：它的优先级高于 Spacer .

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

Rectangle 不是视图而是 Shape，与任何其他 Shape 一样，它的颜色应该设置为 foregroundColor，而不是 background ].

GeometryReader 总是采用所有可用的 space，除非您向其添加大小修饰符。它不能自己环绕内容。所以你可以使用以下技巧：为 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 时，您可以忽略它：这不是您的错误。

SwiftUI：列表项之间的间距

SwiftUI: Spacing between List Items

swiftui

swiftui-list