ios 如何在ForEach视图中的每个项目之间添加分隔符?

ax6ht2ek  于 2023-01-14  发布在  iOS
关注(0)|答案(3)|浏览(125)

我正在尝试构建一个ForEach,它在一个对象数组中循环。一切都很好,但是我不知道如何在元素之间添加一个分隔符。
行的布局是在一个单独的视图中,并且我已经尝试向行添加一个分隔符,这导致列表的末尾看起来很糟糕,因为分隔符在最后一项下面。
我不能使用 List,因为它不是页面上的唯一视图。所有内容都在 ScrollView 中。
作为参考,这里是到目前为止的代码和UI。

下面是列表视图的代码:

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

下面是行视图的代码:

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

是否有一种方法可以在ForEach循环中的每个项之间添加一个分隔符,或者我可以从最后一个项中删除分隔符**?
我很高兴能得到任何帮助。

wwtsj6pe

wwtsj6pe1#

下面是一种可能的方法

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()
        }
      }
    }
nr7wwzry

nr7wwzry2#

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

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)
    }
}

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

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

rqcrx0a63#

您可以使用泛型“DividedForEachView,它在除最后一个元素之外的每个元素后面插入一个分隔符。

struct DividedForEach<Data: RandomAccessCollection, ID: Hashable, Content: View, D: View>: View {
    let data: Data
    let id: KeyPath<Data.Element, ID>
    let content: (Data.Element) -> Content
    let divider: (() -> D)

    init(_ data: Data, id: KeyPath<Data.Element, ID>, content: @escaping (Data.Element) -> Content, divider: @escaping () -> D) {
       self.data = data
       self.id = id
       self.content = content
       self.divider = divider
    }

    var body: some View {
        ForEach(data, id: id) { element in
            content(element)
        
            if element[keyPath: id] != data.last![keyPath: id] {
                divider()
            }
    }
}

相关问题