List with ForEach: Separator-lines below each item

App Development
1

Does someone know where the separator lines (blue arrows on the image) come from and how one can get rid of them?

image
image373×753 58.3 KB

The source code of the list:

List {
    ForEach(viewModel.intakes) { intake in
        ZStack {
            Rectangle()
               .stroke(.gray, lineWidth: 2)
               .frame(height: 55)
               .cornerRadius(2)
             HStack {
                 Spacer()
                 Text("\(String(format: "%.0f", intake.amount)) mL")
                 Spacer()
                 Text("\(intake.type.rawValue)")
                 Text("\(intake.dateTime.formatted(date: .omitted, time: .shortened))")
                 Spacer()
              }
         }
     }
 }.scrollContentBackground(.hidden)
2

It’s because you have a List and by default there’s separator lines

Use the modifier .listRowSeparator(.hidden) on the List

1 Like
3 
.onAppear {
     UITableView.appearance().separatorStyle = .none
 }
1 Like
4

Thanks a lot. It works.

app_without_sep
app_without_sep433×876 55.3 KB

But I had to apply the modifier on the ForEach.

The current code, with which I accomplished the shown interface:

List {
    ForEach(viewModel.intakes) { intake in  
        ZStack {
            Rectangle()
                .stroke(.gray, lineWidth: 2)
                .frame(height: 55)
                .cornerRadius(2)
            HStack {
                Spacer()
                Text("\(String(format: "%.0f", intake.amount)) mL")
                Spacer()
                Text("\(intake.type.rawValue)")
                Image(systemName: "drop.fill")
                    .foregroundColor(intake.type == .water ? .blue :
                                    intake.type == .coffee ? .brown :
                                    intake.type == .juice ? .orange : .gray)
                Text("\(intake.dateTime.formatted(date: .omitted, time: .shortened))")
                Spacer()
            }
        }
    }.listRowSeparator(.hidden)
}
.scrollContentBackground(.hidden)
5

That makes sense. In fact what you are doing is applying the modifier inside the List closure.

1 Like