如何在 ForEach 视图中的每个项目之间添加分隔线？答案

【问题标题】：How to add a divider between each item inside a ForEach View?如何在 ForEach 视图中的每个项目之间添加分隔线？
【发布时间】：2021-03-29 02:30:57
【问题描述】：

我正在尝试构建一个循环遍历对象数组的 ForEach。一切正常，但我不知道如何在元素之间添加分隔线。

行的布局在一个单独的视图中，我尝试在行中添加一个 Divider，这导致列表末尾看起来很糟糕，因为 Divider 在最后一项下方。

我不能使用 List，因为它不是页面上的唯一视图。一切都在 ScrollView 中。

作为参考，这里是到目前为止的代码和 UI。

这是列表视图的代码：

VStack {
        ForEach (manufacturers) { manufacturer in
          NavigationLink(destination: Text("test")) {
            Row(manufacturer: manufacturer)
          }
        }
      }
      .background(Color("ListBackground"))
      .cornerRadius(12)

这是 Row 视图的代码：

VStack {
      HStack {
        Text(manufacturer.name)
          .font(.system(size: 18, weight: .regular))
          .foregroundColor(.black)
        Spacer()
        Image(systemName: "chevron.right")
          .foregroundColor(.secondary)
      }
    }
    .padding()
    .buttonStyle(PlainButtonStyle())

有没有办法在 ForEach 循环中在每个项目之间添加分隔符，或者我可以从最后一个项目中删除分隔符？

我很高兴我能得到的每一个帮助。

【问题讨论】：

标签： ios swift foreach swiftui

【解决方案1】：

这是一种可能的方法

    ForEach (manufacturers) { manufacturer in
      VStack {
        NavigationLink(destination: Text("test")) {
          Row(manufacturer: manufacturer)
        }

        // I don't known your manufacturer type so below condition might
        // require fix during when you adapt it, but idea should be clear
        if manufacturer.id != manufacturers.last?.id {
           Divider()
        }
      }
    }

【讨论】：

【解决方案2】：

您可以使用比较计数删除最后一行。

struct Row: View {
    var manufacturer: String
    var isLast: Bool = false
    var body: some View {
        VStack {
            HStack {
                Text(manufacturer)
                    .font(.system(size: 18, weight: .regular))
                    .foregroundColor(.black)
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.secondary)
            }
            if !isLast {
                Divider()
            }
        }
        .padding()
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView5: View {
    private var manufacturers = ["1", "2", "3"]
    
    var body: some View {
        VStack {
            ForEach (manufacturers.indices, id: \.self) { idx in
                NavigationLink(destination: Text("test")) {
                    Row(manufacturer: manufacturers[idx], isLast: idx == manufacturers.count - 1)
                }
            }
        }
        .background(Color("ListBackground"))
        .cornerRadius(12)
    }
}

或者您可以从行中删除最后一个变量。

 VStack {
    ForEach (manufacturers.indices, id: \.self) { idx in
        NavigationLink(destination: Text("test")) {
            Row(manufacturer: manufacturers[idx])
        }
        if idx != manufacturers.count - 1 {
            Divider()
        }
    }
}

【讨论】：