データ共通化：2つのスライダーに同じデータを使って、ツマミを動かした値を連動させたい

実現したいこと

共通のデータを持たせてスライダーを連動させるようにしたい。

前提

SwiftUIで2つのスライダーをViewに表示させてTabViewを用いてスライダーの表示を切り替えるアプリを実装しています。

実現させたい挙動
・スライダー①のつまみを動かした状態でtabを切り替えると、スライダー②はスライダー①と同じ値を指し示す。という連動する挙動を実現させたいです。
そこで問題が発生しました。

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

・スライダー①を動かした後、tabを切り替えて、スライダー②を確認すると初期値の状態のままツマミは動いていない

該当のソースコード

試したサンプルコードが3つあります。

SwifUI
1import SwiftUI
2
3struct ContentView: View {
4
5    @State var selectedTag = 1
6    @State var numSliderMint2  = 0
7
8    var numSliderMint = SliderViewMint()
9
10
11
12    var body: some View {
13
14        TabView(selection: $selectedTag) {
15            SliderViewMint()
16                .tabItem {
17                    Text("item")
18                }.tag(1)
19
20            SliderViewOrange(numSliderOrange: numSliderMint.$numSliderMint)
21                .tabItem {
22                    Text("item")
23                }.tag(2)
24        }
25    }
26}
27
28
29struct SliderViewMint: View {
30
31    @State var numSliderMint  = 0.0
32
33    var body: some View {
34        ZStack {
35
36            Rectangle()
37                .edgesIgnoringSafeArea(.top)
38                .foregroundColor(.mint)
39
40            VStack {
41                Text("\(numSliderMint)")
42                Slider(value: $numSliderMint)
43
44                Spacer()
45
46            }
47            .frame(width: 300)
48            .padding()
49        }
50    }
51}
52
53struct SliderViewOrange: View {
54
55    @Binding var numSliderOrange:Double
56
57    var body: some View {
58        ZStack {
59
60            Rectangle()
61                .edgesIgnoringSafeArea(.top)
62                .foregroundColor(.orange)
63
64            VStack {
65                Text("\(numSliderOrange)")
66                Slider(value: $numSliderOrange)
67
68                Spacer()
69
70            }
71            .frame(width: 300)
72            .padding()
73        }
74    }
75}
76
77
78
79
80
81import SwiftUI
82
83
84//データ
85struct SliderData {
86    var sliderDataValue = 0.0
87}
88
89
90
91struct SliderView1: View {
92     @State  private var sliderData = SliderData()
93
94
95    var body: some View {
96
97        VStack {
98            Text("\(sliderData.sliderDataValue)")
99            Slider(value:$sliderData.sliderDataValue)
100        } .frame(width: 300)
101    }
102}
103
104
105struct SliderView2: View {
106    @Binding  var sliderData:SliderData
107
108
109    var body: some View {
110
111        VStack {
112            Text("\(sliderData.sliderDataValue)")
113            Slider(value:$sliderData.sliderDataValue)
114        } .frame(width: 300)
115    }
116}
117
118
119
120
121
122
123
124//構造体SliderViewを表示するコンテンツ
125struct ContentView: View {
126
127    @State   var sliderData = SliderData()
128    var body: some View {
129
130        VStack {
131
132
133            SliderView1()
134
135            SliderView2(sliderData: $sliderData)
136
137        } .frame(width: 300)
138    }
139}
140
141
142
143
144
145import SwiftUI
146
147class SliderDate: ObservableObject {
148    //観測対象のプロパティ
149    @Published var numSliderMint = 0.0
150    @Published var numSliderOrange = 0.0
151}
152
153
154struct ContentView:View {
155    @State var selectedTag = 1
156    @ObservedObject var sliderData = SliderDate()
157    var body: some View {
158        TabView(selection: $selectedTag) {
159            SliderViewMint(sliderData: sliderData)
160                       .tabItem {
161                           Text("item")
162                       }.tag(1)
163
164            SliderViewOrange(sliderData: sliderData)
165                       .tabItem {
166                           Text("item")
167                       }.tag(2)
168               }
169           }
170       }
171
172
173struct SliderViewMint: View {
174    
175    //クラスSliderData型を設定
176    @ObservedObject var sliderData:SliderDate
177    
178    var body: some View {
179        ZStack {
180            
181            Rectangle()
182                .edgesIgnoringSafeArea(.top)
183                .foregroundColor(.mint)
184            
185            VStack {
186                //クラスSliderData型のプロパティの呼び出し定義
187                Text("\(sliderData.numSliderMint)")
188                Slider(value: $sliderData.numSliderMint)
189                
190                Spacer()
191                
192            }
193            .frame(width: 300)
194            .padding()
195        }
196    }
197}
198
199struct SliderViewOrange: View {
200    
201    @ObservedObject var sliderData:SliderDate
202    
203    var body: some View {
204        ZStack {
205            
206            Rectangle()
207                .edgesIgnoringSafeArea(.top)
208                .foregroundColor(.orange)
209            
210            VStack {
211                Text("\(sliderData.numSliderOrange)")
212                Slider(value: $sliderData.numSliderOrange)
213                
214                Spacer()
215                
216            }
217            .frame(width: 300)
218            .padding()
219        }
220    }
221}
222
223

