SwiftUI:强制列表行根据内容调整高度

SwiftUI: Force List Row to adjust height to content

我在使用不会更改行高的列表时遇到了一些问题。我把它分成一个简单的例子。

这是完整的演示代码:

struct ContentView: View {
  let items = ["item 1", "item 2", "item 3"]
  @State var error: [String: String] = []
  
  var body: some View {
    List {
      ForEach(self.items, id: \.self) { item in
        VStack {
          Text(item)
            .padding()
          if let e = error[item] {
            Text(e)
          }
        }
        .swipeActions(edge: .leading, allowsFullSwipe: true) {
          Button(action: {
            self.error[item] = "ERROR!"
          }) {
            Image(systemName: "square.and.arrow.up")
          }.background(Color.blue)
        }
      }
    }
  }
}

我想在用户滑动单元格后在常规项目下方显示一条错误消息。不幸的是现在发生的是:

我希望它看起来像这样(为此我在代码中的 'error' 字典中添加了一个元素):

在我看来,这似乎是很多人都会遇到的问题,但我找不到关于这个问题的太多信息。我已经尝试了一些东西(例如“.fixedSize”修饰符),但我尝试过的任何东西都没有奏效,我将非常感谢对此的任何帮助或想法!

列表缓存创建的行,所以我们需要让它知道特定的行应该从头开始重建。可能的解决方案是根据与可选错误文本相同的条件使用 .id

测试 Xcode 13.2 / iOS 15.2

这里修改了部分代码(为演示添加了一些额外的代码):

.swipeActions(edge: .leading, allowsFullSwipe: true) {
  Button(action: {
    if nil == self.error[item] {
        self.error[item] = "ERROR!"
        } else {
            self.error[item] = nil
        }
  }) {
    Image(systemName: "square.and.arrow.up")
  }.background(Color.blue)
}
.id(item + (self.error[item] ?? ""))   // << here !!