SwiftUI 滑块值不尊重范围答案

【问题标题】：SwiftUI Slider Value Not Respecting the RangeSwiftUI 滑块值不尊重范围
【发布时间】：2021-10-02 12:23:04
【问题描述】：

我有一个带有两个选项卡的选项卡视图，第二个选项卡有一个滑块，其范围从 0 到最大值（计算属性），具体取决于设备的当前宽度（基于方向）。但是，当方向改变时，范围似乎正确更新但值没有更新，这很明显，因为当方向改变并且最大值更新时，如果我在其最大位置单击滑块，则更新值相应地。

以下是代表我的问题的示例代码。导入 SwiftUI

enum Tab: String {
    case Tab1, Tab2
}

struct TabView1: View {
    var body: some View {
        NavigationView {
            GeometryReader { proxy in
                Text("Tab View 1")
                
                .navigationBarTitle("Tab View 1")
            }
        }
    }
}

struct TabView2: View {
    @State var sliderValue: Double = 1.0
    var width: CGFloat
    
    var maxSliderValue: Double {
        (Double(width) * 0.1 / 6.0).rounded()
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Slider(value: $sliderValue, in: 0...maxSliderValue, step: 1) {
                    Label("Slider", systemImage: "circle")
                }
                Text("Value: \(String(format: "%.f", sliderValue))")
            }
            
            .navigationBarTitle("Tab View 2")
        }
    }
}

struct ContentView: View {
    @State var currentTab: Tab = .Tab2
    
    var body: some View {
        GeometryReader { proxy in
            TabView(selection: $currentTab) {
                TabView1()
                    .tag(Tab.Tab1)
                    .tabItem {
                        Label(Tab.Tab1.rawValue, systemImage: "square")
                    }
                
                TabView2(width: proxy.size.width)
                    .tag(Tab.Tab2)
                    .tabItem {
                        Label(Tab.Tab2.rawValue, systemImage: "triangle")
                    }
            }
        }
    }
}

例如，在纵向模式下，宽度为 375，滑块的最大值为 6。而在横向模式下，宽度为 724，滑块的最大值为 12。

在纵向模式下，滑块如下所示。

更改为横向模式并将滑块更改为最大值。

改回纵向模式，滑块的位置处于最大值但值仍为 12。

当我单击滑块时，显示的值随即变为 6。我是如何发送屏幕宽度错误并导致此问题的，还是有办法强制滑块值根据最大值更新并自行修复？

我还想检查 TabView2 结构中的 width 属性是否发生变化，所以我添加了 willSet 和 didSet 来检查值，但是，其中的任何打印语句都没有打印到控制台.

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

当maxSliderValue 值更改时，滑块值也未更改，这就是标签仍显示旧值的原因。可以通过观察maxSliderValue的变化来更新值，更新值。

Slider(value: $sliderValue, in: 0...maxSliderValue, step: 1) {
    Label("Slider", systemImage: "circle")
}.onChange(of: maxSliderValue, perform: { value in
    sliderValue = min(value, sliderValue)
})

【讨论】：