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

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

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

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

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

Q&A

解決済

1回答

1027閲覧

[SwiftUI] Sliderがある値以上で動かなくなる

Hyperbolic4183

総合スコア17

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

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

0グッド

0クリップ

投稿2020/06/03 02:03

##困っていること
SwiftUIで画像のようなものを制作しました。機能としてはRGB値のスライダーを動かした時にその値に対応した色とカラーコード表示されます。
スライダーを164より大きくし、タップをやめると、それ以降スライダーへのタップが無効になります。
イメージ説明

##ソースコード

Swift

1import SwiftUI 2 3struct ColorSlider: View { 4 @State var R:Double 5 @State var G:Double 6 @State var B:Double 7 8 var body: some View { 9 10 VStack { 11 Spacer() 12 RGBRectangle(R: Int(self.R), G: Int(self.G), B: Int(self.B)) 13 Spacer() 14 Spacer() 15 Group { 16 HStack{ 17 Circle() 18 .foregroundColor(.red) 19 .frame(width: 20, height: 20) 20 Text(String(Int(self.R))).frame(width: 40) 21 Slider(value: self.$R, in: 0...255, step: 1.0).frame(width: 200) 22 } 23 HStack{ 24 Circle() 25 .foregroundColor(.green) 26 .frame(width: 20, height: 20) 27 Text(String(Int(self.G))).frame(width: 40) 28 Slider(value: self.$G, in: 0...255).frame(width: 200) 29 } 30 HStack{ 31 Circle() 32 .foregroundColor(.blue) 33 .frame(width: 20, height: 20) 34 Text(String(Int(self.B))).frame(width: 40) 35 Slider(value: self.$B, in: 0...255).frame(width: 200) 36 } 37 }.shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) 38 Spacer() 39 Spacer() 40 } 41 42 } 43} 44 45struct ColorSlider_Previews: PreviewProvider { 46 static var previews: some View { 47 ColorSlider(R: 0, G: 0, B: 0) 48 } 49}

Swift

1import SwiftUI 2 3 4struct RGBRectangle: View { 5 var R:Int 6 var G:Int 7 var B:Int 8 var body: some View { 9 Rectangle() 10 .frame(width: 300, height: 250) 11 .foregroundColor(Color.init(UIColor(self.R,self.G,self.B))) 12 .cornerRadius(50) 13 .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) 14 15 } 16} 17 18struct test19_Previews: PreviewProvider { 19 static var previews: some View { 20 RGBRectangle(R: 0, G: 0, B: 0) 21 } 22} 23extension UIColor { 24 25 convenience init(_ red: Int, _ green: Int, _ blue: Int, _ alpha: Int = 255) { 26 let rgba = [red, green, blue, alpha].map { i -> CGFloat in 27 switch i { 28 case let i where i < 0: 29 return 0 30 case let i where i > 255: 31 return 1 32 default: 33 return CGFloat(i) / 255 34 } 35 } 36 self.init(red: rgba[0], green: rgba[1], blue: rgba[2], alpha: rgba[3]) 37 } 38}

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

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

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

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

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

guest

回答1

0

自己解決

.shadowモディファイアの位置に原因がありそうです。
詳しい理由は調査中です。

HStack{ Circle() .foregroundColor(.red) .frame(width: 20, height: 20) .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) Text(String(Int(self.R))).frame(width: 40) .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) Slider(value: self.$R, in: 0...255, step: 1.0).frame(width: 200) .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) } HStack{ Circle() .foregroundColor(.green) .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) .frame(width: 20, height: 20) Text(String(Int(self.G))).frame(width: 40) .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) Slider(value: self.$G, in: 0...255).frame(width: 200) .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) } HStack{ Circle() .foregroundColor(.blue) .frame(width: 20, height: 20) Text(String(Int(self.B))).frame(width: 40) Slider(value: self.$B, in: 0...255).frame(width: 200) } .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0) }

としたところ、B値のスライダーのみ164以上で動かず、RG値は動かせることが確認されました。

投稿2020/06/03 02:20

Hyperbolic4183

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.32%

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

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

質問する

関連した質問