如何在 SwiftUI 的 InsetGroupedListStyle 列表中为单元组添加边框？

Question

鉴于以下观点

import SwiftUI

struct ContentView: View {
  
  init() {
    UITableViewCell.appearance().backgroundColor = .black
    UITableView.appearance().backgroundColor = .black
  }
  
  var body: some View {
    List {
      Text("foo").listRowBackground(Color.gray)
      Text("bar").listRowBackground(Color.gray)
      Text("foo").listRowBackground(Color.gray)
      Text("bar").listRowBackground(Color.gray)
    }
    .listStyle(.insetGrouped)
  }
}

呈现如下

如何在 InsetGroupedListStyle 的圆角之后的列表元素周围添加一个边框，就像这个红色边框一样

我尝试向列表或单元格添加边框和阴影，但它们与 insetGrouped 单元格“块”不匹配。

Answer 1

以这种方式添加边框将不起作用，因为 Apple 有列表布局标准，我们无法修改这些标准。 为了满足您的要求，我们必须通过将它们分成几个部分并在每个部分中保留 VStack 来进行自己的定制。

请检查我下面的代码，它为每个section提供了边框。

var body: some View {
      List {
          Section {
              VStack {
                  ForEach(items, id: \.self) { item in
                      HStack {
                          Text(item)
                          Spacer()
                      }
                      .padding(8)
                      
                      if items.last != item {
                          Divider()
                      }
                  }
              }
              .overlay(RoundedRectangle(cornerRadius: 10, style: .circular).stroke(Color(uiColor: .tertiaryLabel), lineWidth: 1)
                              )
          }
      }
      .listStyle(InsetListStyle())
      
  }