如何在 SwiftUI 中复制 UITableViewCell imageView

Question

在正常的storyboard/UIKit应用中，可以在cellForRowAt函数中设置一个cell的imageView，如下：

cell.imageView?.image = // some UIImage

设置 imageView 后，tableView 的分隔线会缩短以适应图像，图像本身下方不会留下分隔线，就像在默认设置应用中一样 (Image)

然而，在 SwiftUI 中，这似乎是不可能的。当然，您可以使用 List 和 HStack 复制单元格的内容，但分隔符会扩展单元格的整个底部。

我尝试过的变通办法大致如下：

UITableView.appearance().separatorStyle = .none

struct TableView: View {
  let arr = ["Alex", "Brian", "Charlie"]
  var body: some View {
    List(arr, id: \.self) { entry in
      HStack {
        Image(systemName: "person")
        VStack(alignment: .leading) {
          Text(String(entry))
          Divider()
        }
      }
    }
  }
}

但它们都没有正确对齐like so。

同样，考虑到 SwiftUI 的基本工作原理以及一个非常微不足道的问题，这可能是不可行的，但我认为问一下也无妨。为 WWDC 祈祷？

Answer 1

将 HStack 对齐设置为 .firstTextBaseline。

HStack(alignment: .firstTextBaseline) {
    ...
}

谢谢。 X_X

如何在 SwiftUI 中复制 UITableViewCell imageView

How to replicate UITableViewCell imageView in SwiftUI

swift

uitableview

swiftui

swiftui-list