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

##困っていること
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}

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

回答1件

自己解決

.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.31%

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

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

質問する

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

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

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

関連した質問