SwiftUI에서 List 내에서 ForEach를 사용할 때의주의

Qiita API를 사용해 기사 일람(타이틀, 일시, 태그)을 표시하는 앱을 작성하고 있는 가운데, 스크롤하면 태그의 표시가 어긋나는 현상이 생겼다.
(이런 오류에 걸리지 않는 문제가 가장 곤란하다.)

import SwiftUI
struct ContentView: View {    
    @ObservedObject var networkManager = NetworkManager()
    var body: some View {
        NavigationView {
            VStack {
                List(networkManager.posts) { post in
                    NavigationLink(destination: DetailView(url: post.url)) {
                        VStack {
                            Text(post.title)
                                .font(.callout)
                                .fontWeight(.medium)
                                .frame(maxWidth: .infinity, alignment: .leading)
                            HStack {
                                Image(systemName:"tag")
                                    .resizable()
                                    .frame(width: 13.0, height: 13.0, alignment: .leading)
                                // 以下タグ表示の処理
                                ForEach(0..<post.tags.count) { i in
                                    if let tag = post.tags[i].name {
                                        Text(tag)
                                            .font(.caption)
                                    }
                                }
//以下省略

타이틀이나 일시에 어긋남은 보이지 않기 때문에, 태그를 표시할 때에 이용하고 있는 ForEach에 문제가 있을 것이라고 생각해, 무서운 무서운 StackOverFlow에 처음으로 질문을 던져 보았다. .

그러자 물건의 1시간에 해결했다.

역시, List의 id와의 연결이 잘 안되지 않았던 것 같기 때문에, ForEach의 쓰는 방법을 이하와 같이 변경하는 것으로 해소할 수 있었다.
ForEach(post.tags.indices, id: \.self) { i in

List 속에서 ForEach를 사용할 때는 index를 사용하려고 강력하게 맹세했다.

좋은 웹페이지 즐겨찾기