試したこと

サンプルを3つほど載せて目を通していただけたら幸いです。
@Steteと@Bindingを使うだけでは、実現は不可なのでしょうか？
これを使えば実現できる！などのアドバイスがあればよろしくお願いいたします、、、、。

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

ここにより詳細な情報を記載してください。

回答2件

@Steteと@Bindingを正しく使えば普通にできると思います。

swift
1import SwiftUI
2
3struct ContentView: View {
4
5    @State var selectedTag = 1
6
7    @State var numSlider  = 0.0
8
9
10
11    var body: some View {
12
13        TabView(selection: $selectedTag) {
14            SliderViewMint(numSliderMint: $numSlider)
15                .tabItem {
16                    Text("item")
17                }.tag(1)
18
19            SliderViewOrange(numSliderOrange: $numSlider)
20                .tabItem {
21                    Text("item")
22                }.tag(2)
23        }
24    }
25}
26
27
28struct SliderViewMint: View {
29
30    @Binding var numSliderMint:Double
31
32    var body: some View {
33        ZStack {
34
35            Rectangle()
36                .edgesIgnoringSafeArea(.top)
37                .foregroundColor(.mint)
38
39            VStack {
40                Text("\(numSliderMint)")
41                Slider(value: $numSliderMint)
42
43                Spacer()
44
45            }
46            .frame(width: 300)
47            .padding()
48        }
49    }
50}
51
52struct SliderViewOrange: View {
53
54    @Binding var numSliderOrange:Double
55
56    var body: some View {
57        ZStack {
58
59            Rectangle()
60                .edgesIgnoringSafeArea(.top)
61                .foregroundColor(.orange)
62
63            VStack {
64                Text("\(numSliderOrange)")
65                Slider(value: $numSliderOrange)
66
67                Spacer()
68
69            }
70            .frame(width: 300)
71            .padding()
72        }
73    }
74}

投稿2023/03/13 01:12

TakeOne

総合スコア6278

回答へのコメント

TakeOne

2023/03/13 01:16

5分遅れでかぶりの回答を入れてしまいました。内容はhoshi-takanoriさんの回答と同じですので、そちらを確認ください。

matubokkuri

2023/03/19 06:15

回答ありがとうございます！助かりました。またご教授のほどよろしくお願いします。

ベストアンサー

次のように、ContentView の @State 変数を SliderViewMint と SliderViewOrange の両方に @Binding すれば良いのでは。

diff
1 struct ContentView: View {
2     @State var selectedTag = 1
3-    @State var numSliderMint2  = 0
4+    @State var numSliderValue = 0.0
5 
6     // これは意味不明
7-    var numSliderMint = SliderViewMint()
8
9     var body: some View {
10         TabView(selection: $selectedTag) {
11-            SliderViewMint()
12+            SliderViewMint(numSliderMint: $numSliderValue)
13                 .tabItem {
14                     Text("item")
15                 }.tag(1)
16 
17-            SliderViewOrange(numSliderOrange: numSliderMint.$numSliderMint)
18+            SliderViewOrange(numSliderOrange: $numSliderValue)
19                 .tabItem {
20                     Text("item")
21                 }.tag(2)
22         }
23     }
24 }
25 
26 struct SliderViewMint: View {
27-    @State var numSliderMint  = 0.0
28+    @Binding var numSliderMint: Double
29 
30     var body: some View {
31         // 以下略