実現したいこと
共通のデータを持たせてスライダーを連動させるようにしたい。
前提
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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/13 01:16
2023/03/19 06:15