遷移時に重なるViewの改善

実現したいこと

遷移時に重なるViewの解消

前提

ビルドはできます。

発生している問題・エラーメッセージ


エラーメッセージなし
Viewが重なる

該当のソースコード

SwiftUI
1
2struct ContentView: View {
3    @Environment(\.managedObjectContext) private var viewContext
4    
5    @FetchRequest(
6        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
7        animation: .default)
8    private var items: FetchedResults<Item>
9    
10    private let list1 = [
11        SampleStruct(sectionTitle: "A", listContent: ["elementA1"],systemNameText: "pin", folderRowName: "a"),
12        SampleStruct(sectionTitle: "B", listContent: ["elementB1"],systemNameText: "pin", folderRowName: "a"),
13        SampleStruct(sectionTitle: "C", listContent: ["elementC1"],systemNameText: "pin", folderRowName: "a"),
14    ]
15    
16    var body: some View {
17        NavigationView {
18            List {
19                ForEach(list1) { item in
20                    Section(item.sectionTitle) {
21                        ForEach(item.listContent, id: \.self) { item2 in NavigationLink{ArrayView()}label: {
22                            SampleStruct(sectionTitle: "A", listContent: ["elementA1"],systemNameText: "pin", folderRowName: "a")}
23                        }
24                        .toolbar {
25                            ToolbarItem(placement: .navigationBarTrailing) {
26                                EditButton()
27                            }
28                        }
29                    }
30                }
31            }
32            .navigationTitle("A")
33        }
34    }
35}
36
37struct SampleStruct : View, Identifiable {
38    let id = UUID()
39    let sectionTitle: String
40    let listContent: [String]
41    let systemNameText: String
42    let folderRowName: String
43    var body: some View {
44        HStack{
45            Image(systemName: systemNameText)
46            Text(folderRowName)
47            Text("\(systemNameText.count)")
48        }
49    }
50}
51
52struct ArrayView: View {
53    @Environment(\.managedObjectContext) private var viewContext
54
55    @FetchRequest(
56        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: false)],
57        animation: .default)
58    private var items: FetchedResults<Item>
59
60    var body: some View {
61        NavigationView {
62            List {
63                ForEach(items) { item in
64                    NavigationLink {
65                        AnotherView(item: item)
66                    } label: {
67                        Text(item.text ?? "")
68                    }
69                }
70                .onDelete(perform: deleteItems)
71            }
72            .toolbar {
73#if os(iOS)
74                ToolbarItem(placement: .navigationBarTrailing) {
75                    EditButton()
76                }
77#endif
78                ToolbarItem {
79                    Button(action: addItem) {
80                        Label("Add Item", systemImage: "plus")
81                    }
82                }
83            }
84            Text("Select an item")
85        }
86    }
87
88    private func addItem() {
89        withAnimation {
90            let newItem = Item(context: viewContext)
91            newItem.timestamp = Date()
92            
93
94            do {
95                try viewContext.save()
96            } catch {
97                // Replace this implementation with code to handle the error appropriately.
98                // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
99                let nsError = error as NSError
100                fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
101            }
102        }
103    }
104
105    private func deleteItems(offsets: IndexSet) {
106        withAnimation {
107            offsets.map { items[$0] }.forEach(viewContext.delete)
108
109            do {
110                try viewContext.save()
111            } catch {
112                // Replace this implementation with code to handle the error appropriately.
113                // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
114                let nsError = error as NSError
115                fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
116            }
117        }
118    }
119}
120
121private let itemFormatter: DateFormatter = {
122    let formatter = DateFormatter()
123    formatter.dateStyle = .short
124    formatter.timeStyle = .medium
125    return formatter
126}()
127
128
129struct AnotherView: View {
130    
131    @Environment(\.managedObjectContext) private var viewContext
132    @State var textEditorText = ""
133    var item: Item
134    
135    init(item: Item) { _textEditorText = State(initialValue: item.text ?? "")
136        self.item = item }
137    
138var body: some View {
139TextEditor(text: $textEditorText).frame(width: .infinity, height: .infinity)
140    
141.toolbar { ToolbarItem(placement: .navigationBarLeading){ Button(action: {additem()}) {Image(systemName: "heart")}} }
142}
143
144func additem () {
145withAnimation {
146    item.text = textEditorText
147
148            do {
149                try viewContext.save()
150            } catch {
151                let nsError = error as NSError
152                fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
153            }
154        }
155    }}
156
157struct ContentView_Previews: PreviewProvider {
158    static var previews: some View {
159        ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
160    }
161}
162

