🍎【SwiftUI】リスト(NavigationLink)にもぐるぐると回るインジゲーターを表示させたい🍎

前提

 List {
                ForEach(self.threads, id: \.objectId) { thread in
                    NavigationLink(destination: ThreadView(thread: thread)) {
                        ThreadListRow(thread: thread)
                    }

表示されているリストをクリックすると
ぐるぐると回るインジゲーターを表示させたいのですが、
表示されているリストをクリックすると
動作も重く、インジゲーターも表示されません。

実現したいこと

表示されているリストをクリックすると、
画面遷移の際、
インジゲーターを表示させたい。

該当のソースコード

Swift
1//
2//  ThreadListView.swift
3//  forum
4//
5//  Created by Atsushi on 2021/08/06.
6//
7
8import SwiftUI
9import NCMB
10
11struct ThreadListView: View {
12    @State private var threads: [NCMBObject] = []
13    @State private var showModal = false
14    @State private var showAlert = false
15    @State var isPresentedProgressView = false
16    var body: some View {
17        NavigationView {
18            List {
19                ForEach(self.threads, id: \.objectId) { thread in
20                    NavigationLink(destination: ThreadView(thread: thread)) {
21                        ThreadListRow(thread: thread)
22                    }
23                }
24                .onDelete(perform: delete)
25            }
26            .navigationBarTitle("掲示板", displayMode: .inline)
27            .toolbar {
28                ToolbarItem(placement: .navigationBarTrailing) {
29                    Button {
30                        showModal.toggle()
31                    } label: {
32                        Image(systemName: "plus")
33                            .resizable()
34                            .padding(6)
35                            .frame(width: 24, height: 24)
36                            .foregroundColor(.blue)
37                    }
38                }
39            }
40        }
41        .onAppear {
42            DispatchQueue.main.asyncAfter(deadline: .now()+0.3) {
43                getThread()
44            }
45        }
46        .sheet(isPresented: $showModal) {
47            AddThreadView()
48        }
49        .onChange(of: showModal, perform: { _ in
50            if !showModal {
51                getThread()
52            }
53        })
54        .alert(isPresented: $showAlert, content: {
55            Alert(title: Text("削除に失敗しました。権限がないようです。"))
56        })
57    }
58    
59    private func manageProgress() {
60            // ProgressView 表示
61            isPresentedProgressView = true
62            // 3秒後に非表示に
63            DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
64                self.isPresentedProgressView = false
65            }
66        }
67    
68    private func getThread() {
69        let query = NCMBQuery.getQuery(className: "Thread")
70        let results = query.find()
71        switch results {
72        case let .success(ary):
73            threads = ary
74        case .failure(_): break
75        }
76    }
77    
78   private func delete(at offsets: IndexSet) {
79        let thread = self.threads[Array(offsets)[0]] as NCMBObject
80        let results = thread.delete()
81        switch results {
82        case .success(_):
83            getThread()
84        case .failure(_):
85            showAlert = true
86        }
87    }
88}
89

試したこと

Swift
1NavigationView {
2            List {
3                ForEach(self.threads, id: \.objectId) { thread in
4                    NavigationLink(destination: ThreadView(thread: thread)) {
5                        ThreadListRow(thread: thread)
6                    }
7                }

の下に、

Swift
1;if isPresentedProgressView {
2                        Color.gray.opacity(0.5)
3                        ProgressView("読み込み中")
4                    }

を

Swift
1NavigationView {
2            List {
3                ForEach(self.threads, id: \.objectId) { thread in
4                    NavigationLink(destination: ThreadView(thread: thread)) {
5                        ThreadListRow(thread: thread)
6                    };if isPresentedProgressView {
7                        Color.gray.opacity(0.5)
8                        ProgressView("読み込み中")
9                    }
10                }
11

のように記述したのですが、
ProgressView("読み込み中")は表示されません。

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

重ねての質問で
大変申し訳ないのですが
こちらも以前の質問同様、同じ方法で解決できると思っていましたが、
解決できませんでした。。。

何度も申し訳ありませんが、
ヒントやアドバイスいただけますと大変嬉しいです。

よろしくお願いします。

1T2R3M4

2023/01/06 04:37

🍎はどのような意味があるのでしょうか。特殊なSwiftUIでしょうか。

SA-KYO

2023/01/06 04:48

すみません、、、 SwiftなのでAppleのりんごマークがあると分かりやすいかと、、

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

回答1件

ベストアンサー

manageProgress() メソッドが実行されていないため
インジケーターが起動していないと推測します。

また、
NavigationStack の外に ProgressView() を出す方針で
組んでみては如何でしょうか？

NavigationStack の外の要素は
遷移先でも残ります。

Swift
1import SwiftUI
2
3struct ContentView: View {
4    @State var isPresentedProgressView = false
5    @State var isActive = false
6    var body: some View {
7        ZStack{
8            NavigationStack {
9                VStack {
10                    Button(action: manageProgress){ Text("表示/非表示切り替え")}
11                    NavigationLink(destination: Text("aaa"), isActive: $isActive) {
12                        
13                    }
14                    ZStack {
15                        Text("Hello, world!") .padding()
16                        
17                    }
18                }
19            }
20            if isPresentedProgressView {
21                Color.gray.opacity(0.5)
22                ProgressView()
23            }
24        }
25    }
26    private func manageProgress() {
27        // ProgressView 表示
28        isPresentedProgressView = true
29        DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
30            isActive = true
31        }
32        DispatchQueue.main.asyncAfter(deadline: .now() + 6.0) {
33            isPresentedProgressView = false
34        }
35    }
36}

動くか分かりませんが
次のような内容です。

Swift
1import SwiftUI
2import NCMB
3
4struct ThreadListView: View {
5    @State private var threads: [NCMBObject] = []
6    @State private var showModal = false
7    @State private var showAlert = false
8    @State var isPresentedProgressView = false
9    @State var isNavigationLinkActive: [Bool] = []
10    var body: some View {
11    ZStack{
12        NavigationView {
13            List {
14                ForEach(0 ..< threads.count, id: \.self) { i in
15                    ZStack {
16                        Button(action: manageProgress(i)){}
17                        NavigationLink(destination: ThreadView(thread: threads[i]), isActive: $isNavigationLinkActive[i]) {
18                            ThreadListRow(thread: thread)
19                        }
20                    }
21                }
22                .onDelete(perform: delete)
23            }
24            .navigationBarTitle("掲示板", displayMode: .inline)
25            .toolbar {
26                ToolbarItem(placement: .navigationBarTrailing) {
27                    Button {
28                        showModal.toggle()
29                    } label: {
30                        Image(systemName: "plus")
31                            .resizable()
32                            .padding(6)
33                            .frame(width: 24, height: 24)
34                            .foregroundColor(.blue)
35                    }
36                }
37            }
38        }
39        .onAppear {
40            DispatchQueue.main.asyncAfter(deadline: .now()+0.3) {
41                getThread()
42                ForEach(self.threads, id: \.objectId) { thread in
43                    isNavigationLinkActive.append(false)
44                }
45            }
46            
47        }
48        .sheet(isPresented: $showModal) {
49            AddThreadView()
50        }
51        .onChange(of: showModal, perform: { _ in
52            if !showModal {
53                getThread()
54                ForEach(self.threads, id: \.objectId) { thread in
55                    isNavigationLinkActive.append(false)
56                }
57            }
58        })
59        .alert(isPresented: $showAlert, content: {
60            Alert(title: Text("削除に失敗しました。権限がないようです。"))
61        })
62        if isPresentedProgressView {
63            Color.gray.opacity(0.5)
64            ProgressView("読み込み中")
65        }
66    }
67    }
68    
69    private func manageProgress(_ index: Int) {
70            // ProgressView 表示
71            isPresentedProgressView = true
72            isNavigationLinkActive[index] = true
73            // 3秒後に非表示に
74            DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
75                self.isPresentedProgressView = false
76            }
77        }
78    
79    private func getThread() {
80        let query = NCMBQuery.getQuery(className: "Thread")
81        let results = query.find()
82        switch results {
83        case let .success(ary):
84            threads = ary
85        case .failure(_): break
86        }
87    }
88    
89   private func delete(at offsets: IndexSet) {
90        let thread = self.threads[Array(offsets)[0]] as NCMBObject
91        let results = thread.delete()
92        switch results {
93        case .success(_):
94            getThread()
95        case .failure(_):
96            showAlert = true
97        }
98    }
99}