SwiftUI滑块值与范围无关

Question

我有一个带有两个选项卡的选项卡视图，第二个选项卡有一个滑块，范围从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结构中的宽度属性是否发生了变化，因此我添加了willSet和didSet来检查这些值，但是，其中的任何print语句都没有打印到控制台。

Answer 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)
})