質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

2回答

586閲覧

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

matubokkuri

総合スコア5

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2023/03/12 14:25

実現したいこと

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

前提

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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

@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

総合スコア6299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TakeOne

2023/03/13 01:16

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

2023/03/19 06:15

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

0

ベストアンサー

次のように、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 // 以下略

投稿2023/03/13 01:07

hoshi-takanori

総合スコア7895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matubokkuri

2023/03/19 06:16

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問