SwiftUI 将列表中的行间距减少为空

Question

我想将列表中的行距减少为空。

我尝试减少填充没有奏效。设置“.environment(.defaultMinListRowHeight, 0)”帮助很大。

struct ContentView: View {
  @State var data : [String] = ["first","second","3rd","4th","5th","6th"]

  var body: some View {
    VStack {
      List {
        ForEach(data, id: \.self)
        { item in
          Text("\(item)")
          .padding(0)
          //.frame(height: 60)
          .background(Color.yellow)
        }
        //.frame(height: 60)
        .padding(0)
        .background(Color.blue)
      }
      .environment(\.defaultMinListRowHeight, 0)
      .onAppear { UITableView.appearance().separatorStyle = .none }
      .onDisappear { UITableView.appearance().separatorStyle = .singleLine }
    }
  }
}

将 ‘separatorStyle’ 更改为 ‘.none’ 仅删除了行但留下了空格。
列表行或行之间的分隔符是否有额外的“隐藏” View ？如何控制？

使用 ScrollView 而不是 List 会是一个好的解决方案吗？

ScrollView(.horizontal, showsIndicators: true)
        {
      //List {
        ForEach(data, id: \.self)
        { item in
          HStack{
          Text("\(item)")
            Spacer()
          }

它也适用于大型数据集吗？

Answer 1

好吧，实际上不足为奇 - .separatorStyle = .none 可以正常工作。我想你混淆了文本背景和单元格背景——它们被不同的修饰符改变了。请在下面找到经过测试和工作的代码(Xcode 11.2/iOS 13.2)

struct ContentView: View {
  @State var data : [String] = ["first","second","3rd","4th","5th","6th"]

  var body: some View {
    VStack {
      List {
        ForEach(data, id: \.self)
        { item in
          Text("\(item)")
            .background(Color.yellow) // text background
            .listRowBackground(Color.blue) // cell background
        }
      }
      .onAppear { UITableView.appearance().separatorStyle = .none }
      .onDisappear { UITableView.appearance().separatorStyle = .singleLine }
    }
  }
}

更新:

it's not possible to avoid the blue space between the yellow Texts?

从技术上讲是的，这是可能的，但是对于演示来说，它使用的是硬编码值，并且不难适应一些值，而动态地计算这个可能具有挑战性......无论如何，就在这里

它需要组合堆栈来压缩，内容填充来抵抗，环境来限制:

  List {
    ForEach(data, id: \.self)
    { item in
        HStack {                                 // << A
          Text("\(item)")
            .padding(.vertical, 2)               // << B
        }
        .listRowBackground(Color.blue)
        .background(Color.yellow)
        .frame(height: 12)                       // << C
    }
  }
  .environment(\.defaultMinListRowHeight, 12)    // << D