LoginSignup
0
1

More than 3 years have passed since last update.

SwiftUIにてList内でForEachを使う場合の注意

Posted at

Qiita APIを使って記事一覧(タイトル、日時、タグ)を表示するアプリを作成している中で、スクロールするとタグの表示がズレるという現象が生じた。
(このような、エラーに引っかからない不具合が一番困る。。)
1AB91F4E-F26E-4485-B431-A724C248DED3.jpeg

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を使おうと強く心に誓った。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1