試したこと

ZStackで囲ってみました。

補足情報（FW/ツールのバージョンなど）

Xcode14.1

追記

行動規範の内容に同意します

回答1件

ベストアンサー

Viewが重なる

コードからだけだとなかなか伝えるのが難しい気がしました。
画面のスクリーンショットも添付すると良いかもしれませんね。

ナビゲーションリンクで遷移すると、
ナビゲーションのバーが上に2つ(2行？)表示されてしまうことかなと思いましたので、
その点で書いてみます。

Section 7 Pass Data into Child Views
https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation#Pass-Data-into-Child-Views

Step 7
Step 8

NavigationViewとNavigationLinkの中に記述する遷移先のビューの記述について確認してみると良いと思います。
NavigationViewは親ビューと子ビューでどのように記述されているか、違いはわかりますでしょうか？

private let list1 = [SampleStruct(), ~ ]
struct SampleStruct : View, Identifiable { ~ }
この使い方はあまりSwiftUIっぽくないかなと思いました。
ビューの型はプロパティに定義しない方が良いと思いました。
データをプロパティに定義して、それをビューに渡す感じにするとSwiftUIっぽいと思いました。

次のような感じです。

swift
1import SwiftUI
2import CoreData
3
4struct ContentView: View {
5    @Environment(\.managedObjectContext) private var viewContext
6    @FetchRequest(
7        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
8        animation: .default)
9    private var items: FetchedResults<Item>
10    // --- SectionStruct,ContentStructはビュー(Viewプロトコルを実装したもの)ではありません。
11    private let list2 = [
12        SectionStruct(sectionTitle: "A", content: [
13            ContentStruct(systemNameText: "pin", folderRowName: "a"),
14        ]),
15        SectionStruct(sectionTitle: "B", content: [
16            ContentStruct(systemNameText: "pin", folderRowName: "a"),
17        ]),
18        SectionStruct(sectionTitle: "C", content: [
19            ContentStruct(systemNameText: "pin", folderRowName: "a"),
20        ]),
21    ]
22    var body: some View {
23        NavigationView {
24            List {
25                ForEach(list2) { item in
26                    Section(item.sectionTitle) {
27                        ForEach(item.content) { item2 in
28                            NavigationLink {
29                                ArrayView()
30                            } label: {
31                                // データをビュー(Viewプロトコルを実装したもの)に渡して表示します。
32                                FolderRow(
33                                    systemNameText: item2.systemNameText,
34                                    folderRowName: item2.folderRowName)
35                            }
36                        }
37                    }
38                }
39            }
40            .toolbar {
41                ToolbarItem(placement: .navigationBarTrailing) {
42                    EditButton()
43                }
44            }
45            .navigationTitle("A")
46        }
47    }
48}
49
50// --- セクションを含めたリスト1つ分の構造体です。ビュー(Viewプロトコルを実装したもの)ではありません。
51struct SectionStruct: Identifiable {
52    let id = UUID()
53    let sectionTitle: String
54    let content: [ContentStruct]
55}
56
57// --- リスト1つ分の構造体です。ビュー(Viewプロトコルを実装したもの)ではありません。
58struct ContentStruct: Identifiable {
59    let id = UUID()
60    let systemNameText: String
61    let folderRowName: String
62}
63
64// --- ビュー(Viewプロトコルを実装したもの)の構造体です。
65struct FolderRow: View {
66    let systemNameText: String
67    let folderRowName: String
68    var body: some View {
69        HStack{
70            Image(systemName: systemNameText)
71            Text(folderRowName)
72            Text("\(systemNameText.count)")
73        }
74    }
75}
76
77// 省略