SwiftUI 滑块值不尊重范围

Posted 2023-03-14

【中文标题】SwiftUI 滑块值不尊重范围

【英文标题】：SwiftUI Slider Value Not Respecting the Range

【发布时间】：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 来检查值，但是，其中的任何打印语句都没有打印到控制台.

【参考方案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)
)